Like what we’re doing? Star us on GitHub!

Fetching from a database

last week

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.

  • Marťafiixek
    last week

    It's stored in a local MongoDB database

  • Taun
    last week

    Thanks. How do I fetch it?

  • Marťafiixek
    last week

    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

  • Taun
    last week

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

  • Marťafiixek
    last week
  • Taun
    last week

    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

    , 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');
          } catch (error) {
            console.error('Error fetching posts:', error);
      }, []);
      return (
          <h1>Posts List</h1>
            { => (
              <li key={}>{post.title}</li>
    export default PostsList; 


  • TheDunco
    last week

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


    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




    or the native


    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!


  • Jarrod
    Payload Team
    last week

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


    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.


    when working locally, your domain will be


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

    fetch API:

    @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.

  • TheDunco
    last week

    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).

  • Taun
    last week

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

  • TheDunco
    last week

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

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More