Fetching from a database

Taun

last week

17

• 

  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

  Read specifically this

  
  

  
  

  https://www.mongodb.com/docs/drivers/node/current/
• 

  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

  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; 

  
  

  "

• 

  TheDunco

  last week

  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

• 

  Jarrod

  Payload Team

  last week

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

• 

  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!