Fetching from a database

default discord avatar
Taun
6 months ago
17

Hi. I'm a noob to coding and I'm wondering how I can store and fetch the data that's inputted via the Payload admin panel. For example, I've setup a PortfolioItems.ts collections file to input a Portfolio item that contains a thumbnail image, title, subtitle.



When I upload the details via Payload admin panel, where is it stored and how do I render it on a page? For example, I'd like to render 9 portfolio items as cards displayed in a grid using TailwindCSS.

  • default discord avatar
    Marťafiixek
    6 months ago

    It's stored in a local MongoDB database

  • default discord avatar
    Taun
    6 months ago

    Thanks. How do I fetch it?

  • default discord avatar
    Marťafiixek
    6 months ago

    I suggest installing MongoDB Compass to inspect your database



    Fetching is done like with any other database



    See the docs for MongoDB or use any object modelling tool (for example Mongoose)



    I also think Payload has some documentation on this subject too

  • default discord avatar
    Taun
    6 months ago

    Great, downloading Compass now and I'll go through the Mongo docs. Thanks for the help.

  • default discord avatar
    Marťafiixek
    6 months ago
  • default discord avatar
    Taun
    6 months ago

    It seems like Payload API handles most of the MongoDB stuff?



    "When you define a collection (e.g., posts) in Payload, it automatically generates CRUD API endpoints for you. In this case, /api/posts is the generated API endpoint to fetch the list of documents in the posts collection. When you make a request to this endpoint, Payload handles the interaction with MongoDB and returns the data for you.



    Behind the scenes, Payload communicates with MongoDB, fetching the data from the posts collection and applying any necessary filtering, sorting, or pagination options you may include in the request. Once the data is retrieved, Payload returns it in a JSON format that you can easily consume and render in your application.



    Keep in mind that the /api/posts URL in the example assumes your Payload API is hosted on the same domain as your application. If your Payload API is hosted on a different domain, you'll need to use the full URL, such as

    https://your-api-domain.com/api/posts

    , and handle CORS settings as needed."



    So I can just use axios to get the data?



    "import React, { useState, useEffect } from 'react';
    import axios from 'axios';
    
    const PostsList = () => {
      const [posts, setPosts] = useState([]);
    
      useEffect(() => {
        const fetchPosts = async () => {
          try {
            const response = await axios.get('/api/posts');
            setPosts(response.data.docs);
          } catch (error) {
            console.error('Error fetching posts:', error);
          }
        };
    
        fetchPosts();
      }, []);
    
      return (
        <div>
          <h1>Posts List</h1>
          <ul>
            {posts.map((post) => (
              <li key={post.id}>{post.title}</li>
            ))}
          </ul>
        </div>
      );
    };
    
    export default PostsList; 

    "

  • default discord avatar
    TheDunco
    6 months ago

    They do expose a GraphQL api which you can play around with at the

    /api/graphql-playground

    link. Once you have your query you can fetch the data using that query by setting the body of a POST request to

    JSON.stringify(<your query and variables>)

    and sending it to /api/graphql using

    axios

    or

    node-fetch

    or the native

    fetch

    method like so...



    import fetch from 'node-fetch' // Note that you'll have to install the node-fetch libary to use this
    
    export interface GraphQLBody {
        query: string;
        variables: Record<string, any>;
    }
    
    const body: GraphQLBody = {
      query: `<your-graphql-query-goes-here`,
      variables: {
        // any graphql variables go here
      }
    }
    
    const data = fetch(`${<your-url-goes-here>}/api/graphql`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(body),
    });


    GraphQL itself is fairly well documented and the Payload GraphQL Playground is the best I've seen with it's own docs and schema. It can definitely be confusing at first, especially if you're new to programming in general, but if you have specific questions about queries or mutations in GraphQL just ask and we can help!



    @Taun

  • default discord avatar
    Jarrod
    6 months ago

    @Taun you could use axios, I would likely recommend just using the native

    fetch

    api though. But the gist, of what you have in that code block above is about right - you will likely need to adjust the endpoint and add on the domain of your payload server to make that fetch i.e.

    [your_domain_here]/api/posts

    when working locally, your domain will be

    localhost:3000

    (3000 may differ, depends on the port you start payload from)



    fetch API:

    https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch


    @TheDunco I think GraphQL is a great option. I just wanted to give a more beginner friendly approach, I know gql can bring a bit of mental overhead when first starting out.

  • default discord avatar
    TheDunco
    6 months ago

    Oh for sure. I know when I first started out with GraphQL I was in over my head. It's all I really use now so I was confident in answering that way, but for sure stick to what's simpler first. I also would have appreciated seeing a code snippet like that when I first started out (referring to web-dev in general, not necessarily Payload specifically).

  • default discord avatar
    Taun
    6 months ago

    Great, thanks a lot. It's above me at the moment, I'll refer back to this post when I get there.

  • default discord avatar
    TheDunco
    6 months ago

    You'll get there for sure, but definitely stick to the basics for now!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.