Creating GraphQL APIs with Strapi(Headless CMS) as backend
If you want to create some REST APIs quickly without much coding knowledge you can use a Headless CMS tool.Here the word hedless gives the meaning no-head which is simillar to the meaning no-frontend.When using headless CMS tools you have to build the frontend with your own.Of course there are limitations with headless CMS but to implement project with some basic features even with authentication added, you can use a headless CMS tool. In this article I’ll be discussing about how to use a popular CMS tool called Strapi to create some GraphQL APIs.
Create Project
Run the following command in your terminal or cmd inside your project directory and select Quickstart when prompted.
npx create-strapi-app@latest strapi-graphqlNow project will be created and will strart running automatically in your browser in localhost:1337.It will open up the following screen for you to register as an Admin.
Enter your details and click Let’s start. Now you will be logged in to strapi dashboard.
Main Strapi tabs to focus
- This is where you add data entries to the entities you created.
- You create entities here with the properties you want. For example, Restaurant entity with name, location etc.
- This is where all media files can be found.
- External strapi plugins can be seen here.
- Do strapi related configurations like adding authentication,create user roles, creating users with Admin access etc.
Create content types
Click on Content-Type builder -> Create new collection type and create your first entity.
Enter entity name here.Then click continue.
Now select a type for your first property of your entity. For food item Name we can select Text type.
Enter the property name here.You can check Required if you want by going to ADVANCED SETTINGS tab.By clicking on Add another field button add more fields with relevant property type. I added Description and Image.
Click Save.Our entity is ready now. Let’s create another entity called Category which have a relationship with food item entity.
Follow the above steps and while creating the Category entity.
To have a relationship with Food Item, Select Relation type from the field types.
Select the relationship type you want and click Finish.
Click Save.Categoty entity also ready now.
Adding Content to Entities
Click on Content-Manager tab and click on relavant entity. Then click on Create new entry button.Then fill out the data for properties of each entity.Let’s create a category.
Since there are no data in food items entity you cannot select a relation here.Click Save and Publish.
Let’s create a food item.
Click Save and Publish. Add some more data if needed.
Adding permissions in public role
There are mainly 2 roles created automatically namely Public and Authenticated which you can see if you navigate to Settings -> Roles(under users and permissions plugin). We’ll be using Public role since we are not going to add authentication here. Click on public role and add permissions for each entity you created to create,read,update and delete.
Click Save.
Test REST API
Open your favourite rest client and call the below endpoint to get food items.
http://localhost:1337/api/food-items
It will return a response like below.
{
"data": [
{
"id": 1,
"attributes": {
"Name": "Quinoa Salad with Hump Seeds",
"Description": "rich in fibres.",
"createdAt": "2023-06-23T07:00:24.829Z",
"updatedAt": "2023-06-23T07:15:03.879Z",
"publishedAt": "2023-06-23T07:15:03.876Z"
}
},
{
"id": 2,
"attributes": {
"Name": "Chicken Submarine",
"Description": "this is fast food",
"createdAt": "2023-06-23T07:02:31.128Z",
"updatedAt": "2023-06-23T07:14:57.824Z",
"publishedAt": "2023-06-23T07:14:57.822Z"
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 2
}
}
}This verifies our backend works fine now. You won’t see Image here you have to pass a query parameter populate[0]=Image to retrieve it.
Configuring the backend for GraphQL
To configure our Strapi backend for GraphQL we have to install a plugin.Open your project from terminal and run following command to install the plugin.
npm run strapi install graphqlIf the above command fails, head over to this link and install npm package directly. Now open our strapi project with your favoirite IDE and create and open plugins.js file inside config folder.Add the following code there.
module.exports = {
graphql: {
config: {
endpoint: '/graphql',
shadowCRUD: true,
playgroundAlways: false,
depthLimit: 7,
amountLimit: 100,
apolloServer: {
tracing: false,
},
},
},
};Then run following commands inside your project folder.
npm run build
npm run developNow, from browser load the http://localhost:1337/graphql url.
You will get the above console that you can run graphql queries.
Running GraphQL queries
query getFoodItems{
foodItems{
data{
id
attributes{
Name
Description
Image{
data{
id
attributes{
name
formats
}
}
}
category{
data{
id
attributes{
Name
}
}
}
}
}
}
}If you run the above query you’ll get following response.
{
"data": {
"foodItems": {
"data": [
{
"id": "1",
"attributes": {
"Name": "Quinoa Salad with Hump Seeds",
"Description": "rich in fibres.",
"Image": {
"data": [
{
"id": "1",
"attributes": {
"name": "chicken_sandwhich.jpeg",
"formats": {
"thumbnail": {
"name": "thumbnail_chicken_sandwhich.jpeg",
"hash": "thumbnail_chicken_sandwhich_c95e23349f",
"ext": ".jpeg",
"mime": "image/jpeg",
"path": null,
"width": 208,
"height": 156,
"size": 9.77,
"url": "/uploads/thumbnail_chicken_sandwhich_c95e23349f.jpeg"
}
}
}
}
]
},
"category": {
"data": {
"id": "1",
"attributes": {
"Name": "Good Fibres"
}
}
}
}
},
{
"id": "2",
"attributes": {
"Name": "Chicken Submarine",
"Description": "this is fast food",
"Image": {
"data": [
{
"id": "2",
"attributes": {
"name": "Submarine.jpg",
"formats": {
"thumbnail": {
"name": "thumbnail_Submarine.jpg",
"hash": "thumbnail_Submarine_a642e264d5",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 235,
"height": 156,
"size": 7.97,
"url": "/uploads/thumbnail_Submarine_a642e264d5.jpg"
},
"small": {
"name": "small_Submarine.jpg",
"hash": "small_Submarine_a642e264d5",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 500,
"height": 332,
"size": 25.7,
"url": "/uploads/small_Submarine_a642e264d5.jpg"
}
}
}
}
]
},
"category": {
"data": {
"id": "2",
"attributes": {
"Name": "Fast food"
}
}
}
}
}
]
}
}
}You can run mutations to update,delete or create food items or categories on your preference.
Thanks for reading. Your feedback is appreciated. :)
