Strapi Crash Course (with React & GraphQL) #8 - GraphQL Plugin & Overview

all right then gang so far we've been using strappy's rest api and endpoints to fetch data using the use fetch hook and that's completely fine if you want to work that way but now i want to take a side step and i want to show you how to use graphql with strappy instead to query and fetch our data and how that works inside our react application so to begin with we need to install the graphql plugin for strappy so head to the admin area and then into the marketplace over here then click on the download button next to graphql this should download and install the graphql plugin for this instance of strappy now sometimes this takes a little while to install and you might get a message saying something like the server is taking a long time to restart or something like that if that happens don't worry just sit it out and it will finish after about a minute at most if it doesn't install after about three minutes just try refreshing the page and installing it again to see if it works so then now that's installed for us strap it is set up and ready to work with graphql now behind the scenes it's generated all the graphql scheme as it needs to run on the server for our content types and you can see them in the export folder inside graphql right here so this contains schemas for our content types the user content type and other things that strappy uses and this is what strappy will use to handle our queries when we use graphql to fetch data now before we start making queries using graphql in our application i just want to cover the basics of graphql for those that need a refresh or an introduction and to do that we can use a graphql playground tool that strappy gives to us to test out graphql queries it's a tiny bit like postman but for graphql instead now to see that tool open up a browser tab and go to localhost port 1337 then forward slash graphql and hit enter so then over here on the left is where we write our queries then we press the play button to run them and the response is going to appear on the right over here now if you don't feel like you need a refresh on graphql then by all means feel free to skip to the next lesson but for the rest of us let's try out a few simple queries so my friends graphql is a query language it gives us a different way to query data from a server than a rest api in a rest api we would use something like fetch or axios to make requests to a specific endpoint that sends back a bunch of data right instead in graphql we construct what's known as queries to be very specific about the data that we want to get back from the server and it's much more flexible than using a rest api and it's really helpful when you start to work with relational data as we'll see later on in the course so what does a query look like well typically we start it with the query keyword and then we give our query a name which i'm going to call get reviews and then after that we need to open up some curly braces and the actual query what we want to get goes inside these curly braces so all we need to do is say what data we want what types of data now i want to get all of the reviews so i just say reviews and this name right here must match the content type that we have now that on its own is not enough we also have to specify what fields from the reviews that we want to get so we open our curly braces again and specify those inside for example if i just want the title field of each review i just say title and now this is a completely valid query so i could press play now and we'll see the response from strappy on the right and we can see that it's a json object with a data property now inside that is a reviews property which is an array of reviews each review is an object and the only property inside is the title which we specified we wanted so now we have a list of reviews with just their titles if we want more fields we have to specify them in the query so after title i might want also the id so i comma separate these i could do the id and also after that the rating as well so now i'm saying get me all the reviews of each one get me the title the id and the rating and now if we press play strappy sends us back the list of reviews with the title id and rating of each review included so this is really cool graphql allows us to ask for only the data fields that we want i can also add the body field into this if i wanted to so let's do that at the end and then once we've done that we can hit play and this time the body field is added to the response that we get back so this is the kind of query we'll be making soon from our react application to get the data we need now just quickly if you want you can take away the query keyword and the name that we give to this query and we just leave the curly braces to surround the rest and this will still work we don't technically need the query keyword and the name of the query but i will be using them because they're going to allow us to later on use query variables which is a way to pass dynamic values into a query and we'll see how they work later on anyway that's a quick overview of the basics and how to make queries we will be diving deeper into these queries over the coming videos and some of them will become a little bit more complex especially when we start to work with relational data the next step though is to set up our react application to be able to make these types of graphql queries and we're going to do that in the next lesson

Channel: Net Ninja

Views: 26,311

Keywords: strapi, strapi tutorial, strapi crash course, strapi react, strapi react tutorial, strapi graphQL, strapi graphQL tutorial, learn strapi, graphQL, react, headless cms, strapi headless cms, graphql plugin, graphql basics, graphql tutorial

Id: 3x-DeIbuNLc

Length: 5min 55sec (355 seconds)

Published: Thu Jul 22 2021