Get API by Slug not ID

muperdev

3 months ago

26

• 

  derosul

  3 months ago

  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-3637924
• 

  muperdev

  3 months ago

  I should do this in payload or frontend?

  
  

  
  

  like this in payload yes?

• 

  derosul

  3 months ago

  The fetching should be done on your frontend 🙂

  
  

  
  

  Yes, you should create a custom component with something like that

• 

  muperdev

  3 months ago

  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?

• 

  derosul

  3 months ago

  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?

• 

  muperdev

  3 months ago

  
  

  
  

  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

  
• 

  derosul

  3 months ago

  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

• 

  muperdev

  3 months ago

  very well, I'll check that part so, thank you for your co operation

• 

  jarrod69420

  3 months ago

  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)

• 

  muperdev

  3 months ago

  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?

• 

  derosul

  3 months ago

  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;

• 

  muperdev

  3 months ago

  ohhhh I was confused....

  
  

  
  

  yeah we get it from query

  
  

  
  

  thank you @derosul