Connecting Your Next App to Strapi with GraphQL

hey everyone today we'll be looking at how to connect your next.js application to a strappy backend nexus is a react framework that supports both static sites and server rendering so let's get into vs code in our vs code window we have our next js server running on localhost 3000 we built this application using the create next app command line tool and run the command yarn create next up front-end which generated a front-end folder which you see here in the front-end folder we ran yarndev and we have that folder and we have that application running on local 300 as i mentioned on localhost 3000 we have the typical next starter screen back into vs code we want to edit what we see on the screen just so we can have some familiarity with how next.js works so we go to the index.js file and here is where we'll make our edits we'll change the welcome from next.js to say hello from daniel from daniel when we save our work and go back to the browser the changes should reflect great there hello from daniel we want to change this text to display data from strappy so back to our terminal on the terminal on your bottom right we are in the backend folder where we have our strappy project running we use the create strappy app cli tool to generate our project and we ran yarn create strappy app and gave it a name of backend to create the backend folder we use yarn develop to start up our server we'll just close this window for now now that our server is up and running on localhost 1337 admin we'll open up our browser window on localhost 1337 slash admin auth register user we're given this webpage to create our first admin user with strappy i've already filled in the details all i need to click let's get started and that takes me into the admin panel in the strappy admin panel we want to create our first collection type which we'll use to display data in our next.js application so under the plugins section we go to our content types builder and create a new collection type we'll call this collection type messages continue we'll have a single text field called greetings finish and save we wait for our server to restart and on our left we should see the messages collection type appear under collection types when we click on the messages collection type we can add entries i will put a greeting of hello strappy and save this because of the draft and publish feature our entry is currently in the draft state and i have to publish it now that we have a collection type built and entries in our collection type visible here we have to install the graphql plugin we'll do this via the cli go back to vs code we'll stop the server and type yarn strappy install graphql now that the graphql plugin is finished installing we can restart our server let's navigate back to our browser and when we check the plugins section we have graphql installed before we can actually test out graphql queries in the playground we have to give the public role under the user and permissions plugin access to this collection type take find and find one so we can make queries save and get a message saying the raw has been edited and now navigate to localhost 1337 graphql to access strategy's graphql playground inside the graphql playground we'll try out a query to get our messages collection type and inside that collection type we want to get our id and our greeting we click the play button we get back hello from stripey now that we know our graphql queries are working we can actually set up graphql in our next js application back to vs code we'll stop our server we need to install a couple packages we use yarn add at apollo client and graphql now that our dependencies are installed we can restart our nexus server with yarn dev in our file explorer we need to go into our index.js file we'll start with getting rid of this and now that that's done at the top of our file we need to import the dependencies we just installed so import and would destructure this apollo client in memory cache cache and gql at apollo slash client we'll end this end new line now that we've imported our dependencies we need to initialize our get static props function so at the bottom of your file we'll export async function get static props now that we have our static props initialized we need to return actual props so we return props and improps who have an empty array and we are done our get static props function is set up and now we can work on initializing our apollo client i have a snippet here that i will paste at the top of the function so this is the initialization of apollo client we have a uri of http localhost 1337 graphql which is the default strategy graphql endpoint and we also initialize our in-memory cache next up we have to initialize a data property that awaits response data so we need to initialize our graphql query here dot query we have the query from our playground so i'll just paste that in here great so we need to define that as query and now we'll use gql and now we can paste the query from the playground here and now that we have data defined we can go back into the return statement in our props and replace the empty array with data dot messages which is exactly what we get back from our graphql query now let's actually see if our graphql query is being executed let's go to the top of our file and in our home function let's access messages from the getstaticprops function and just console.log messages yes pro and messages so save this and inspect element and have a look at our console and here we have messages appearing and an array that says hello from scrappy so we've got confirmation that our graphql query is working now we can go back into vs code and actually start to render the data that we're receiving so we'll start out by so inside main we'll just take this out and use our map function so we'll start by saying messages which is what we initialized dot map and then we use message to map our data then we want to return and in our return statement we can paste root item so now that we have that we can paste the rest in here we'll change this to say strappy strappy x strappy x next and now we can replace this code section with messages dot greetings when we save our work and go back to the browser we should see message my bad message.greetings and it says trapex next hello from strappy and that's how you can connect your next application to a strappy backend and render information using get static props

Channel: Strapi

Views: 17,743

Keywords: Strapi, headless CMS, gatsby, gatsbyjs, react, strapi blog, gatsby blog

Id: NLXmksU2R-k

Length: 9min 34sec (574 seconds)

Published: Wed Feb 17 2021