React Query with GraphQL | React Query Tutorial

[Music] all right welcome to yet another code tutorial in this video i'm going to show you how to use react query with graphql queries and i think many of you out there when you think of graphql in a react application you probably think ah apollo almost everyone is using apollo when it comes down to graphql but the thing is that you don't need to use apollo if you don't want to use it apollo is quite a large library so if you don't use all the functionality there it can be better to use something else react query is something that's called agnostic meaning that it doesn't care how you how you get your data you just need to have a what they call a doneable function an async function so we can use graphql and we can give react query an async function that will return the data from that function so that's what i'm going to show you here and there's many way of doing this and i'm going to use something that's called graphql request and that's a small library that i use so that i can parse my graphql queries in an easy way you don't need to use that either but then you have to write your graphql in a much more complex way this way by using graphql request in combination with graphql tag it's easy to write your queries you can write your queries as you do in apollo with a template literal string so i have a little installation here you can see i'm just rendering out graphql with react query so that's my main app.js file here so that one yeah it's just like this now and as you can see i'm using the react script 17 point something and then you don't need to import react up here so it's just enough to have this one here but if we look in the package.json you can see that i've installed graphql i installed graphql request and the graphql tag and then i have react of course so these three here and also react query and i'm using the beta now this is version three of react query it's going to be released probably in any day now so that's what i'm using here to show you because there's a little bit of difference in how you do stuff in react query three especially when it comes down to especially when it comes down to initialize it with a provider and stuff like that but i have a video on this also on my youtube channel so i've already set this up for us in the index.js file you can see in react query version three we import the query client the query client provider from react query and then we create a query client with new query client so that will give us the query client and then we have the query client provider that we give the client that we created here this is almost the same as with apollo also because you have to wrap your application with a provider to be able to use apollo and they're changing to this also in react query now so you have to wrap your application high up in the hierarchy with the query client provider so that's what i've done here and i also provided a link down below this video to the github repository with the finished code and also don't forget if you like my videos please please please please support me by subscribing to my channel all right so let's get started this is the setup that i'm using and if you want to learn more about setting react query 3 up you can check out another video that i have on this topic in my channel okay so let's get started in the app.js file so the first thing that i'm going to do here is actually create my queries i'm not going to use a graphql endpoint that i found when i googled for free graphql apis and it's an endpoint that grabs all the countries in the world and different information about the countries so that's what i'm going to use so i'm going to create the queries here in the app.js file and then i'm going to create a custom hook for grabbing this data with react query i'm going to import gql from graphql tag and that's the one that i use to parse my graphql queries i create a new const and the query's name is going to be get underscore countries equals gql as always i have trouble saying some stuff here but dql and then i have double back ticks because this is a template literal and inside of here we can write our graphql query and for this endpoint it's going to be simple we have the query and then i'm going to ask for the countries i have the country code and the name so that's what i'm going to grab from that one and also i want a single query i want to query a single country to show you also so i create another const that's called get underscore country and all capital letters dql double back ticks and then i have my query and query the reason i want to show you this one also is because we have a variable in our query here so this query is going to have a variable that i call code it's going to be of the type id like this and then we ask for the country we use that variable this query that's called country require you to provide a code and that's the one that we send in here so the code is going to be our variable that's called code all right and then i'm just going to ask for the name in this one so that's our graphql queries that i created here i could create all the logic here in the app itself but i think i have a lot of videos on how you create custom hooks and stuff like that so i won't go through it here i will instantly move to create a custom hook for this one so that's what i'm going to do so i create a new file in the src folder that i call use gql query.js and i move inside of that file first i'm going to import use query from react query something like that and then i need some stuff from the graphql request library i'm going to import something that's called graphql client with not we don't need it actually now when we don't use a variable because the first query is the one that we created for all the countries we don't have a variable for that one but i'm importing this one for later use graphql client and request from graphql request like that right then i export a const and i call my custom hook use gql query just as the file name i like to name them the same i think that will create less confusion if you name them the same and as this is a hook that is based on the use query from react query we need to have some parameters for this one so i want to give this one the key just as we do with the use query hook and also the query of course and also the variables and the config if we want to configure something in react query you can do that in an object and i set this one to an empty object as default something like that and then i have my endpoint const endpoint and this is the graphql api that i told you about that i found and it should be free to use yeah and of course i need to have a fat arrow here also so the endpoint is going to be http s colon forward slash forward slash countries.trevorblade.com i guess that's the guy that created this graphql api so there's our endpoint and use query in react query wants a function for fetching the data so we create a function const fetch data and this one is going to be an async one because we're fetching from the api so i await the data and then i use request that's the one that i imported here from the graphql request library so that's the only thing that we're going to use here because it will make it so simple for us otherwise we have to specify our graphql queries in a in a much different way and also create the request and the header and the body ourself all right it's a request it wants the endpoint then it wants the query itself and then it wants the variables but in this case we don't have any variables so we don't need to specify it but it's in that order for that function the endpoint the query and the variables all right so that's our fetch function and then we're going to return use query that's the one from the react query library so we simply or i probably shouldn't say simply because if you're looking at this you probably don't know how to do it and i don't want to say that it's simple because stuff like this can be quite complex and the use query wants the key and the function the fetch function and the config if we have any config so this will just pass along an empty object if we don't set the config ourselves so that's basically our hook we're going to modify it a little bit more later but first i'm going to show you how this works so i go back to my app.js file and i need to import this custom hook so import use dql query from dot forward slash use eql query all right and now we can use our hook so down below here in the app component i'm going to mark it with fetch data from custom hook that uses react query so we have a const i'm going to the structure out the data is loading and error and this is all react query stuff here and as i told you before i have a video on this in my channel if you don't recognize this this video is very much about explaining how to use graphql with direct queries so i'm not going to explain everything with react query alright then i use my hook use gql query like this and i give it a key of countries a regular string and then i want to give it the query and that's the one that's called get underscore countries that's the one that we created up here without the variable i'm going to remove the sidebar so you can see it here we don't have a variable for this one so get countries and that's everything we need to specify for this one and hopefully we have something here so console.log data i'm gonna save the file go back to the browser and we have some error all right type error object is not a function what did i do wrong here yeah i forgot an s here i usually do that in my tutorials i forgot an s this should be countries.travelblades.com save it go back to the browser and you can see i'm going to reload it just to be sure that i have my countries here so that's nice we know that it's working we're successfully grabbing data from a graphql api with react query and we can also do some nice little stuff here instead of this one here i'm going to return i have parenthesis i can have a repetitive for this one and i enter javascript land and data dot countries dot map i have a country i have an inline error function and i'm going to return a div with a key of the country dot name and then i type out the country.name like this do some order formatting and save it also we can do some stuff here because you have this it's loading flag that's a boolean an error so if is loading return div loading like this and if error return another div something went wrong like this save it go back to the browser you can see that we have our countries here so it's working and that's sweet and you can see that it displays loading when it's loading from the api so my friends this one is actually a fetching data from a graphql api now and we're using the awesome library that's called react query you don't need to use apollo or or relay or something if you don't want to use that apollo has been the go to standard for this in a very long time but there are libraries now that can handle this for you and this is a good example of that and this is only one way of doing it you can do it in other ways also of course as always with code there is one more thing that i want to show you and that is how we use variables also in our queries so for example here we don't specify any variables here now for this use query use gql query the custom hook so i'm going to do that also and we specify them after here in an object so i want to set the code to se that's for sweden and that's how the graphql api works you specify the code and then you can grab a country with that code then i also have to change some stuff inside of my custom hooked so that's what i'm going to do so i go back to the use gql query and also i want to show you here if you for example have an endpoint that needs authorization so you need to send along a token you can create your headers here const headers equal and we set the headers like this authorization and then you're probably going to have a bearer i don't know if i pronounce that exactly correct also i may have said the drink beer or or the beer like the animal i don't know but it's a bearer and then the token goes here so you can parse in your token here so that is the headers that you're going to use and then for this one if you want to send along a token and if you want to use variables we need to create the graphql client from the graphql request library it's a const graphql client equals new graphql client and that's the one of course that i imported up here so the only difference in the naming here i spelled it with a lowercase d and it's a capital d here i could have named it to whatever i want of course and this graphql client needs the endpoint and also the headers so this is how you create the client that always going to provide a token for your api all right and then i have to change some small stuff here we have the fetch data i can actually i'm going to comment this one out and i create a new one so const fetch data equals an async function again and i await and this time i'm gonna wait from the graphql client that i created here i'm going to call the request from that one and i send along the query and the variables like this so this is how we can also include the variables in our query you create the graphql client with the new keyword and the graphql client you give it the endpoint and in this case also our provider headers we don't need it because we don't need to provide a token in this case to this graphql api but it can be good to know because that's a common use case you want to provide a token to be able to use the api so that's what you do here that graphql client will always provide this header with the authorization and stuff like that everything that you want to send along it will also attach that to the request so that's why you create this graphql client and you give it the query and also when you provide the variables this graphql client will make sure that those variables are sent into the graphql query itself and that's also a lot easier than creating this functionality yourself all right so i go back to no i have to change my query in the app.js also because this one is the get countries we should have the singular one get country and also i'm not going to be able to map through stuff here then so i comment this one out and i can type country and first we can console log out the data see what we got so we have the country here you can see in my console and the name so i can just do something like this country and from the data dot country dot name hopefully yeah country sweden so you can see we successfully send along a variable to our graphql query and there's not many rows of code here either you can see so i think this is a super smooth way of doing stuff and we're actually trying this one out now with my client we're changing out the apollo because we're not using all that functionality in apollo i think apollo has a great cache function but we're not using that one so we're going to try out react query exactly the same way as i show you here so i have created a custom hook for my client and i also use the graphql request for that one all right i hope this gave you some insight into using react query with graphql and you can see that graphql is nothing fancy really it's just a string in your body in your request to the end point so it's just the same you just have to parse it in there in a little bit more complicated way than to a rest api maybe but that's what the library graphql request is for it's going to help you with that so hope you like this one please make sure to subscribe on my channel to support me i would love your support and i want to get more followers so i can create more videos like this see you in another one

Channel: Weibenfalk

Views: 4,703

Keywords: development, coding, react query, react query with graphql, graphql, graphql and react-query, React-Query, gql tag, graphql-request, graphql-tag, react-query, react query tutorial, npm react query, react, apollo, graphql and react query, javascript, graphql tutorial, graphql vs rest, tanner linsley, useQuery, usequery, react usequery, react hooks, programming

Id: uP9nDgEUFiU

Length: 19min 39sec (1179 seconds)

Published: Tue Dec 15 2020