How to replace the Strapi ID field with a slug field

In this video, we discuss how you can replace the Strapi findOne controller action to accept a slug instead of an id. This allows your url path slug to dictate which content is returned from Strapi and is useful when creating blogs with Strapi. This allows you to have user-friendly urls instead of having id’s in the url.
Chapters:
0:00:09 - Setting up a POST in the CMS
0:01:19 - Overriding the findOne Route
0:02:55 - Overriding the findOne Controller
0:05:45 - Testing Our Slug
Learn more with Brayden Girard - / braydengirard
---
Get started with Strapi: strapi.io/
Try live demo: strapi.io/demo
Strapi Blog: strapi.io/blog
Find help in our Forum: forum.strapi.io/
We are hiring! strapi.io/careers

[@patra0o]

This is brilliant mate! Kindly create a video on how to add a custom wrote instead of overwriting it. I want to search for a content type by it's ID and slug at the same time.

[@rahmanare2582]

Thank You, But i cant access any dynamic fields on single post, even when i use ?populate=* . Is there a fix

[@adolforamirezdesancristoba3745]

Thank you so much, I was completely lost on this.

[@kima111]

Thank you for the video! It looks like however that the override broke the relationships, and am unable to use populate to query related fields. Is there a fix to that?

[@CodingAfterThirty]

here is another way to do this to include the ability to pass populate in your query forum.strapi.io/t/strapi-v4-search-by-slug-instead-id/13469/21?u=paul_brats

[@arjunhadke1113]

This was very helpful. I came to this video with some Googling which first led me to the Strapi Forum where someone had linked to this video. Thanks for the amazing product. I am guessing Strapi will be a great help for some of the use cases at work.

[@24worldde84]

Your `routes/custom.js` must locate before your file(ex: post.js). `custom.js` and `new(post).js`. If your `custom.js` locate after `post.js`, it doesn't work. So I changed `0post.js` like that

[@soymohsen]

wow!! I couldn't figure it after trying for 1 hour! You saved me! Thanks man

[@ShahriarKh]

Life saver!

[@mohamedihebhichri9862]

thank you bro you really save my day

[@MQadri83]

You response is still helping! 🤩, I found it weird that you didnt need to specify the route somewhere, it just chooses the first file in folder alphabetically!

[@oasiswow1818]

Thanks! I also want to know how to use populate when I change id to slug

[@DarokViana]

Unfortunately, by doing this customization, API calls to the changed endpoint no longer populate nested fields like images and components.

[@hexam1ne703]

stop using it. I'd rather host it on WordPress.

[@mattie_world]

did you get around this? I can't believe I'm having this issue!

[@hanes2]

Can we make one that doesn’t override ? In the past I’ve always had two functions… id finds slug, and slug find id

[@webstudiochamper5058]

Thank you for video! Any ideas how it can be used with GraphQL?

[@ilirbajrami2902]

Did you find out? It's not working on my GraphQL

[@webstudiochamper5058]

@@ilirbajrami2902 I think the only way to make it possible (i mean getting item by it's slug) on GraphQL is by using filter. Example: products: ( filters: { slug: { eq: $slug } } )

[@ilirbajrami2902]

@@webstudiochamper5058 thanks for the reply! so in this case we dont need the customization from the video, i assume. Is there any downside using filter?

[@webstudiochamper5058]

@@ilirbajrami2902 yes, filter isn't required any customization. I think filtering results can be little bit lower. You can do a several tests to check it.

[@ilirbajrami2902]

What do you mean "lower"? Or you mean slower?

[@voloshyn_o]

I don't know why, but I can't found slug from params. If I use like this where: { slug: id } it's work

[@georgepustovit8728]

In case someone struggles with the population and everything, I came up with another, much simpler solution. Instead of rewriting a fucking controller, you can filter the request to the parent route by the slug so it will return just a single element. This way you can populate fields as in any other request. Hope it helps someone. export async function getSingleBlog(slug) { const url = new URL('/api/blogs'); url.search = qs.stringify({ filters: { slug, }, populate: { cover: { fields: ['url', 'alternativeText', 'width', 'height'], }, category: { fields: ['otherFieldsYouMightNeed'], }, }, }); // logic for sending request goes here }

[@_boza]

Thnx!

[@mattie_world]

It works, but I can't populate nested fields!! Images, components, etc..

[@mattie_world]

myurl.etc/api/endpoints/slug?populate=* does not populate everything. nor does /slug?populate=image which works on my other pages

[@YoonTso]

## In the routes folder, the order of the files is crucial. If the order is - article.ts - custom.ts the output of ctx.params is: { '0': 'api/articles/test', id: 'test' } If the order is - 0custom.ts - article.ts the output of ctx.params is: { '0': 'api/articles/test', slug: 'test' } ## Populate const entities = await strapi .service("api::article.article") .find({ filters: { slug }, populate: ctx.query.populate }); const updatedEntity = await strapi .service("api::article.article") .findOne(entity.documentId, { populate: ctx.query.populate, });

[@thapamilan7]

not working ? Any idea ?

[@shamsfiroz]

replace this line then it works const entity = await strapi.db.query("api::article.article").findOne({ where: slug, });

[@vladimircontreras]

Those with the population problem, you can "restore" it with the populate key when calling findOne(): populate: { sections: { populate: { fields: ['*'], } } } You can also retrieve from those parameters from the context 🙂

[@mr.yellow3250]

how man ?

[@jackcohle]

@@mr.yellow3250 where: {slug: id}, populate: { name_populate: { populate: { name_populate: { populate: { fields: ['*'], } }, name_populate: { populate: { fields: ['*'], } }, name_populate: { populate: { fields: ['*'], } } } } } name_populate : You need to change these fields according to your own. You call what you need. I wanted to give multiple examples.

[@VincentFulco]

Would love to see this in a contiguous video since youtube doesn't link easily from vid to vid. Too easy to get interrupted in the flow.

[@afxcrush41]

Not working (march 2023)

[@faisalkkn8208]

async findOne(ctx) { const { id } = ctx.params; const entity = await strapi.db.query('api::blog.blog').findOne({ where: { slug: id }, }); const sanitizedEntity = await this.sanitizeOutput(entity); return this.transformResponse(sanitizedEntity) }

[@richardroberts3546]

Lots of people seem to be having problems with 'populate' not working.. This is the solution const queryPopulate = (populate) => { if (Array.isArray(populate)) { return populate.flatMap(value => { return value.split(',').map(value => value); }) } } async findOne(ctx) { const { sku } = ctx.params; const { populate } = ctx.query const entity = await strapi.db.query('api::foo.foo').findOne({ where: { sku }, populate: queryPopulate(populate) }) }

[@grapegirl]

hi there. do you know how do you populate images in dynamic zones?

[@kruemelfelix]

If you want to populate something you can change the query to this: ``` const entity = await strapi.db.query('api::partner.partner').findMany({ where: { partner_id }, populate: true }) ``` Change partner.partner and partner_id accordingly.

[@christiandanielortizororbi122]

You are a lifesaver, I owe you a drink 🍹

[@IfechukwuObijiofor]

there's a red squigly lines on const sanitizedEntity = await this.sanitizeOutput(entity); return this.transformResponse(sanitizedEntity); Who else is having this problem in July 2023

[@ankush9117]

me

[@johnbolanoscamacho6570]

async findOne(ctx) { const { slug } = ctx.params; const response = await strapi.db .query("api::product.product") .findOne({ where: { slug } }); return response; }

[@johnbolanoscamacho6570]

Don't sanitize it.

[@MrDragos696]

const sanitizedEntity = await this.sanitizeOutput(entity, ctx)