An Exciting Update for React Query!

React Query has made a super interesting change in their most recent release. You can now stream in data as it's fetched into your UI. That makes for a great UX. Currently, this is experimental - very curious to see how a final version might look. What are your thoughts?
-- my links
Discord: / discord
My GitHub: github.com/joschan21
-- experiment with this change for yourself
tanstack.com/query/v5/docs/re...

[@x1z53]

React Query is the most useful library that relieves a huge amount of pain

[@TheDeprecatedLibrarian]

Can you elaborate pls?

[@OryginTech]

Idk, I’m not a fan of writing an axios or fetch req inside every single hook. I like the RTK Querying pattern much more.

[@gradientO]

Absolutely! Code looks so much cleaner with it (with added bonuses like tracking query status and infinite queries)

[@sinkie420]

​@@OryginTechif you're using next I just found out a few days ago that server actions are fully usable on the client now too. I have replace api routes with server actions entirely and use them both on server and on client with react query

[@syed.simanta820]

Did u ever use React query with Zustand?

[@TkDodo]

Thanks for the video 👍. One remark regarding the last graphic: The fetches are not initiated on the client. What happens is that the Query is executed during the SSR pass of the client component (yes, client components are server rendered as well. Confusing, I know), so the fetches happen _on the server_. Then, the results are streamed to the client, where they are put into the QueryCache, just as if you'd manually dehydrated them in the "old getServerSideProps".

[@joshtriedcoding]

I thought about this a lot. This makes perfect sense. I was really confused as to why the fetches still show up in the network tab, though? Thanks for explaining! (edit) Exactly! So this was precisely what I thought happened. I even draw a complete diagram for this process but got really thrown off by the query still showing up in the network tab.

[@ayushjain7023]

So, in short with this new experimental package, you do not need to manually handle hydration or pass the initial data as a prop from a server component to a client component. When the initial request is made, the data will be fetched on the server, which means the API request from the useQuery hook is first initialized on the server to fetch the data. Once the data is ready, it will be automatically made available in the QueryClient on the client.

[@mathiasriissorensen6994]

Okay, so you are saying the prefetch and HydrationBoundries are no longer needed?

[@lucasfranzolin]

I can tell I am already a big fan of you!! Thanks again for the updates

[@helleye311]

Amazing! I was hoping to see some nicer react query API for SSR and server components in general, seems like this will be it. Just need to wait for it to stabilize and I'll be happy to move to app router for my projects.

[@joshtriedcoding]

Same, this is a really nice step in adopting the app router

[@tunaralyarzada]

That was great update Josh! But, i would like to ask you kinda different question. Do you know the example website with src code that has flexible and maintanable configuration for best reusable ui components of MUI library in react app?

[@GabrielMartinez-ez9ue]

Hi josh. Is it possible for you to make a video tutorial of the prefered way of using nextjs 13 server components with react query? How would you do it?

[@perrythepalteypus2185]

Not Many tutorials on react query please make a full tutorial it would be helpful 😊

[@mohithguptakorangi1766]

that was complex as someone who has not user react-query, can there be a tut on this part but as a longer video?

[@ankushagarwal7378]

Hey bro love your videos every time I learn something new on your channel but can you tell me what gzipped next to your code when you import something and how I do it too ?

[@joshtriedcoding]

it's called import cost, it's a VSCode extension

[@swdotdev]

Is there a reason why you return an array instead of an object from useWaitQuery?

[@marknovak1430]

Random question. Does anyone know which VS theme Josh uses? Thanks!

[@ilyazinkevych7804]

I didn't get what is streamed here and the difference between previous "no suspense: true"? didn't you just use suspense and showing fallback loaders while response delayed as usual...

[@ilijanl]

Me neither lol

[@yozhis1]

guy totally missed the whole point of this new feature. just showing loader like with isLoading or isFetching.

[@julianklumpers]

It also worth mentioning: BlitzJS. i believe they also use react-query under the hood and it also supports suspense.

[@emee__]

Bro the way you say Beautiful, or Intuitive hypes me up 🚀🚀🚀

[@joshtriedcoding]

hahaha cheers man

[@saralightbourne]

could anyone advise how to trigger loading.tsx when url query parameters change? when i useRouter and change url query parameters, it does run page.tsx and gets new data from it but loading.tsx isn't shown so the page is just stuck for some time. loading.tsx is shown only when the page is initially opened. with next.js pages, i could use shallow: true and handle all that logic on the client side with initial data passed as props but with app router i have no idea how to solve this pretty common case

[@nwaformicah433]

Thanks big man, can you make a full tutorial on react query that covers infinite scroll?

[@animegeek-011]

What's the difference between this method and fetchStatus or isLoading state for loading spinner ?

[@hernan4485]

It's affect mostly next and ssr. On a client you would use this to render one component or another. With Suspense you can just have a loading fallback and anytime any component from below is fetching and using that suspense will be triggered. Just another way to make easier fetching instead of having in all the components that you fetch the same if (isLoading) if (isError) etc logic. Can be wrong tho

[@RegalWK]

In React, both useEffect and Suspense can be used for data fetching, but they have quite different ways of handling it. useEffect is more imperative, whereas Suspense is more declarative. useEffect is a Hook in React that lets you perform side effects in function components. A common use case for useEffect is to fetch data when a component mounts. Suspense is a more declarative way to handle data fetching in React. Suspense allows you to specify a loading state while waiting for some asynchronous operation to finish, like data fetching. To use Suspense for data fetching, you would generally use it in combination with React's concurrent mode and a data fetching library that integrates with Suspense

[@mamunahmed8113]

How may I fetch on server side by react query?

[@buddy.abc123]

"in the past...you would use a suspense component" Dude that's the present 😅

[@joshtriedcoding]

well fair point

[@buddy.abc123]

@@joshtriedcoding time flies in the js ecosystem

[@jmula1963]

how is this better than suspense

[@michakrecisz5100]

How streams affect SEO, both RQ and RSC... also how that affect servers in terms of performance.

[@rockNbrain]

Tan is a real rockstar!

[@Rasty_Boss]

Great news, can it be in production already?)

[@joshtriedcoding]

it's just experimental, wouldn't do that

[@alvinscheibe]

Awesome! 👏👏👏

[@dexteralanbalderama3746]

why cant i call a use query inside a function??

[@aBradAbroad]

Amazing

[@umargulzar2982]

You are Guru of react.😅😅

[@Tommy-x-Ray]

I don't see the difference between this and just using 'isLoading' and then conditional rendering ... ??

[@faridguzman91]

TanStack is king

[@anhdunghisinh]

will this help trpc, too?

[@lukemoralesTV]

This was actually made by the tRPC maintainers

[@mohitcodeswell]

Heyyy josh! No giveaway this time ? LOL 😂

[@joshtriedcoding]

It's weird the spam filters catch on to those telegram scam comments and automatically delete them, yet still allow them to be posted

[@Tommy-x-Ray]

lmao

[@NatnaelAbebe-og8bt]

if start coding, web development or full stack dev today is it an opportunity to get a job remotely

[@notkamui9749]

meanwhile Nuxt: useLazyFetch

[@riolly]

I don't get it honestly

[@puopg]

All this stuff has already been done in react-relay for years now lol

[@lapulapucityrider3227]

This already exist way before

[@joshtriedcoding]

nope, just got released a couple days ago in a 5.0 experimental alpha version

[@lapulapucityrider3227]

@@joshtriedcoding you are right the react query next but suspense true config already exist way before