GraphCMS x Gatsby | Working with GraphQL, Gatsby Create Pages API

hi there in this video we are going to explore create an a Gatsby site with graph CMS using the Gatsby sauce graph QL plugin so grab CMS is a headless CMS that allows you to natively deliver content to pretty much any platform or any device so once you sign up or sign in to grab CMS you will be presented with this screen to create a new project if you already have a project simply click on the button to create a new one and go ahead and give your project a name I'm just gonna give mine a simple district' description and we're gonna choose the closest server to me where my data will be stored so I'm going to create that project and then I'm gonna head in and I'm going to create some schema so on the schema editor things look a little bit different if you haven't used the new graph CMS interface yet but primarily click on the schema editor and inside of the schema editor we are going to create a model we're going to give that model in name of product doesn't matter too much about the ID or plural ID you can customize those if you prefer but right now we're just going to use all the defaults that are given to a spycraft CMS so we give our product a name and the ID is just name that's what I'll use when I'm query in the field and I can give a description for anyone that is editing content you can see what this field is for but I think name it makes sense I will use this as a title field so when we are relating products later in a further demo where you can see that the name of the product is what we see in the relation tables I will make this field required as well next let's create another single line text and with this time we'll give this a name of slug the idea is slug and we'll set this to required and I'm also going to set this to be unique and that means we can't have more than one page with this same product slug finally I'm going to use a multi-line text for my description you could use markdown or rich text but I'll just use multi-line text I'll give this a description I'm not going to set this as required or unique or anything this will just be a description that if we have it it will show and then I'm going to add a field art for an integer field and this will be for the price and I'm going to store the price in cents so we'll make that required as well now with that created we just need to head over to the content editor and I'm just going to go ahead and create some dummy products now we have all of those fields set we'll go ahead and save and publish those and let's create another product let's go ahead and publish that if we head back we see that we have two of our products selected now all that's really left to do inside graphs a mess at this point before we begin to query this data inside of catsby is to get our API endpoint and also set the public permissions to open or to query any publish content so head to the sentence and inside of API access this is the endpoint to our API I'm going to click content from step publish stages can be queried and we'll save that that means anybody access in this URL can now make a public API request without any authentication required and that's okay for this demonstration we don't need to go into too much detail there but if you want to restrict access you can create a permanent or token but we'll leave that for another video now let's go ahead and initialize in your package JSON and we'll add our dependencies we need react react on Gatsby and Gatsby source graph QL we really don't need anything else and I'm not using a CLI because the setup that we were kya is super simple great now that our dependencies are installed if we have a look inside a package JSON you'll see that we have all the dependencies that we sent to install now available in here so we can use these inside of our project and the first thing I'm going to do is I'm going to create a new file for a gatsby config now if you've worked with gas before you will know that this is a file where you pretty much just specify all of the plugins you require any site metadata and inside here this is where we will define our Gatsby sauce graph QL plug-in and it requires a few options first of all we need to resolve the plug-in itself and this is just Gatsby sauce graph QL and then we need to specify the different options of for the plug-in so the type name is graph CMS and the field name is GCMs and finally the URL is the URL to the graph CMS endpoint that we had when we created the project so with this file saved that's all we need to do to initialize the Gatsby setup for Gatsby sauce graph QL and Gatsby runs and we have queries it will create all the applicable types and it knows where to fetch that data because we have specified field name and the URL to get that data so now let's create an index page that lists all of our products so if we create a folder called sauce with your file pages and we'll create an index page now all we need to do inside of here is create that file and all of those queries so first of all that's important react and we'll import a graph QL use static query and we'll also use the link component from Gatsby I'm going to create a concierge query and I'll just call graph QL and let's save these backticks template liberals we will make a query to GCMs and that is because we have the type available to us then we'll grab all of the products we'll grab the name of our product and the slug and we'll also grab the price now let's create a functional component for our index page and using the hookah use static query we're able to run a query here and we'll call you static query and we'll pass in that pH query now from data I know from haven't used Gatsby before the response will return GCMs and inside of there we will have products so we are just nesting down into the data that we get back from CMS then that all all that is left to do is render a page and all we can do at this point is we can map through our products and first of all I'll describe the slug and I'll spread everything into the product and then we will create a new link for the product and what we'd like to do is we'd like to create a page for each of these products and we'll send this to this path and inside of the link or we'll pass is the name of our product so I'll pass product a dot name now it's important with react to pass a key whenever we're looping over anything so we'll use the slug as the key here because we know those aren't unique and that's all that is left to do and down at the bottom we will just export index page now all that's left to do is run gatsby develop and we can use MPX to do that and we'll use MPX gatsby develop that has now gone away to graph CMS pulling down all of the products infection the name slogan price and then what we should see on localhost 8000 with a list of our products let's check that out so great we don't have a list but what we have is we have the two links to our product pages if we click on one of these you're seen that URL goes to slash products and then slash that slug that we provided but we don't have any of those pages generated and that's what we'll do next so let's go ahead and stop the server and then inside of our root directory will create in your file and we'll call this Gatsby node and this is where we can who came to some of the Gatsby lifecycle methods and one of those is create pages so let's return Anna synchronous function and we'll destructure graph QL and actions and from actions will grab create page now I know how the news get before what I'm requiring here but the Gatsby documentation will walk you through all of this so like we did before we will run a query to grab CMS and we will be structured a tour in just a second but what we will do is we will a wait a call to graph QL and inside of here we're going to make a query to the products and this time we need to pass in this stage and we need to pass in the stage publish to graph CMS pass the ID we'll grab the name and we'll grab the price and we'll grab the product slug and that's all we need for this now have them work with graph QL before and gatsby I know that I can be structured data from this graph QL call then I can do structure GCMs and then I can destructure product so inside of the create pages function now what we need to do is we need to loop through all of our products we don't need to return anything so I'm just using for each and then from that I would like to grab the ID and this look then for each of those we will create page well pass a path to our page which will be slash products slash slug and the component we require we don't have yet but we will create and we'll just resolve that for now to our source directory templates product page and finally we will pass in context so inside of this page we can then make another query to gatsby to get the park information that we've queried so actual fact for this we don't actually need the price or the name we just need the ID and slug so we can save this and what we should see is we have a file at queries graph CMS for all of our products that are published it gets the ID so we can pass it down as context later and also the slug so we can build that URL and page so before we do anything else we need to create this file inside of our source directory and we need to create the product page template so inside the source directory we'll do just that then inside of here this is where we now need to import reacts then we need to import graph QL from gets me and this time will create a new function for our product page and I know that I can be structure from the data which will be our props in just a second we'll grab GCMs and we'll grab the product data and that'll make some sense in just a moment so inside of here we will call react fragment and we will pass in an h1 of our product we'll call product that name and then below here we will call product price now because I know that I want to display my price in Euros I can actually just take everything that I have inside of here and I can just return a formatted integer that we receive from grab CMS and it will format using euros so all that is left to do now is export default product page and then above here we need to export a new Const we need to call this page query and then this will make a graph QL query will call this query product page query and this is the query that gets our ID so we will get ID and this ID is what is given to us from gatsby node this is the ID that we now have access to in the context and that is given to the query as a variable so what we can do now is we can make a call to graph CMS and we can get a product where the ID is that ID and we'll go ahead and we'll get the name the description and also the price lastly what we could do is we could display the description now all that's left to do with this is run our catsby development server now we run that it will make all of the queries it will run through the gatsby node file create all of the pages for our product slugs and require this template that template will then make a queries to the data that given to Gatsby and it will create those pages and it can find the agent product that it needs based on the ID we gave it so let's head over to our local host and we'll see that we have the long sleeve and the short sleeve tee products given to us and if we click on one of these now you'll see that we are past the slow to the URL like as before but now we have our h1 with the product name then we have our paragraph tag with the product description and then we have that formatted euro amount of the product if we click the shorts neeti you'll see we have the same we have the program description and price so this has just been a short video demonstration on how you can use gatsby GS with graph CMS to query product data and create programmatic pages

Channel: Jamie Barton

Views: 4,144

Rating: 4.949367 out of 5

Keywords: javascript, code, gatsby, jamstack, react

Id: fqImaAnPNvA

Length: 12min 33sec (753 seconds)

Published: Thu Apr 09 2020