Loading

Creating a slug system with Strapi, Angular and GraphQl

Aug 1, 2020
Abhay Singh
Strapi
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.

slug_1.PNG

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

slug_2.PNG

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

Slug-3.PNG

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 = {
  query: 
    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) {
      id
      name
        slug
    articles{
      title
    }
    }
  }

slug_4.PNG

I hope this will help you!

Related Articles