Part 4: Integrating Appsmith & Strapi Via GraphQL API.

Goal

Prerequisites

Overview

1. Install and Configure GraphQL in Strapi

   In case you haven't already, make sure to install GraphQL by running npm run strapi install graphql in your Strapi project and configure the ./config/plugins.js file: 

   module.exports = {
     //
     graphql: {
       config: {
         endpoint: '/graphql',
         shadowCRUD: true,
         playgroundAlways: true,
         depthLimit: 7,
         amountLimit: 100,
         apolloServer: {
           tracing: false,
         },
       },
     },
   };

   This will enable the GraphQL server in Strapi and will make it available in /graphql , so If you restart your Strapi app and visit that URL you'll see the GraphQL Playground

   

2. Create a Strapi API Token

   In your Strapi instance, go to Settings > API Tokens > Create New API Token to create the token for authenticating via REST API. 

   

   Now, enter the details like Name, Description, Token Duration (for Production you should have a duration; for Development instances, it can be unlimited) and the Type. In my case, I'm just going to read data from Strapi; if you are planning to write data back to Strapi from Appsmith, then we recommend custom and then grain-define to which content types this token can write; we don't recommend full access. 

   

    

   Now, Strapi will give you the token; make sure to store it securely since you won't be able to retrieve it again. 

   

3. Create a Datasource in Appsmith 

   Now that you have your API Token, go to your Appsmith App > Data > Add Datasource > Authenticated GraphQL. 

   In the URL, enter your Strapi instance URL plus "/graphql" (or whatever you defined in your plugins.js config, for example, in my case is https://kevinblanco-appsmith.uc.r.appspot.com/graphql

   Then, under Authentication, select Bearer and enter the token you got in Step 1. Give it the name you want; in my case, I will call it "Strapi GraphQL" and then Save the Datasource. 

   

4. Create a Strapi Query

   Now that you have your Strapi Datasouce in Appsmith, you can create queries based on it. Appsmith handles the authentication for you, so you don't have to handle the authentication headers on every request. Go to Editor > Queries > Create new Query/API > Strapi GraphQL. 

   You will notice that Appsmith will autocomplete some things in the UI, like the base URL and the headers for you, now all you have to do is enter the endpoint you want to call. For example, in my Strapi instance, I have a content type called "Events" which handles event data, so in my GraphQL Query, I can call for events like the following: 

   query{
     events{
       data{
         id
         attributes{
           title
           description
           excerpt
         }
       }
     }
   } 

   This way, I'm going to be pulling the title, description , and excerpt  and be able to pull a response from Strapi GraphQL layer. 

   

5. Bind Query Data in UI Elements

   Now, with the query in place pulling data from Strapi's GraphQL, you can confidently start building your UI based on that data. You can use the data binding option in the query or bind the data using the double curly brackets, for example in our case, we called our Query "getEvents" so we can do {{getEvents.data.events}} and typically, Strapi groups field data in a value called attributes so you can do {{getEvents.data.events.attributes}} Here's an example on building a List widget with the Strapi data. 

   

    

Conclusion