Creating a slug system with Strapi, Angular and GraphQl

Creating a slug  system with Strapi, Angular and GraphQl

I am going to explain you step by step guide about how to create a slug system using strapi+Angular+Graphql for any Content Type, for this demonstration I am using the Category Content Type

Step 1: Create a content type Category and add 3 fields name (Text), articles(Relation) and slug(UID) as describe in below images.


Step 2: Attached the Slug attribute with category name attribute so you can regenerate the slug value from category name. as describe in below image


Step 3: Next Goto Categoris collection types and click on Add New Category button to add new Category on typing the Name fields you will notice slug will be generatebold textd based on name fields. click on save button to save the category


Step 4: Now got to your project folder/api/categories/config/ folder and create a flie "schema.graphql.js" and add the below code to this file

const { sanitizeEntity } = require('strapi-utils');

module.exports = {
    categoryBySlug(id: ID slug: String): Categories
  resolver: {
    Query: {
        categoryBySlug: {
        resolverOf: 'Categories.findOne',
        async resolver(_, { slug }) {
          const entity = await strapi.services.categories.findOne({ slug });
          return sanitizeEntity(entity, { model: strapi.models.categories });

Step 5: Open the http://localhost:1337/graphql local strapi application graphql URL and write the below query to run the gql Query

query Category($slug: String!) {
    categoryBySlug(slug: $slug) {


I hope this will help you!

Related Articles