Migrate a GET Request with a Dynamic URL to RTK Query with builder.query()
If you have a hook for a query such useGetDogQuery() what you pass in that hook will be accessible in your builder.query's query option.
So if I said const {data} = useGetDogQuery(id) I could access that value here builder.query({ query: (id) => "dog/" + id }). But it doesn't just have to be a string, this would also be valid. useGetDogQuery({ id }) and builder.query({ query: (options) => "dog/" + options.id }), for example.
You can read more about defining queries here: https://redux-toolkit.js.org/rtk-query/usage/queries
Instructor: [0:00] In your IDE, open up apiSlice.js and add a new endpoint for getService. getService is going to also be a query, but this time the query function is going to take an argument, the ID. Then for the value, it's going to return to these /services/+id.
[0:16] Then at the bottom, let's export usegetServiceQuery. Copy that. Now, open up ServiceDetailsPage. Import the new hook from ../../store/apiSlice and we'll replace this with const data:service equals usegetServicesQuery.
[0:37] Then we need to pass in our ID. In this case, the serviceID which is coming from the url. We're going to get rid of these two imports that we no longer need. Now, our ServiceDetailsPage relies on RTK Query. Let's open it up and see what it looks like.
[0:53] You come to the services page here and click on any of these images. We'll see that we have a ServiceDetailsPage that shows more information. Previously with Redux, if we would have gone to this page directly, it wouldn't have actually worked because we didn't kick off the call to load services.
[1:08] With a custom hooks the RTK Query provides, loading that data happens first automatically. We just declare that we want it and RTK Query will make sure that it's fetched and rerender our component as soon as the data is ready.