React Wednesdays: What’s New in React Query 3? | With Tanner Linsley

welcome everybody to react wednesdays my name is tj van toll i work as a developer advocate at progress with me as always dan wilson dan how you doing hey i'm doing good i'm dan wilson i work at digital primates where we do enterprise react consulting we also curate the enterprise react newsletter so if that's your kind of thing google it we'll never sell your email awesome and if you are new here this is react wednesdays it's a weekly show that we do every week we bring in cool people from around the react world we have them tell us or show us something interesting so today we're about to welcome tanner linsley onto the show but i did want to give a call out to some of our upcoming shows so we have brandon bayer coming in to talk to us about blitz.js i believe they actually just went to beta here just the other day so that'll be interesting to talk to them and then we have some people from the microsoft teams team coming to join us to talk about extensions which is something i did not know you could do uh we use teams at progress i had no idea you could build extensions with react so apparently it's a thing so if you're curious how that works uh you want to see it in action join us in a couple weeks and we'll go through that you know i gave this a try the other day and it just works surprisingly easy once once you sort of have your react app you can just bring it into teams by uh this packaging step and what's really nice about it is you can almost have like an application catalog inside of teams that would connect to your single sign-on and a lot of the microsoft 365 apis is all kind of baked in that's a really interesting way to put applications where people need them yeah i kind of want to try it out because i can i have all sorts of like little ideas of things you can do because like you said having access to all the like the corporate stuff is a pain if you don't uh do it inside like a microsoft playground sort of thing yeah and one other thing i found interesting about it is you know there's always this fear where if you have someone inside of an app and then they they're let go so to speak how do you find all the places they have access and with teams you can just revoke their ability to use this app and it would you kind of stop it at the administration layer and so i know that from an enterprise perspective they'll really appreciate that because that's a an issue people are really sensitive about how do you protect all your line of business apps when they may be all over the place yep very cool so make sure to check those out there's some fancy links up here if you want to subscribe get notifications and such add it to your calendar that's something you can do but for today i want to welcome our guest to talk about react query i want to blank little tanner linsley to the screen tanner how you doing i think you're on mute i'm great how are you i'm doing good uh you want to start by just telling if someone somehow someone hasn't heard of you uh who you are what you do all that good sort of stuff yeah uh i'm front end engineer i i have a startup called nozzle it's been around for about six years uh nozzle.io we are basically reverse engineering uh google search results into big data and like uh dashboards and just kind of a big data warehouse it's pretty cool stuff um you know because of that i've built a lot of open source libraries been pretty busy with react over the last few years so yeah and you have uh oh you've got uh doctor replicating here's already we've already got some fans of react query uh here in the chat and you even have the tan stack which is one of my like favorite names of any tech ever i i need to i just realized like i could totally create the van stack as a competing alternative but i don't think i have the prolificness that you do because there's there's quite a bit that's went into this actually maybe you could just start by listing out some of the projects you the open source stuff you've worked on uh just for people here in chat because there's quite a few of them yeah so the ones that uh are still around um react query obviously react table is another library that i work pretty hard on um it's uh it's basically just some hooks to build like extensible tables in react uh they're headless hooks too so it's pretty interesting approach to building tables you're building tables uh without actually giving people the ability to like build the markup you kind of just put that on them it's great um i have a react charts library which is kind of just more of an experiment fun thing right now in the past i have built uh products like react static with something that was fun for a while um obviously it can't compete with the you know millions of dollars that next js and gatsby are getting so it was just me against all this corporate money i decided to to kind of close it out but um i worked on chart js for a long time if you use chart js 2.0 that was uh some of my work and i don't know just a handful of other smaller libraries that no one's probably ever heard of i also have react form react dash form which is a something you probably shouldn't use you should probably use formic or like react final form or something like that well cool and of course you have react query and i know that's what we want to at least start talking about today i know you said if other questions come in in chat by the way if you have any questions for tanner you know we're just hanging out today so feel free to bring them up and we can take this where we want to go but maybe you could just start you know if people haven't heard of real query right like i think you've got the elevator pitched down at this point but you want to give us like the the like one to two minutes condensed version of what react query is what problem it solves that sort of thing yeah sure um i'll actually just share my screen here yep i'll go ahead and bring it up [Music] got it yeah we're good yeah so if you haven't heard of react query it's uh it's just a library to help you fetch and synchronize data from external sources uh traditionally people have you know done that in something using something like redux um or at the most basic or naive level it's just like using a use effect to you know call fetch or axios.get or something like that um react query kind of addresses the need for server state because not all state is created equal there's kind of like global state and there's server state server state is just entirely different comes with a lot of unique challenges some of those challenges are you know doing like auto refetching and um you know making sure that the data is up to date all the time you know you have paginated queries and load more infinite scroll queries something that people like to do a lot um but there's always just this massive edge case that people don't handle when they build something like their own little use effect hook react query just handles all of that and it handles it really nicely like the most basic example um i could show you here just so you can get a gist of how it feels is uh now let's do simple [Music] we'll just open this up yeah can you blow the font size up with that here we go yeah so this is like the most basic use case you just kind of import use query and give it a special little name whatever you want we're calling it repo data right here and then you just give it a function that fetches your data returns a promise and under the hood it is doing so much um but at the basic level it's handling loading states and error states letting you know when it's fetching in the background and it's uh doing automatic fetching in the background too so if we were to uh let's see look at this basic code sandbox here if it'll pull up yeah i know i've come to appreciate it too because i think everybody when they first come to react they first start by just putting in like a simple fetch call right your use effect you fetch something right which is fine when you just need that but inevitably you're gonna need more in terms of you need to handle errors you need to handle some ui when things are loading then you start to get into caching and all this stuff and it quickly gets out of hand very very quickly and it's the little things that count too like something that takes people by surprise at first with react query but it's one of its best features is like when you refocus the window you can see it re-fetching in the background it's really fast you know but that way you know things are always staying up to date um you know if we visit something that we've already if we try and fetch something we've already fetched it's in the cache so it just kind of happens instantly um instead of seeing those hard loading states and you can see down there in the cache that these are the dev tools by the way which are i think are fantastic um you can see that it's actually keeping all the stuff inside of uh inside of the cache and you can actually go and inspect everything inside of the cache itself it's really cool so that's kind of like the high level uh the high level what is react query it's just uh it's a data for synchronizing data it's a library for synchronizing data into your application so so why don't we um if chad has any questions about react query feel free to chime in and i will pass them along sure but for now maybe we could talk about you even brought it up here because i know you just released a new version because what at least i want to kind of chat about is the new stuff and i want to get into some of some of the experimental stuff as well yeah because i think that's we could have a lot more fun with that sort of stuff but maybe you could just start with react query three right like what changed what are the new things what are the new features what's this the short version of what's in here sort of thing yeah there's a ton of stuff that just kind of got better overall um you know better support for certain things and infinite queries are now bi-directional if you don't know what that means it's okay so like just kind of improving existing apis there are a few things that are new um or at least improved enough that they're worth mentioning the ssr story is pretty interesting and cool now in react query we got a lot of help from some of the contributors some external contributors that really helped us flesh out the ssr story so that would be something we could talk about um other things too it has selectors now these query selectors so if you're familiar with this the selector concept it's being able to kind of like narrow down um a larger set of data to a smaller set uh you do that a lot with queries coming from the server you might not be interested in subscribing to the entire piece of data that you're getting from the server but just a small piece of it so we have selectors now that are kind of similar to like a redux selector if you've ever used those or like the reselect library um that's really interesting we let's see use queries hook is kind of cool i can show you what that's all about but that can handle some weirdness with doing parallel queries uh where before you're kind of you're limited by like the rules of hooks where you had to render use query you know for however many times you wanted to make a query but if you had like a list of items that was changing and you needed to do a query for each one of those items you couldn't really do that because you would break the laws of hooks right so use queries as a way that we got around that it's pretty cool um other interesting things react queries actually the core logic is technically agnostic now so if you wanted to go and build you know a view adapter which i know people are doing or a svelte adapter which i know people are doing you could do that now it's pretty cool um yeah and then just kind of the experimental stuff we talked about this is just one of them the there's like this persist query client experimental package and then like creating persisters and we have some other uh experimental things too that i just added honestly last week so let's see there's a local storage persister there's a broadcast query client um plug-in that's pretty cool i can show you guys what that does so there's there's a few things that we can talk about i don't know what you want to talk about first maybe we could just start with like ssr yeah why don't we we had one question come in for the chat and then i think why don't we just take those things you discussed almost in sequence and i think like ssr is at the top of the list so maybe we can start there yeah we did have a question come in from uh linda does your integration mesh well with apollo because apollo also has a use query hook so that is a great question and the answer to that is that react query pretty much replaces apollo it doesn't integrate with apollo react query is like apollo um think of apollo as a react query that has been built specifically for consuming a graphql api and react query is more of like an agnostic apollo where you can get an apollo like api uh but you can fetch any kind of data with it it could be from a rest api graphql you could fetch it for however you want right i even had somebody using react query and they were fetching data from uh sql lite like it's asynchronous and not technically remote but that's what they're using it for so it doesn't really uh integrate with apollo in fact i've had a lot of people um who have had a lot of success replacing apollo with react query uh you get to drop like 100 kilobytes on your bundle because apollo is huge um and usually they tell me that it's just easier to reason about and simpler uh in architecture than apollo well so speaking of using react query for anything that might be a decent segue to ssr because in my head i'm having a like i've never used real query with us like on the server side before and i'm i'm actually having trouble just wrapping my brain around it because like so my head says right i say like use query that fetches something but if that code's already on the server then like almost this is yeah it messes with my head a little bit because could it almost like just grab the you're on the server right does it just like could you just talk to the database directly am i kind of not thinking of this like i'm curious how this just works in general it's not quite like server component style right where you're just like oh let's just grab the data right um and you know moving closer along that spectrum it's not like remix where you know there's no client side fetching i guess you can do client-side fetching with remix too it's closer to like a mixture between something like next where you're using like initial data like you're getting the data on the server to do the initial paint and then you are hydrating uh your data back into react query when it mounts on the front end if that makes sense yes it's almost like you're getting it it's like almost like a stream of data coming back from the server or i'll walk you through these two these two steps here so one of them like this is the most simple uh i wouldn't i don't think it's the best way to do it but it is a way but it's the simplest way using initial data so react query has this initial data option where if you pass initial data to react query then it's just going to take that data and put it into the cache synchronously and it's going to it's going to act like it's already loaded right so if you're rendering this on the server right you might already have the the data so you just like plop it in there more or less okay oh so this is like an example of getting some blog posts on next js using the get static props um hook kind of so get static props happens when you do a build like a static build so you hit you know next build and it goes and grabs your posts you take those posts and you you pass them from next into the the post component here now something people don't realize here is that this this data going from this get static props function here and moving into props that's getting serialized uh across the wire usually like at least into your render function and if it's static props then it's nothing it's nothing really that big of a deal because it just happens statically but get server side props is different if this were get server-side props then that posts would be getting serialized um and sent down to the client to some extent so that's how we can do this with react query and initial data is whether it's get static props or server side props doesn't matter you just fetch the initial version of whatever the data is going to be and then pass it down through props and then stick it onto use queries initial data and it just works and you can see down here like okay there's a few trade-offs to consider what are those trade-offs well if you call use query like this is just calling use query right at the root of posts but if you're calling use query in a deeper component like down the tree that you're rendering it's gonna probably not be very fun to pass that props posts all the way down to wherever that used query is right you're gonna have to pro you're gonna have to prop drill that initial data all the way down and then again if you're using it in multiple locations you'll have to pass initial data to all of them same same problem as prop drilling um the other thing too is that there's not really any way to know uh when the query was fetched on the server so this data updated app property internally in react query uh thinks that it was just barely fetched when it could have been fetched maybe a couple seconds ago right probably set it to like just new date internally right imagine so this is the easy setup this does work if you're just doing something really naive and simple like this works great so that what this will do is like it'll get your original blog posts it will render them on the server like use query data will have the blog post synchronously so it will render this component just like it is normal yep and then when it gets to the client it's going to kind of hydrate from this uh initial data state and it's going to start doing that refetching and it's going to keep it up to date and so how does the is the hydration actually like are we talking like web sockets level hydration or is it polling the server now this and to be technically honest it's not really hydration with this approach this is more of just like here's some initial data um and we turn it from the static view into the dynamic view yep okay so it just turns from a static uh you know query into like a dynamic one we start fetching on use effect so it's just a gradual it's um incremental i guess what's the term i'm looking for it's incremental enhancement right you start with static and then it just becomes dynamic so there's not really any hydration here yep down here though is the hydration part which is a little bit more involved but it can really make things a lot easier and better so stay with me here for a minute because this might get it might get not complex but it if it's the first time you've seen hydration code for react query it can look kind of funny so really what we're doing is inside of our main app so like this is all from next.js perspective because a lot of people use next but there's like an app wrapper component that wraps around your entire application and this is that component so what we're doing is we're creating a query client that holds all of our data and we're passing it down to our application but what we're doing is we are also looking at the page props for any page that we load whether it's static or or dynamic get it you know get server-side props whatever we're looking at those page props that we normally send through right here yep and we're looking for a special um we're looking for a special property on them called dehydrated state it could be whatever you want but we call it dehydrated state here and if that exists like we pass it to this hydrate component that you get from react query and this is really cool because this hydration from the perspective of a page so now we're into a single page like blog posts like here's our blog post page right yep and now instead of having to do that initial data stuff you can just say okay use query posts get posts like there's nothing new here it's just kind of what you're used to right and then this one right here uh could be another query you can have as many queries as you want and they could be as deeply nested in components as you want it doesn't really matter what matters is that you prefetch and hydrate the query client with that data before it loads and that happens up here so for any page you say okay i want my posts to statically render whether it's static or dynamic i want them to render on the server so we're going to create a new query client and we're going to pre-fetch the posts key so you can see this key is the same right there yep they're just saying go get the posts right and you can await this on the servers they're saying go get the posts and put them into the posts key on our query client and when it gets done we return that props object with the dehydrated state and we basically take the query client and just like package it up we dehydrate it and we package it up into json and that's what gets spit out right here in our app for every single page when we're navigating doing anything like that and so if that dehydrated state is found it just unwraps it using this hydrate component and sticks it into our query client that we're using on our app and that means that when this use query posts runs that data for posts is already going to be in the cache i kind of got that yeah exactly no i know it's a lot and you know what it doesn't you don't necessarily need to understand it all right out of the box right the important part is that it just works i guess like let me let me back up here because i think we could probably talk about the syntax for like the next 40 minutes right um i mean there's even another example here that's like hey if you're not using next here's how to do it like just purely using like raw you know like if you're using express or something like that it's the same exact thing so it gets a little more even more zyntaxy right and when i say backup i imagine like presumably the reason you should care about any of this is you want to make your rendering of something that takes dynamic data faster right like you're really looking to optimize you want it to happen on the server either for speed or for easier seo right yeah and obviously there's a lot of like context to server-side rendering are you server-side rendering public data are you server-side rendering uh like private user data like do they need to be authenticated um there's a lot that goes into this we even designed the hydration around react query and the documentation to make sure that you're not sharing uh requests and query caches between different requests because you could potentially expose private user data yeah because it's almost like you're exposing like a data dump exactly you're more or less at least if i'm understanding this correctly you're more or less putting it like in context of the page here's like a chunk of data that's ready to go that you could do things with more or less yep the old saying goes there's only two hard problems in computer science versus naming things and second is cash cash invalidation it is so hard the fact that you've kind of tied all this up into a very easily addressable dsl is pretty impressive is when i was doing my research here one of the things that impressed me was how much common code wasn't required using react query but would be required if you weren't using it right even just on the client like you can see this caching there's a basic caching example like what happens under the hood and there's a lot to think about this is the kind of stuff that nobody thinks about when they're writing their use effect hook right like inactive queries and garbage collection and stale timeouts like max age type stuff that there's a lot that goes into it and yeah that was the whole goal just make it kind of i hate to use the word abstract but abstract it all behind a simple hook so and sometimes the way software is built like you alluded to earlier you know you just need a simple fetch so just do that and then the next 10 calls in the app are built with a simple fetch and then you realize you know we probably should handle this one condition better and so two of the 10 now have a slightly better robust implementation but eight of them don't and then this keeps spiraling out of control until you've got one week over here and another weird cache over here and you know it's it's organic and and not consistent at all and i think if there's any difficulty with writing custom software it's the the custom software part of it the best custom you can be for utility stuff and please don't take that in a bad way but if i can handle all my data fetching caching and invalidation needs with a simple library like this why would i roll my own exactly um that's yep you nailed it so we did a question come in about uh not that one where i said uh about using react query with graphql subscriptions that is another good question so react query doesn't have like because it's agnostic to the data fetching later there's no first class subscription support for graphql i know people have written integrations for graphql subscriptions uh really what it comes down to is react query has a very robust api um so we use something even at nozzle um where we receive websocket events from the back end anytime that any kite type of like crud object changes that has to do with the user on the client they'll get a websocket event that says this crud object changed and we take that crud object and sometimes you can just straight up replace the data in the query cache so if if you want there is um let's see optimistic updates or updates from mutation responses it's the same exact thing you can just say query client dot set query data you pass it your key and you pass it your data you can just update it and that's really no different than what's happening with the graphql subscription sure the subscriptions getting set up automatically by apollo or whatever for the graphql query but really all it's doing is it's listening for the data coming back and then just manually updating the cache so we do that all the time in nozzle anytime that we get a new event from the server a crud object was just changed we'll just take that new cred object and go update it you can even take that to the next level because sometimes subscriptions are a little aggressive and you don't necessarily want to have to send the payload of the object over the wire all the time so you can you can use invalidation instead so if you just want to send an event that says something was updated then you can just use the query client to invalidate those queries and invalidation's a little smarter if it's on the screen it will go and re-fetch it if it's not on the screen it kind of just marks it as stale or invalid to go get it the next time that you show it so there's more flexibility it's a lower level api um and because we're not deeply integrated with graphql or any type of fetching client we can't set up those subscriptions automatically for you however it's pretty simple to do it looks pretty straightforward see you talked about not being coupled i know one thing you had on the list was not being so coupled to react right and being able to use react query outside of outside of react so is that something like as of the latest version is react query technically usable outside of a react context even not out of the box so there are two parts to react query there's the core and then there are the react bindings when you import use query that hook is like a react hook designed for react but under the hood use query as importing from react query the react query core and the core consists of like base query classes and query observer classes an infinite query class right so there's a lot of low level primitive react classes and objects that you can use to build such a client if we were to go to react query the source i can actually show you a little bit of what that looks like if we go to source and we go to the react folder and look at index you can see here's the stuff that has to do with react right um you blow that up a little bit yep so we've got use use query here um and actually let's go and look at use query so use query is we got all of our overloads right and then we're using base query so let's move over to use base query so here's all the react specific stuff you can see there's refs and we're tracking some you know that we're interacting with react rendering so there's some things you got to do depending on your framework rendering is kind of different yep suspense it looks like yep we're doing some suspense stuff here at the end of the day though uh you can see we're using the core stuff here's a new observer that we create um there's going to be a new query in here somewhere actually the observer creates the query my bad um but this is the stuff that we're importing from the core we're importing the notify manager and the query observer everything else like those are the core things if you were to go into this query observer file um you wouldn't find anything react related it's all just sits here in this core and all of this stuff right here you can import and build your own client um for whatever framework you want and has there been community interest in doing that sort of thing for yeah there has um i didn't want to kind of like own it myself because i don't really know a whole lot about svelt and i don't want anything to do with angular and i have no idea what to do for vue so i just kind of am letting things organically um come to fruition and there's been a couple of projects of people writing them and i figure with time winners are going to surface you know to the top of the pot so is it fair to say that the strategies don't get in their way yeah i'm just kind of like here's the core tools and here's the react query repo of how we did it in react you guys can try and mimic everything you're doing they can import the core library so i think it's kind of funny because if you were doing this in vue you would say import react query but you would just use the core it's all tree shaking and um you know it's but it's funny that they would have to write that but you're totally right just not get in the way and just give them the appropriate tools they need to build the client that they want good rebranded to query yeah i thought about it but there's just it's too it's too set in now you know yeah it could be really hard another one the other thing besides cash invalidation is naming things yeah yeah a good example of this um like this core using this core logic is uh zhoutai actually just released experimental support for like um there's a query atom that you can use now and it uses react query under the hood it's really cool what what was it i don't i didn't recognize the name you you gave me you pronounce it amazingly which i'd love to just congratulate him for that i was calling it joe ty jotai yeah like a soft j right um oh man that logo is something yeah yeah so i think there's like a query yeah so he has x-state he even has x-state integration but query is another one of them so in here there's uh you install react query and then it's an atom with query so you can you can create like it's it's kind of like uh what's that what's that library from facebook it's a recoil it's like a recoil uh i i like it better than recoil but it's like recoil and you can create an atom but it's like a query so you pass the query key and the function it just kind of works it's really it's awesome you gave me an idea sometimes we should have a a game show where we show clues it's like this is the github like the one sentence read me description of the project and see if you can like guess its name yeah that's true it's true cause especially like i think in the the react world like everybody likes like remix recoil redux it's uh like in your brain it gets screwed sometimes everybody knows i like to just name things really boring what they are right but then just market the shiz out of it you know and just create really strong branding around this like oh man you you should uh we've had some fun dan and i can share some stories because we've worked on products we had one called app builder um you know maybe you take some guesses we there was debates between the name icinium and app builder um it actually was called by both at different times because some people liked the the hip very original name and some people wanted to just straight up say what it does sort of thing to you yeah it's it's definitely a trade-off i have things where i've named them very specific to like very unique uh i just think there's something about the react ecosystem where if you own react dash you know something on npm then there's just this natural affordance you know it's too hard to pass up i i saw react query the npm you know library name it's like yes so because it's easy you just say oh yeah install react query and everybody just kind of naturally knows oh he means react dash query from npm there you go i like it what other experimental stuff do you have what are you what are you excited about um about react query excited yeah so selectors are cool i guess i'm not really excited about selectors but they are cool people use them it's pretty much what you would expect um this is that use queries hook that i talked about where you can basically make multiple use query calls but using a variable length array so the length of this array can change over time um so why would you want to do this so let's say you have an api where you can't you can't request um a list of posts you have to request them each individually okay uh but you don't want to shove both posts into the same query result like into the same query cache you want them to be cached separately so i could see that you could you could come in and say you know what we you know use query and then you just like do this a couple of times right then people are always like i want to do this where you say you know map it's like items map and then react's going to yell at you for this query and he's like whoa no no no you can't do this you know yeah i think danny burnoff like shows up at your door and so that's where you know you just have to build some internal tooling around it it's really it's pretty nice i could see that too and it's not like i've worked with apis like that before and lots of times they're they're built that way logically um but i could totally see like you're showing a list of them you can only get them one at a time yeah you wanted to be cashed separately also because they they kind of are their own individual entities it was a unique situation actually with uh the aws team one of the teams at aws i think it was the team handling security keys or something but they're like we can't fetch security keys in bulk like the it seems logical and fetch we can't fetch the individual like we can't say give us all these keys we have to try and call each one individually and you know but we can't put that inside of a component and split the component because then we need to know about all of them up front for a table i was like all right we're talking about use queries let's build it yeah i can't imagine how being able to pull hundreds of security keys would go badly but there's probably a way exactly you nailed it um you mentioned selectors i don't i don't think i know what those are maybe you could just click on my benefit super super quick intro to a selector so like this query is pulling a user object so it's like fetch user it's going to have a bunch of fields you know using age uh image whatever and username is one of them so if you said you were if you were only interested in the username you could say okay i just want to select username from the user i see yeah it's like a short handle like drill down sort of thing what that does too though is it makes it so um this component is only going to re-render when that data changes not when the actual big like user object changes so it's also a performance optimization will it still cache the whole it still caches it based on the user it's just in this instance of the query observer right here it's just kind of boiling it down to data and only re-rendering the component when the username changes so gotcha yeah that's pretty neat so yeah that's what i'm excited about i i did i've we've got one i see uh real quick before we get into the excitement we do have one question here for use query for calling once what do you think about using state time infinity bad practice or refatch oh i think he means stale time infinity so oh yeah still time infinity um would basically mean you only fetch it once forever so once it's fetched it's cached and you never try and re-fetch it from the server uh i do that all the time for like think we have things like uh column definitions that uh i guess i need to set do not disturb them yeah column definitions they will never ever change yeah there's column definitions from the server that are just dynamic but they don't change enough to need to re-fetch them ever it'd be like a list of supported languages or whatever something like that and that's kind of stuff where i'll say you know stale time and cache time is infinity right just like i just want to fetch it once and cache it and then use it everywhere in my app and never refetch it again so that is a great use case for stale time infinity so cool yeah [Music] all right what are you excited about what's what's amazing and react query what's coming all that good sort of stuff well if i'm being honest with myself i'm actually more excited about some other things i'm working on especially react table but that's like a whole different topic what i'm excited about with react query are these plugins so there is this persist query claim it's experimental because we're still working on it but basically what this does is it lets you persist your cash whatever's in your cash to some location and then bring it back up when your app mounts this is really cool because what it does is it it takes a persister um i i think i spelled persister wrong you know what that's okay persister looks kind of cool so somebody's looking to get a pull request in here here's your chance you're going to have to change a lot of persisters basically you you can use these this persister interface so this one's a local storage persister which is uh right here we can look at in a second so you can create a new local storage persister and then pass it to this plugin with your query client missing a comma there great and what it will do is it will it will constantly be keeping a copy of your whole cache in local storage and then what happens is when you reload the page or when you come back as long as the max age hasn't been hit it just it just restores your cache from that persisted location immediately because some people are like well i'm using react query but every time i reload the page i have to re-fetch the data that's because react queries like an in-memory cache um in fact we could try it out right here i'm just going to [Music] uh start up this while you're getting that up and running i totally googled the spelling of this because i just had to know and i'm now on english.stackexchange.com and there's an entire thread about this oh jeez i knew that yeah this is way more information that i wanted but this the top floated answer says persister with an e means something that persists whereas persist or with an o means something that provides persistence oh man so it could go either way yeah like i read that and i'm like i don't even know like technically what you're building i don't know you need like an english major in here to decide what you should go with i yeah we'll see i'll talk to some of my contributors and get extremely opinionated opinions just write it up as a win maybe you invented a new term maybe we'll change the name entirely [Music] um so here's just like your basic react query application right uh actually let's come in here i'm just gonna slow this down artificially for a second so we're going to await a new promise and we're going to resolve it uh after like two seconds so it will wait two seconds it's kind of like we're fetching data right you reload the page you got to re-fetch that data this is the typical react query experience i like that little hack for asleep too by the way that's kind of fun yeah it is fun um and especially if your users are reloading the page a lot which they shouldn't be but i guess if they are or if they're closing it and opening it a lot it can be annoying to to deal with this right um so let's add in the let's add in the per sister now so um let's the only one that we have that's semi-official is this local storage persister so i'm going to bring in this code right here it takes the query client which uh we have to pass in some of these options like the cash time we have to set this to 24 hours because we don't want persisted cashes lasting longer than a day usually i want to be able to cash back cash bust that stuff right there's actually cash busting options inside of the persist query client which is pretty cool so we'll pass it our persister local storage for sister and i think that's all we should have to do so come back um we already loaded this let's go into our application storage and just look at local storage here really quick so yeah we got a ton of stuff in here but one of them in here is the let's see react query offline cache so this is just the default key right here you crank that thing up too yep yeah i think it's good enough to get the rough sense of it there's the default key and look it's huge it's got all the data from the cache in it right um but what's nice about this now is if we reload the page you're not going to see that i can't even tell i'm reloading the page but i am yeah because it's getting it uh actually do you have to worry about like hitting local storage limits with considering you're throwing like uh you do so you'll you know five megabyte limit you'll get uh you'll get a little warning in a lot of browsers like hey can this use more than five megabytes you have to be like the user has to be like yes it can um there are some browsers that don't even do that they just kind of cap you uh the other thing that you have to worry about is like spamming local storage uh first like trying to get and set things you it can be expensive to write to the local storage um yes really big objects so you have like a complex app and like you're persisting sounds like you kind of want to be a little bit maybe not clinical but at least strategic or uh careful with what you're doing with this there's actually a uh so you can customize that local storage key but you can customize the throttle time so the throttle time is set to a second it will only write to local storage at most every second right now uh by default but you can say like if you're really spamming local storage and it's slowing things down you could throttle that to you know five or ten seconds to make sure that it's not happening that often and that would be non-blocking too right like hope hopefully um i'm not sure if local storage writing to local storage is blocking or not well i think it is but i'm pretty sure writing the local storage is blocking that's why i'm wondering if like internally you like like it definitely would be blocking we would have to update the internals to like wait for an idle like wait for like an idle cpu time or something like that yeah um or there's the option to just create a better persister like there's i know a couple people who are currently working uh like we're just gonna basically copy and paste local storage persister and make a session storage persister um yeah somebody speaking somebody's working on an index db1 there's somebody who's already working on one for react native that will work with react natives uh basic like local storage kind of local storagey solution right yep so yeah you can you can create a lot of them and really the interface is really simple if you look at what a persister is um this is what a persister is right here hey how do you build your persister it's just uh you know an object that has these three methods right here so i i love the buster property that's fit yeah that's really important so um that's really exciting i think it's really easy it's really easy to use and i think just having something easy like that we can just drop in and improve the experience from reload to reload is is pretty neat so the let me show you the next one that i'm excited about and then after that we can take more questions and just talk about other stuff yeah um broadcast query client so again i'm not sure about the name for this but it's a utility for broadcasting and syncing the state of your query client between browser tabs or windows with the same origin so if you have an application that has like a lot of um let's do this let's put another local host right here if you have an application that's used across multiple windows uh or you or users have a lot of different tabs right then you'll notice that this doesn't really sync up with the cache over there there's no like we could use this one but if we come over here our cache is totally different and we have to hit those things again when we've technically fetched them already so we come into our broadcast query client and you know what let's we're going to do this with we're going to do this with the persistent local storage we'll broadcast yeah so we're going to we're going to broadcast the persisted create so first we're going to do the local storage for sister and then we're going to spin up the broadcaster by the way i do like i think broadcast is a good name because that's what i would think of for the like multi-tab communication um and that's actually what a lot of the apis are called so let's see cannot resolve experimental well that is probably because we are out of date yarn upgrade react query yeah and i could i this to me seems like i don't know like i imagine for certain apps it is quite common to have multiple for people to have like multiple tabs up like like if you're in an app that's for power users right they might have multiple different instances up of the app at the same time so i could see this probably not for everybody like it's probably uh for your average app it's like a bit of overkill right yeah i had the same thought tj and i think kind of where i landed is the cost of using cash data like it's really great for performance but it can lead to undesirable things and so if there's a way there's got to be a way to prevent it now it has me thinking that maybe we didn't release this yet let me go look really quick um [Music] no it should be released well the show channel is called code it live so we get it totally fine what we're going to do here is uh we're going to go up a level release it live we're going to the next level we're going to link this start it up we're going to go back down into our examples into our basic we're going to link up react query locally are you just pointing straight to the source why not right yeah let's see if one of these works i know i'm dancing around probably making everybody sick uh let's see here we go come on something's already running on it why is something running all right i don't think so you just pick another port just for fun yeah we'll do that okay loaded i think yep our uh our local storage is still working so that's good um so let's see if we click on one of these yeah there we go so you're there um we'll click on this fourth one so then you should be able to go to the other browser and click the fourth one it's it's funny this browser hasn't re-rendered yet on the right so it's not green but as soon as i click the screen it's going to re-render and it'll turn green oh wow so because it's evens it knows that's not just just this example is using just some green highlighting to show you like what's already been cached so there you go so yeah it'll be instantaneous over here yeah can't you read old latin tj that's what ness green yeah i'm clearly i'm a linguistic that's why i'm still looking at persister versus persist or yeah i wonder if we could just like take local storage we'll just clear it and then see we wouldn't be able to like we got to reload these windows both at the same time couldn't even get past like it's it's kind of like that uh super cookie you know it's just like replicating itself everywhere so once you're once all your tabs are talking to each other you can't stop them it's pretty it's pretty sweet i mean we could do this we could come in and just like remove these i guess manually and it's sinking right in front of our face yeah so you can see it only syncs when like it's uh when the data comes in so it's not going to sync loading states you'll see this one is loading over here as soon as it finishes it it syncs over so it it's pretty simple right now it's kind of naive which is totally fine but so look like from the documentation you declare a channel and anything that shares that channel gets the updates yeah um there's uh there's a few options actually no it's just broadcast channel so by default it only works be like when you're on the same uh origin right that's how broadcast channels work uh internally and we're using a we're using a pony filler like a polyfill to go back and make sure that it works across other browsers so it'll use like index cb and local storage if it has to um but then we also it also has this broadcast channel string which if you have like multiple react like if i guess if you have multiple apps running in on the same domain or if you have uh if you're using multiple broadcast channels already in your application you can customize like which channel to broadcast and listen on so probably unnecessary for most people but you know you never know it's good to have actually i think this comments kind of sums up things pretty well from uh banu hopefully i'm pronouncing your name right but uh he says just use use query use mutation refresh query and call myself a react query user time to get back to the documentation it's true like i feel like every time i talk to you i find three or four new things that i didn't know react query did yeah it's it's a full package you know it um as a testament to how like how much it's changed i think even the ecosystem i did i never thought it would do this much but it has i i get calls all the time and messages all the time from like big big companies uh walmart i mentioned aws target apple a lot of big players are using it and then it's it's definitely prolific among just kind of people getting started with react it simplifies so much um you know many many reasons that you had to learn use effect are just gone because you have react query now and especially useful for like small projects and startups where you don't have time to build this massive redux architecture or uh or you know have complete buy-in to apollo or something like that you just need to kind of get things working and make it feel like you have 10 people on your team when there's really only two so i i recommend it too my my wife is a long time angular developer and she's been toying with react and she's been asking me random react questions so she asked me she's like well i've been doing these calls and now i need like this this this and i was like i know the answer right yeah it's true so it's been really fun to work uh it's been especially fun to work with um the people who have uh who have been helping me build it as well uh you know it started out really great really strong but it's it's become very polished and become so much better because um because of the people that have helped me build it uh i'd i should call some of their names out because they really contribute so much um nick bosh is just he's the man uh he's not on twitter he's not you know loud or anything like that and social sphere but this guy is a baller and he knows his stuff and he has basically taught me a lot of what i know about typescript um cherniavsky he's done a lot of great work with it too um tk dodo he doesn't have a ton of contributions but man tk is like my hero every day he takes care basically takes care of the react query discord channel and triages like everything in issues and comments and everything so talk about a fantastic community um there's there's an entire discord dedicated to it should just open up my discord but there's an entire discord dedicated to the tan stack and it's got a lot of fun stuff so here's the react query channel just really fun we've got different sponsor supporter levels for people who want to have more serious conversations you can just ask questions and i don't you probably didn't notice probably didn't notice but i'll show you anyway i even have a course on react query that uh just called react query essentials that uh i'd basically walk you through and show you how to build applications with react query yeah you're sort of anticipating cause i was gonna ask you like links and next steps and such so i'm trying to drop some of these in the the chat so i dropped the the link to the tan stack and if you scroll down there i found the link to the discord is on that page um the link to your courses also on that same page as well i think yeah it is so yep learn right here will take you there as well um yeah also a fun shout out something i worked on recently is like giving sponsors a better home so i got some fun sponsors some people even just use it for advertising because the depending on what you sponsor you get uh you get a bigger bubble and i have a ton of perks too for sponsors where would you build the bubbles with is that they're a framework that builds the bubbles or no i use visx actually it's a bubble packing it's the d3 bubble packing algo from that's pac run it's put into physics and i use that but then i didn't use svg i just use divs because i'm a barbarian i love that there's a d3 bubble pack algorithm that's fantastic yeah so yeah that's cool brandon from blitz js is in there yeah brandon's in there um let's see it's almost like dan's trying to drop like promos for our upcoming shows there's a lot of good people in here is fantastic at the noon position almost and he's got a great bow tie on and like you just can't yeah i can't stay incognito wearing a boat you can see there's brandon right there he so if you didn't know um blitz is he's gonna be talking about blitz next time right yeah well let's use this react query under the hood to power all the the front end queries and synchronization so it's like inception it is it's awesome so yeah anyways that those are kind of my uh i guess those are my shameless plugs come become a sponsor you can get some pretty cool perks i haven't had anybody do this one yet you know but uh i hear that i've got a credit card somewhere let me just actually i did i did have somebody um i have a private sponsor who does this one i i am not allowed to show their name um for legal reasons but they they wanted 10 they wanted 10 licenses to react query essentials uh and i was just like oh you should just become a sponsor and they're like oh sweet i really i really wish i could show their name but i can't would you say that the best place to get started is the course uh yeah the course is pretty great honestly the um not that i mean obviously i want people to buy my course right but uh honestly 70 of the course is in the docs at least to some extent so if you were just to go through all these guides and concepts and really study them you would get you'd get a really good start going through the guides and concepts right here so i i would do that first it it really just depends on the style of learning that you like if you just want to read then just go through the guides and concepts if you want to hear me explain things and talk through it and see me code from the ground up and and uh you know use react query to build stuff then you probably would enjoy the course more so you know i grew up in the non-youtube era for technology and so i learned how to code reading books there used to be these things called books i don't know if you remember those but they're like massive things and documentation but you know it turns out i i prefer it when someone walks me through it preferably if i can watch them do it i will learn much faster and i'm much happier as and especially if i can you know put the playback speed at like 1.5 yeah some people talk like normal humans and i need them to talk like this because i want to hear information really fast but for me if i'm going to pick up react query i'd much rather drop the dime on the course and kind of get going and be productive and you know chip around even you know the docs are hilariously written i really love the ethos and spirit through there it's yeah i kind of wrote it like a story like a book but it's nice you did a very good job tanner uh i took inspiration too from like um egghead and a lot of stuff that kent does i can't see dawes does for his courses but like i pride myself in the fact that the course is only three hours long uh like i don't like to waste time it takes a long time to record stuff i made sure that it was like as succinct as possible i was like there's a couple good one-liners in the docks that i found like i noticed your your upgrade guide for v3 you start by saying previous versions of react query were awesome but like along with that like some other things and it's just like little things that breaks you out of like this you use the documentation being like sterile right you just bring some i like to be entertaining and i i used to do a lot of like i like creative writing too and storytelling and stuff so i try and write my documentation that's like all right i'm gonna keep you on your toes here you know the internet thanks you for it sir oh that's that's nice speaking of nice there's another question oh yeah we can get that is there a better way to cache data uh is there a way to cache data coming from querying a database yeah react query query yeah you can you can fetch it however you want axios fetch uh grpc i don't care but yeah just fetch it however you want stick it in react query and you will be happy your users will thank you that's that's another reason why i like react query not only does it improve developer experience which is usually the number one focus of libraries like this but it also directly affects the user experience as well users i've had comments from from big companies in fact i think i can say this but i think it was walmart no maybe it wasn't walmart a company like them that only they refactored everything to use react query and it's just so much faster it just feels faster and better oh another good question somebody says is the same is it the same as swr react swr and react query are very similar we actually released around the same time swr is a little more lightweight uh both in size so it's like a half size but we're only talking like four kilobytes of difference here um but it's got a lot less features it doesn't have uh it doesn't have anything near the api that react does react query does for invalidation it doesn't even have mutations um it doesn't do a lot of things that react query does so cool well tanner is there anything that we haven't mentioned any last plugs this has been a lot of fun always great talking to you no not really uh what i'm working on right now is the next version of react table and it's a head scratcher i'm i'm writing it all in typescript yeah oh boy it's got a plugin system too typed plugin systems if maybe you've heard me tweeting about it a little bit but man when you have this when you have this done reach out we'll have to have you on um i know we've talked before about we need to have like a just a grid slash table uh just almost hang out if i'm lucky at the end of the day kendo ui is going to be using it under the hood so yeah there we go you know you happen to know some people there yeah oh really no i think we're good it's been fun being on here thanks for having me you guys yeah well cool dan do you want to end with a plug of your own yeah let's plug the newsletter again because that's how i found out about tanner in the very very first place all of our developers submit the articles and so they're developer approved and i'll plug one last time the react wednesdays home page check it out upcoming episodes like you mentioned get brandon from blitz next week that'll be a fun time i'm looking forward to seeing that demoed uh react in teams microsoft teams after that so that should be fun but thanks one last time tanner thanks everybody for joining us again we do this every week so uh check it out until next week see everybody bye

Channel: Kendo UI

Views: 2,505

Rating: 4.9285712 out of 5

Keywords: React Programming Techniques, kendoreact, react, recajs, JavaScript, Data management, database, TJ VanToll, Dan Wilson, React Wednesdays, React Wednesday, CodeItLive, UI Components, UI Controls, React UI, react programming, using react, react js, kendo react, react query, react query 3, state management in react js, react library, tanner linsley, how to use react query

Id: b4C8hEd1pjc

Length: 71min 23sec (4283 seconds)

Published: Thu Feb 25 2021