Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Get API by Slug not ID

default discord avatar
muperdev2 years ago
12

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?

  • default discord avatar
    derosul2 years 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
  • default discord avatar
    muperdev2 years ago

    I should do this in payload or frontend?



    like this in payload yes?

  • default discord avatar
    derosul2 years ago

    The fetching should be done on your frontend 🙂



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

  • default discord avatar
    muperdev2 years 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?

  • default discord avatar
    derosul2 years 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?

  • default discord avatar
    muperdev2 years 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



    @203164998514638848
  • default discord avatar
    derosul2 years 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

  • default discord avatar
    muperdev2 years ago

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

  • discord user avatar
    jarrod_not_jared
    2 years 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)

  • default discord avatar
    muperdev2 years ago

    mmm, how can I find this jumplist on your github?



    @203164998514638848

    Hi dennis how are you, sorry for asking but how you pass SLUG through this function?

  • default discord avatar
    derosul2 years 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;
  • default discord avatar
    muperdev2 years ago

    ohhhh I was confused....



    yeah we get it from query



    thank you

    @203164998514638848
Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.