Hi everyone, I want to call my blog API by the name of blog not the ID of it, also want to make that blog name slug type, how can I do it?
Hi, I don't think you can do something like "/blog/{mySlug}" at the moment. However we are doing something similar where we query payload by a "slug" field. This is how our data fetch functions looks like:
import qs from 'qs';
export const fetchBlogPostBySlug = async (slug: string) => {
const query = qs.stringify({
where: {slug: {equals: slug}},
}, {addQueryPrefix: true});
const response = await fetch(`${ process.env.NEXT_PUBLIC_CMS_URL }/api/posts${ query }`);
const responseData = await response.json();
if (responseData?.docs?.length !== 1) {
return null;
}
return responseData.docs[0] as Post;
}
We use a where clause on the API route to search for the post by a slug.
For a slug field, there is no built-in slug field, but there are quite some examples out on how to create a slug component yourself. For example this one:
https://github.com/payloadcms/payload/discussions/433#discussioncomment-3637924I should do this in payload or frontend?
like this in payload yes?
The fetching should be done on your frontend 🙂
Yes, you should create a custom component with something like that
oh got it, that's better to handle it that way for now, but is there any plan to add this slug in the close future?
Not sure, but since Slug is such a common thing to use for a CMS, I think it should be in the Payload core. Not sure how the Payload team thinks about that?
also if you saw this on documents even on their website
wondering how they created this, in frontend or CMS we have options like this?
it's like table of contents
@derosul
Ah yeah, we created something similair for our website 🙂
When using the RichText component in Payload it returns the content via the API as a json structure.
What we do is, we loop through the content and search for headings, and create a table of contents from it 🙂
I think the documentation is open source as well, so you can check that
very well, I'll check that part so, thank you for your co operation
I think the reason query by slug directly is not native, is bc yes Payload is a CMS, but also can be used for more than that. So it is nice to be more abstract and allow you to query by slug, but not every app needs that functionality.
As for the jumplist, we use markdown to write our docs, and MDX to render them. We generate the jumplist based on heading (h1/h2 if my memory serves me right)
mmm, how can I find this jumplist on your github?
@derosul Hi dennis how are you, sorry for asking but how you pass SLUG through this function?
Simply by calling the function if that's what you're asking:
fetchBlogPostBySlug('my-slug')
.
If the question is, where to get the slug from: Depending on your frontend framework, I use NextJS and use it like this.
const router = useRouter();
const {slug} = router.query;
ohhhh I was confused....
yeah we get it from query
thank you @derosul
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.