React Query Tutorial - 14 - Query by Id

welcome back everyone over the past few videos we learned a lot about the use query hook and its configuration options when fetching data now what is also pretty common with data fetching is querying by id for example you have a list of items and on click of an item you want the details of that individual item real world use cases include fetching details about a product on an ecommerce site fetching details about a course etc in this video let's learn how to query by id using react query now as part of this video we need to set up some initial code before we get to the react query bit let me break it down so you get the big picture step one we're going to create a new page that will eventually display the details about one single superhero step 2 we're going to configure the route to that page and at the same time add a link from the superheroes list page to the superheroes details page that will allow us to navigate by clicking the hero name for the third and final step we will learn how to fetch a superhero by id and display the details in the ui in a way this video will summarize what we have learnt over the past 10 videos let's begin for step one we create the page that will display the individual superhero details so in the components folder create a new file called rq superhero dot js singular within the file we define and export a simple component the file name should in fact be rqsuperhero.page.js to maintain the standard convention so the component is rq superhero page and for now the jsx will just be superhero details next let's move on to step two which is configuring a route to this hero details page let's begin by adding a route in app.js a bit of react router knowledge is necessary but let me explain what we are doing above the superheroes route i'm going to add a new route the path is going to be slash rq superheroes slash colon hero id colon hero id implies the hero id is dynamic it could be 1 2 3 and so on but for all such parts the same component has to be rendered and what is that component it is the component we have just created rq superhero page make sure to import it at the top now that we have the route we need a way to navigate to this route for that we need to make some changes in our heroes hook as well as the component in use superheroes data first i'm going to comment out the data transformation logic as we need the hero id as well and not just the name next in rq superheroes page jsx i'm going to comment out the jsx that renders just the name and uncomment the jsx from before which has access to the id as well but with this jsx we need a small change on click we need to navigate to the new route passing in the hero ide for navigation we need the link component from the react router package so at the top import link component from react router dom and in the return statement on the div tag key can now be in fact hero dot id and in between the opening and closing div tags we include the link component the children prop is going to be the hero name so hero dot name and we specify the two prop curly braces template literals and the path is slash rq super hyphen heroes slash dollar curly braces hero dot id again a bit of react router magic but the link component sort of behaves like an anchor tag for navigating within the app in our case navigating from superheroes list page to the superhero details page before we proceed any further let's make sure the code we have written works as expected in the browser navigate to rq superheroes here click on one of the heroes we should be navigated to the superhero details page in the url you can see rq hyphen super hyphen heroes followed by the dynamic id 1. that completes our step 2. for the final step we need to fetch details of the hero corresponding to this dynamic id here's something you'll find as a pleasant surprise with json server localhost 4000 slash superheroes gives us the list of superheroes defined in db.json let me now tell you without any additional configuration json server also exposes a query by id so if we navigate to slash superheroes slash one we get the details about the individual hero by id json server matches 1 with the id property and returns only that object slash 2 and we get back superman slash three and we get wonder woman so our end goal now is to get the hero id from the url and pass it into the use query hug and make a request to localhost 4000 slash superheroes slash hero id let's learn how to do all of that we're going to begin by creating a new custom query hook so in the hooks folder create a new file called use super hero data dot js this file will contain the fetcher function as well as the use query hook so let's add the necessary imports import use query from react query and import axios from axios now for the custom query hook export const use superhero data and this is equal to a function here is where we need to put our thinking hats on unlike use superheroes data use superhero data is dependent on the hero ide so we need to get that id into this function pass in hero id as a parameter within the function body we still call and return use query so return use query now the first argument is a key to uniquely identify this query similar to superheroes i could specify super hero but this query is dependent on the hero id as well if you were to leave this as is hero id equal to 1 cached value would be used for hero id 2 3 and so on so what we have to do is include the hero id as part of the query key by specifying an array so the first argument is now an array with two elements the string super hyphen hero and the dynamic hero id react query will now maintain separate queries for each hero now for the second argument we specify the fetcher function let's call this fetch superhero but this function again should accept the hero id to fetch the appropriate hero details so convert it into an arrow function this function will now accept the same hero ide now let's define the function const fetch superhero will receive hero id and we call axios.get and the endpoint is the endpoint json server exposes for each object in the superheroes array so http localhost port 4000 superheroes followed by the hero id make sure to return the result that completes our custom query hook let's now call it from our page component and display the hero details within the component import and call use superhero data but this hook accepts hero id as the parameter we need to extract that from the url for which we need help from react router at the top import use params from react router dom and within the component call use params which gives us the hero id so const hero id be structured from use params this hero id corresponds to colon hero id in app.js we can now pass in this id to the custom hook rest of the component code is very similar to what we have seen earlier the use superhero data hook returns a bunch of values from which we will extract only a few so const is loading data is error and the error then in the jsx if is loading return and h2 tag that says loading if there is an error render that to the browser and if you have the data render data dot data dot name so the hero name and data dot data dot alter ego and that should do it let's save all the files and head back to the browser home page and you can see in the dev tools no queries are being tracked navigate to rq superheroes and we see one query for the superheroes list navigate to batman and we see a new query where id is set to one we also see batman and bruce wayne being rendered our query by id is working as expected if we go back and select superman we now have a new query being cached superhero with id 2 and this is really important otherwise you would see batman very briefly while the data is fetching in the background since we have hero id as part of the query key react query knows superman details haven't been fetched before and will have ease loading to true as well everything works as expected now there is one more thing i want to point out before we move on in the custom hook remember how we pass in hero id to the fetcher function well as it turns out react query automatically passes them into the fetcher function so we can replace the arrow function with just fetch superhero and then instead of hero id as a parameter the function receives various values of which we destructure query key the query key is an array which mimics the array we have passed into use query so hero id is at index position 1 which means we can write const hero id is equal to query key at index position 1. if we go back to the browser refresh everything still works as expected so this is pretty much how you query by id [Music] pass the id into the custom hook use it as part of the query key access it in the fetcher function and call the api passing in the id thank you for watching make sure to leave a like if you're finding the videos helpful and i'll see you in the next video

Channel: Codevolution

Views: 3,296

Keywords: Codevolution, React, React Query, React Query Tutorial, React Query Tutorial for Beginners, React Data Fetching, React Query for Beginners, Query by Id, Query by Id with React Query

Id: 2s2iJLLDwgk

Length: 15min 40sec (940 seconds)

Published: Thu Oct 14 2021