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.
It's stored in a local MongoDB database
Thanks. How do I fetch it?
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
Great, downloading Compass now and I'll go through the Mongo docs. Thanks for the help.
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;
"
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
@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.
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).
Great, thanks a lot. It's above me at the moment, I'll refer back to this post when I get there.
You'll get there for sure, but definitely stick to the basics for now!
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.