API Service with RTK Query

[00:00:00]
>> We're gonna talk a little bit about RTK query. Like there's you can actually kinda see like some of the pieces in the bold text. We wire some of the stuff up by hand in using thunks, right? And that works there's obviously a lot even like create a thunk but we had to like set the state ourselves for loading, we had to turn it off when it wasn't loading there's probably things that we need to do like.

[00:00:29]
And that was the simplest case of like go hit API put thing on screen. And that covers a lot of use cases, right? But like, stuff like Irene but then also stuff like okay, but what if you wanna do like, hit it again every five minutes, 60 seconds, 30 seconds, whatever, right?

[00:00:51]
What if you're gonna do a polling interval? What if you wanna say, like, I wanna hold on to the data, which I have implemented before, but then, like, when do you decide that it gets subjected, right? If they're navigating away, if they leave viewing a certain, if the component unmounts and you throw it away.

[00:01:11]
And then the component remounts and like especially if there's a used effect on it, whatever, you'd re fetch the data, right? It would be great if like yeah if something they navigated away and came back, we still held onto that data in the store. Like to kinda your question earlier, like I forget who ask like, what happens if the promise comes back from the thunk before the application bootstrapped?

[00:01:33]
We're like, cool, we have the data ready to go for you. Here it is, right? And it would be nice if we could have stuff like that yeah where if they just navigated away, they could put it un mounted, they came back like it's been under 60 seconds.

[00:01:47]
Here it is. And if we wanted to, we're gonna kick off another poll every 60 seconds, yeah stuff like that, like there's a lot of nuance to things that we wanna do. The important thing to note though, is how much of that is really state management and our state management and the fetching of the data from the server.

[00:02:05]
The same thing or they just kind of like siblings or cousins and stuff along those lines. So like the interesting part about our RTK Query and the reason I wanna talk about is cuz like you can't really talk about thunks without talking about it. However, like they're kind of like slightly different animals.

[00:02:23]
It's super useful. The two disclaimers I wanna make. One you do not have to be using RTK Query like if you do not need to be using Redux to use RTK Query. And you do not need to use RTK Query and use Redux like they are separate. You can use either or both.

[00:02:47]
That is the question one. Answer one to questions that weren't asked. Answer to two questions that weren't asked is, well, what about React query? What about Apollo? What about Oracle? Yeah, if you're using those use them, right? I think the interesting part like one if you're not, right?

[00:03:06]
There's different charts that show the different like, what they have and what they don't have. I think the interesting part about RTK Query is that it is very much like this is like. Or even like us SWF or like any of those libraries that are supposed to be better versions of fetch that can give you loading states and error states and retries and all those things out of the box.

[00:03:25]
RTK Query its advantages if you're interested or the fact that one it is built on top of Redux. And so everything is an action which means if for instance, if you're like evaluated a bunch of these and you do have a bunch of like Redux actions already firing and you are living in that Redux developer tool console all the time, right?

[00:03:48]
And you want the actions that come back from this to be able to kick off things that happen other places in your App, then like, sure, like absolutely go do that, right? Like that seems totally reasonable, right? It will integrate nicely. It does not necessarily like I can't remember if this is just like listening to like an interview with one of like, [COUGH] the maintainers.

[00:04:15]
I'm finding that they're like claiming that it's better. It's just nicely integrated with Redux if that is the thing that interests you and is like some of the kind of common practices built on top of Redux. So I think one is also interesting just to see like how far you could go down the rabbit hole of what we just saw.

[00:04:30]
And two it feels irresponsible to now talk about a thing literally included in the package that you can import. Again, I will repeat the things at the very beginning, which is if you use Redux, Redux Toolkit you do not need to use RTK Query for anything those thunks will work.

[00:04:46]
Redux observable work. And if you wanna use RTK Query, you don't have to use Redux for the rest of your state management. It's like Redux is for your state management that has been the theme of our time together is talking about that. That said, this is actually something I'm really excited about.

[00:05:01]
And I'm starting to use on a work project. And I kinda wanted to show it to you. [LAUGH] I kinda take you on a little bit of tour because I think it is, especially if you have a Redux code base. And what are like interested in how those things can Interplay together, worth taking a little bit of time to see the patterns there and explore.

[00:05:18]
So it's kinda like our little bonus run, and we'll kinda take a look at it. Just like to prove the point that you don't need to have any Redux infrastructure kind of installed. I like switched apps on us. And this one, this React App has nothing in it.

[00:05:39]
It has no state management to speak of. I think it's got empty arrays in various places. And I mostly did that to prove the point of like, you need to have all this set up. It's like a thing that you can kind of use and it provides everything kind of ready to go for you.

[00:05:55]
So we'll kinda take it for a spin in this app, which was a later decision. So well, we'll find out but we'll pull it in and see. So let's kind of explore like how this goes. And like see what some of the patterns are like what kinda you know do it on a very like high level but I think that there's a lot there and a lot of the features are worth investigating.

[00:06:19]
So, let's say like in we had a directory called features for like slices before. In this case we're gonna have one called services which conveniently is the pattern that they recommend from the team and also the same pattern that I use my own code base. That everyone looks at me like I'm crazy, but I call the things a fetch things to the API services.

[00:06:49]
And then I have to re-explain that to everyone in the back-end team cuz I call everything a service that I'm just calling my data fetching my API service. I can't remember where I stole the term from, probably Amber probably five or six years ago. Because that's where I stole most things from but, like I'm glad that like somebody is there with me.

[00:07:09]
And so instead of slices we create the services and the general rule is you probably only have one service. The kind of rule is basically a service per like base API endpoint. Like if you're only talking to one API, like not like, we've got tasks, I've got users like No, one API, right?

[00:07:39]
Then that would be one. If you're talking to two completely different APIs, then you might have two services. But it's usually one per like root endpoint that you would talk to. And it is included in kind of a sub-package inside of it, of its toolkit, and so what we're gonna do is we'll pull in Well, this and we'll say go work the way that I want it to.

[00:08:07]
I made this like do imports the better way. Redux I'd say.
>> Too bad that doesn't auto complete.
>> Yeah, imports are funny sometimes. So we'll say we were joking earlier. That like auto import. Works 50% of the time. Works every time. Redox yeah now's autocompleting when before it was just like no I'm not doing it.

[00:08:38]
That's great I love it. Now there's Redox toolkit/Query which is technically RTK Query and there's another one called Redux Toolkit Query/react. What do you think? Like we'll see why. That's cool. But like the point like it's a react version the other one is you know if not putting that part in there is UI framework agnostic, right?

[00:09:07]
There's something called the react version that we'll see. And so the same way that we made a slice before. We're just gonna say We'll say like, I'm gonna call it like a task API. I mean, these are items this time, right? Item API like cuz this thing really only has items involved like I'll show you the fake endpoints in a second.

[00:09:35]
It's a packing list. There's only one set of endpoints. Calling it an items API seems right. I guess I could call it just an API too. But I'll name it. And we're gonna say that that is this create API. Okay. So it takes a few things. One is like what you want this like reducer path to be called.

[00:10:02]
And you just give it some name. This is kinda like the name that we had previously And then we give it this baseQuery, which is like what's the common part of that API? And we can give this abstraction around fetch that is kinda built in. You could also if you wanna use a GraphQL, you're gonna write a logic for getting those requests and responses and stuff like that yourself.

[00:10:28]
And so like you can use it with anything, but like I have a fake API ready for fetch. And that's other than a little WebG or PC sometimes, what I generally use. And then like the base of this is the base URLs. And we'll do such on API.

[00:10:50]
Awesome. Right? And that's kind of the like initial high level and we'll have to wire it up and wrap it around in a second. But would you agree about. Maybe missing some things in there but it's fine. Yeah, I need to put in points and that makes sense.

[00:11:08]
All right. So endpoints are kind of like a reducer in this and they will get, what do you think? A builder, so you can see that the pattern has a lot of overlap. And I guess like you could say that like not only does it integrate nicely, as well, but like also, it is useful for it's actually nice to return an object.

[00:11:37]
So I'm gonna do the I can return an object I can also do. I was trying an object. And these are our endpoints. So we could have something like get items. And what does get items do, right? It's going to say builder, you can get nice part. As you can see, the builder has two methods.

[00:11:57]
A query, get a mutation, do, right, put, post, delete, whatever. That we have in place and in there we can also say like what that is eventually going to return. So we'll say it's in this case items and if it takes any arguments. So for instance like obviously like get all my take params, my take away friends whatever like we were not putting a dynamic piece in there.

[00:12:27]
So we'll just say void, right? And I don't want a mutation I want query. Awesome. And so I can do that. And then that is gonna take another like configuration object. Which is why it's like, okay, what is the query in this case? And so the query for us is just like, what is the endpoint?

[00:12:48]
If it took an argument, like if you're like, get me item number three, that's where that would go, right? But in this case, like we're gonna start with just the easy one, which is items. And that is the beginning of how this works. We just wanted to immediately like fetch the items and have them ready to go.

[00:13:08]
We have like the beginnings of an entire like API service. And like ideally for this endpoint, you would add all of these like in place, right? And so your get items you'd have get, if it was the other app, we'd have get tasks, get users, all of those things as things that you could like call in this case.

[00:13:31]
And we have that. And if we had a store, like I'll show you like if you have an existing store, like there are some things on this API that you can use. Which is how like when we saw a configure store before, it was a key and a value like tasks and there was the task reducer, user, and there was users reducer.

[00:13:51]
This API, not a slice service, if we looked at it, item API has a bunch of fun stuff in it. It's got endpoints. And kinda look at that and see that it's got the getItems on it already like set up and typed in there. But the other one that is useful is reducer and reducerPath, right?

[00:14:11]
And so the reducerPath is the key and you're combining reducers and the reducer is the value, right? So it's kind of like, cuz it is redux under the hood, even though like I said before, you don't need to have necessarily used it. And so like we could go ahead like and configure a store.

[00:14:42]
Store.ts and we can say ConfigureStore, we know that that takes the reducer. The reducers, that's gonna combine. And so here, did I export it? Yeah, I did, look at me. I'm surprised every time. Item API. We gotta put that in the object .reducerpath. And then itemapi.reducer. So, that's kind of like, it's setting all those stuff up ready for you.

[00:15:23]
And we know the configure store is gonna set the Redux developer tools. So it's gonna have everything else wired up and ready to go for us as well.
>> What does it have to be in an array?
>> This is not an array. This is a syntax in ES 2015.

[00:15:41]
Maybe earlier. It's the syntax in modern day JavaScript to say this is not a string, this is a variable that references a string, right? The reducer's path is items API in this case. It's just the string that this service is as the key and that's the value. It's like the square brackets are saying, put this variable in here.

[00:16:03]
So it's an object. Yeah. Good question. And optionally if you want there is middleware that you can add and this is worth just to show how middleware works in. We're not gonna use middleware but it's worth showing it to how it works in Redux toolkit anyway, is I told you there was a bunch of middleware in place if you needed to add more middleware.

[00:16:22]
The pattern for that function gets one argument which is get default middleware. That way you don't replace that middleware and have to worry about it. So like if you wanna blow away all the middleware that Redux Toolkit gave you, you can do that. But you can also say that like, hey, our middleware should be get default middleware.

[00:16:51]
Concurred like a race spread, whatever makes you happier, like other middleware. It doesn't really matter. In this case, we'll do the So that is what it takes to like set up one of these API services. We still need to wrap a react app in it, but like that's and again like there's Redux happening, but none of this you'll see.

[00:17:16]
I'm not gonna write a single slice. That's why I brought it into this other example on a whim, so we'll see. Because like you don't have to have it, but the nice part is those actions go through all the same reducers as the other stuff does as well and you could integrate it into a larger app too.

[00:17:36]
And so in here, then we can just go and say you actually get two providers. You get provider and you also get, I believe, API provider. What is the difference? This one just I think is lighter and does less. Otherwise, they're the same. But it's just less code cuz now you're not using the rest of the stuff.

[00:17:57]
Did I export that store? I didn't even save into a variable. Awesome. And then so I'll say Tour. Maybe I need the real provider in this case. Yeah, let's pull in the react redux1. I want the real one forget what to type. I don't have react redux. That was my issue.

[00:18:44]
I made one little bit, let's just install that real quick and then I'll show you something else while that installs. React redux, boom. Let that rock and roll for a second. That was faster than I expected. Awesome. Awesome. Pull in my store. Cool. Why? Autocomplete don't fail me now.

[00:19:32]
All right, so we've got that in place. It should all be wired up. We're not doing anything with it yet. But we have the initial like piece in there.