#Fetching from a database

17 messages · Page 1 of 1 (latest)

jagged crescent
#

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.

quaint bronze
#

It's stored in a local MongoDB database

jagged crescent
#

Thanks. How do I fetch it?

quaint bronze
#

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

jagged crescent
#

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

quaint bronze
#

Read specifically this

jagged crescent
#

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; ```
"
austere badger
#

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!

#

@jagged crescent

rigid robin
#

@jagged crescent 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

Using the Fetch API - Web APIs | MDN

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

#

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

austere badger
#

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

jagged crescent