Migrating a fetch() Call from Redux to RTK Query with builder.query()
In this lesson we use the builder.query() to define an extremely simple endpoint.
It's worth noting that query() takes an object with a property confusingly called query which can return a URL, which is all we do here. It can also return an object, which we'll see in later lessons.
For more information about queries, see: https://redux-toolkit.js.org/rtk-query/usage/queries
Instructor: [0:00] In your IDE, open up your api.js file, and take a look at your getServices function. This currently fetches data from a route called /API/Services and then converts that to JSON. Now, open up servicesPage.jsx. You can see here where we call api.getServices, we first dispatch a services loading action, we get the services, and then we dispatch that the services have been received.
[0:24] Now, open up apiSlicice.js. Let's add our first endpoint. Type getServices:Builder.query. Then, we're going to pass in the query function. It takes no arguments. This is just going to return the URL of our route after our base path. Returning /Services here will give /API/Services as the route needed to fetch this data.
[0:49] Now that we've done that at the bottom of the file, we can type export const useGetServicesQuery = api.
[0:59] Let me break this down for you. We're declaring a new endpoint called getServices. It's going to fetch data from /API/Services. This custom hook, useGetServicesQuery, is generated automatically by RTK Query, based on this very little amount of configuration we just added.
[1:16] Let's take that new hook, go back into ServicesPage.jsx and replace our call to services here with const data:services = useGetServicesQuery, or at that, let's also import useGetServicesQuery from ../../store/apiSlice.
[1:41] With that one simple line, we've replaced not only this line, but all this work happening down here. I useEffect hook, now it goes away. We'll keep the Dogs within here for now, hasServices is no longer needed, loading, we can replace with isLoading as a destructured value from useGetServicesQuery.
[2:01] Now, any place we're relying on loading, we'll switch that to isLoading! HasServices, we'll simply replace with ! Services. Now we no longer need to access our API here. If we go back to our page now, go to the Services Page, you can see it's not quite working. That's because myServices has some special logic here which were not quite ready to port over.
[2:23] For now, we'll say, myServices = Services. Comment that out, and you'll see the Services are loading properly. Let's remove that, and you can see now all the code we're able to remove here just by switching over to RTK Query.
[2:37] All we had to do is define essentially two lines of code here. Now we have a hook that allows us to load data. It gives us a loading state. We don't have to think about dispatching or dealing with thunks or anything like that.