1. 6
    Migrate a GET Request with a Dynamic URL to RTK Query with builder.query()
    1m 21s

Migrate a GET Request with a Dynamic URL to RTK Query with builder.query()

Jamund Ferguson
InstructorJamund Ferguson
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

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.

egghead
egghead
~ 9 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today