Creating a slug system with Strapi, Angular and GraphQl

CodingHub
2 min readAug 6, 2020

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.

--

--