How to GET data from API in plain JS or ReactJS

[LublubXT]

Hi,
When I found Payload CMS on the internet, I was really excited to try it out. I have been able to figure out how to customize Payload, but the only thing I have not been able to figure out is how to access the API. When I go to the API link (localhost:3000/api/posts/643fd24685ae1fb43b01f2ba), I can see the JSON data. When I try to fetch it in JS, I get an error. I have attached a screenshot of the error.

Here is the code I used to fetch the API:

data = fetch('http://localhost:3000/api/posts/643fd24685ae1fb43b01f2ba', {
    method: 'GET', 
    headers: {'Content-Type': 'application/json'}
}) 
console.log(data)

Here is the Posts code for the collection:

import { CollectionConfig } from "payload/types";

const Posts: CollectionConfig = {
	slug: "posts",
	admin: {
		defaultColumns: ["title", "author", "category", "tags", "status"],
		useAsTitle: "title",
	},
	access: {
		read: () => true,
	},
	auth: {
		useAPIKey: true,
	},
	fields: [
		{
			name: "title",
			type: "text",
		},
		{
			name: "author",
			type: "relationship",
			relationTo: "users",
		},
		{
			name: "publishedDate",
			type: "date",
		},
		{
			name: "category",
			type: "relationship",
			relationTo: "categories",
		},
		{
			name: "tags",
			type: "relationship",
			relationTo: "tags",
			hasMany: true,
		},
		{
			name: "content",
			type: "richText",
		},
		{
			name: "status",
			type: "select",
			options: [
				{
					value: "draft",
					label: "Draft",
				},
				{
					value: "published",
					label: "Published",
				},
			],
			defaultValue: "draft",
			admin: {
				position: "sidebar",
			},
		},
	],
};

export default Posts;

I have tried searching through the community support on Payload, and other places, and I still cannot figure out how to access it. I really want to use this really cool CMS, but it's almost useless if I can't access the data. I want to build websites with ReactJS and Astro, and use Payload as my CMS, but I can't figure out how to access the data.

I would greatly appreciate the help.

[LublubXT]

I finally figured out how to retrieve the JSON data. I used the generated API key.
Here is what worked:

async function logJSONData() {
  const response = await fetch("http://localhost:3000/api/posts/", { method: 'GET', headers: { 'X-Auth-Token': myAPIKey } });
  const jsonData = await response.json();
  console.log(jsonData);
}
logJSONData()

I did have a question. Is this a safe way to retrieve the data in plain JS?

This is what it logged:

[DanRibbens]

It is odd to me that you have auth.useAPIKey on the posts collection. This effectively means the parts are authorized like you think of a user and your collection is given extra fields like salt and hash the way you have it now.

I like that your posts has access.read: () => true that should be all you need to allow the fetch to happen.

I would remove auth on posts and try to fetch again without the header with the API key. Unless I really don't understand your intention there.

The docs have a rest example using fetch https://payloadcms.com/docs/queries/overview#rest-queries

Maybe that example could be improved. I think in your original example you were missing an await, there might be something else missed, but you shouldn't need auth for every collection to query it.

[richleach]

Hey Lub-
How did you actually connect the page and your code above together? I'm trying to make an external API call to fetch some video data from Youtube in my Payload app but can't figure out where to write my API/Endpoint code and how to display the results. Noob stuff, I know but I'd appreciate you for any explanation you can provide. Thanks!

[prineshaz]

Indeed. I love Payload but having difficulty finding clear tutorials. My company are reviewing CMS to take on and im leaning towards Payload btw.

[LublubXT]

Hey!

To keep it short, here is the basic summary of what I did.

1. I created my collection in the payload CMS folder, which was its own app, or the backend of the website.
2. In my other app, I fetched the API and got the data, but even after I "fixed" it, I was running into issues pulling images from the API. I kept getting errors that I did not have permission to get the images, or something like that.

I don't remember everything, because that was quite a while ago. Hopefully that helped answer your question. Just remember, I had two separate apps running on two separate localhost addresses, one for the front end, and the other for the backend (Payload).

[PratikPaliwal509]

how did you got the data using api call

[jonasermert]

data = fetch('http://localhost:3000/api/posts/643fd24685ae1fb43b01f2ba', {
    method: 'GET', 
    headers: {'Content-Type': 'application/json'}
}) 
console.log(data)

fetch('http://localhost:3000/api/posts/643fd24685ae1fb43b01f2ba', {
    method: 'GET', 
    headers: {'Content-Type': 'application/json'}
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error fetching data:', error));

auth: {
    useAPIKey: true,
},

fetch('http://localhost:3000/api/posts/643fd24685ae1fb43b01f2ba', {
    method: 'GET', 
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Your-API-Key-Here'
    }
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error fetching data:', error));