React Query Tutorial #4 - Query Variables

Key Takeaways

all right then gang so in this video i'd like to talk about query variables now query variables are just variables that we can pass into this use query hook which can then be accepted into our function to fetch the data so this thing right here has parameters so we might want to do this if we want to pass in query parameters that we add to the endpoint for example or just any other kind of data that we need to use inside this function so how do we do it exactly well all we do is turn this first argument right here into an array so let me just place an array around this and the first item in the array is still the key of this query so that remains as a string in our case planets now thereafter we can pass in as many different items as we want and they will subsequently be parameters we can accept into this function right here so for example i could pass in a string and that could say hello ninjas now if i want to accept that in this function i can do now the first thing we have to accept though is this first item in the array which is the key so we have to do that first of all and then i can accept any subsequent items i pass in so in this case we can call this greeting but you can call it what you want so greeting inside this function is going to be this item so i can console.log the greeting and now every time that this use query hawk fires this function to fetch data either initially or in the background later on we're going to log out that greeting to the console so let me save this and i'll refresh and come over here to open the console and now we can see hello ninjas are right here if i refresh then we're going to see it just once because it grabs it once to begin with and if i refocus the window by clicking on it it grabs it again because it tries to refetch the data all right so that's how we pass in different values to this function now let's try something a bit more useful than just passing in a string like this what if i want to pass in another argument or another parameter which is the page number of results so for example two now by the page number of results let me show you what i mean by that um if i close this console and then open up the dev tools if i select this query down here you can see that the next page of results is page two so we have 60 items that we can get from this endpoint but we're only getting the first page it only sends us 10 at a time and that's page one if we want to get the next here we have to add on this query parameter the page parameter and set that equal to whatever page we want to get so i could pass in a page number right here and accept that in right here page and then i could output that inside this endpoint now to do that i'm going to use template string instead of a normal string so back ticks here instead of single quotes and then i want to use query parameter page and set that equal to a variable now to do that inside a template string we use dollar sign curly braces then we can output the variable which is page in this case two so now instead of just getting the first page of results over here which starts with this one it's going to get the second page so if i save it and come over here now we see the different data all right so we can see now the next page is three so this could be any number to get any page of data so what i'd like to do instead of hard coding this bit of data is store it in a bit of local state down here and then maybe the user can change that data to update what page they get so let's use the use state hook to do that so const and then we want the page and a function to set the page and by the way if you don't know what i'm doing here definitely check out my react hooks tutorial series the link is going to be down below and this is going to be equal to use state and this is going to have an initial value of 1. now when i pressed enter on this it automatically imported it for me up here from react so this is not react query this is react and now we can pass in the page bit of state instead of a number so it's going to be one to begin with so if i save this we should just get the first page of results but now i want a user to be able to update this to page two or page three for example so let's do a few buttons the first one is for page one and we need to attach an on click handler to that which is an anonymous function which wraps the set page function and the set page function is going to accept one as a value so it sets it to one if they click on this button which is what it is initially but i also want two more buttons and this is going to be for page two and this is going to be for page three so if they click this button it sets this to two and therefore that's passed through into this function it re-fetches the data and gets us the page two of results same for page three and then if we click that it goes back to page one all right so if we save this and come over here we can see now let me close this if we click on page two initially it has to load that very quick to do so but we saw the loading message first of all because it's the first time we're fetching this and then we see these results page two now if i go back to page one we don't see the loading message we see the cached results because we already fetched this initially and that's true now for page two as well we're seeing the cached results it's still fetching in the background to see if there's any update in the data but we're still seeing these cached results straight away which is a really good user experience the same for page three now it's going to show loading very quickly initially but now we should see cached data awesome so my friends that's how we create a very crude pagination using these different variables that we can pass through into our query query variables so next up we're going to see how to use a different hook than this which allows us a better way to paginate our data