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 generate bold text d 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 = {
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 
} 
} 
}

I hope this will help you!

Related Articles

Originally published at https://codinghub.net.