Next.js | Fetching data from Strapi GraphQL API

[Applause] [Music] what's going on guys in this video i'm going to show you how to consume the strawberry graphql api so that we can fetch data from the strapy head headless cms in our next 3ds application we are going to quickly review our data model in strappy and perform some queries using the graphql playground that is provided by strappy when we install the graphql apply finally we are going to use the apollo library to create a custom graphql client in our next js application don't forget to hit that like button and subscribe to the channel and let's get started i have strappy running in my local environment this is the shop content type that we created on a previous video i'm going to put the link to that video here and we added some data for that content type i installed the graphql plugin and when we installed the graphql plugin in strappy it generates the graphql schema for that content type actually this content type okay let's go to the strobie project and let me show you the graphql schema here we have this schema where we have for example have the shop type with an identifier the title the company the location the language and these fields that are provided by strappy and we also have some other types for example we have the input type to create shops i guess this is here somewhere here we go this is the shop input so we want to create a mutation to add a new shop in strappy using the graphql api we need to use this shop input type where we have the title company and the rest of the fields there's another tool provided by stroppy when we install the graphql plugin that is a graphical playground where we can run graphql queries using this model so let's open the graphql playground okay and here we can run our queries for example to get this list of shops so here we can do query and here we can use the schema that we can see here and it's going to auto complete our query here let's close this and here we can do shops and we can include the properties that we want so let's say identifier the title of the shop the location and the company and let's do the language so we get all the fields from that content type i'm going to run this query and as you can see here we get the three records that we have here in the cms okay now we are going to copy this query and we are going to create our graphql client in next.js to get this data and render the data in our next js components just in case you don't know how to set up graphql in a strappy i'm going to put a link to that video here where i explain how to do it okay now let's go to our next cs project and this is the shops page in our next js project where we are rendering the data that we get from this data file here we have the list of shops that has the same structure that we have in our content type for strappy so we are going to remove this import and instead of getting the data from that file we are going to use the apollo client library to fetch data from the strategy graphql api so first i'm going to install the libraries we need to install actually two levels so this is npm install and here we install apollo client and graphql okay now we have the graphql and the apollo client libraries installed in our next cs project now we are going to add a new environment variable here this will be the endpoint of the strappy graphql api we are going to grab this from the playground so this is the url i'm going to name it strappy graphql api and i'm going to paste that value in here okay now i'm going to create a new folder i'm going to call it graphql and i'm going to add a new file where i'm going to put the queries that we're going to perform i'm going to call it queries.js and here i'm going to add a new constant where i'm going to put a query to get the list of existing shops that is going to be actually this query that we have here i'm going to call it get all shops here we need to import gql to define this graphql query so this is import gql and we need to import gql from the apollo client library so this is add apollo slash client this is cql and here we need to use practice and add this graphql query that we have here i'm going to copy this and i'm going to paste it here okay i'm going to export this constant that includes the query that we need to get the list of shops so here is schedule shops now let's go to the index page let's close this and this and let's remove this import where we get the list of shops from the file and here we're going to create the graphql client so this is const client equals to new apollo client and here we need to pass an object to the constructor with two properties the uri that in our case is an environment variable process dot n dot and i'm going to copy the name of the environment variable from here and i'm going to paste it here and the other property is cache in this case we're going to use an in-memory solution so this is new in memory cache this is actually provided by the apollo client library itself here we have the libraries imported and the next thing we need to import is the query that we define here within the graphql folder so this is import this is get all shops from and this is graphql queries and here we are going to run that query so this is const and this is data and here this is await client dot query and we need to pass an object with a property that is actually the query that we want to run so this is get all shops and here we need to pass data dot shops if we go to the playground here we can see what is the structure that is returned when we run this query we have data and within the data object we have shops that is the array with the list of shops let's go back and now we can build and run the application npm run build and now we can run the application npm run that okay now let's open the shops page and as we can see here we get the list of shops that's all i have for today thank you guys for watching remember to hit that like button and subscribe to our channel and i see you guys in next one take care bye

Channel: Pragmatic Reviews

Views: 6,249

Keywords: getStaticProps, Rest api, Next js react framework, react framework production, Next, React, Next pages, jamstack, json, bson, javascript, js, web, coding, server side rendering, static websites, Node, Node js, nodejs, react components, react js, reactjs, framework, react framework, typescript, strapi, strapi cms, cms, strapi graphql API, api, strapi graphql client, apollo graphql client, apollo client, graphql

Id: 3OY-VpN_5N8

Length: 8min 39sec (519 seconds)

Published: Mon Jan 18 2021