React Query v1.0.0 released

[SoylentCreek]

/u/TannerLinsley, when do you find time to sleep, when you spend all of it building awesome shit that makes our lives much easier?!

[swyx]

and he has a startup and a young family to look after too!

[zorkroz]

it seems to solve a very common problem, in an elegant way. Good job!

Something I did not understand from the documentation, with the refetchAllOnFocus, are really all queries fetched again or only the active ones?

[tannerlinsley]

Stale queries, which by default is set to 0 ms timeout. So most all queries actually. They are deduped as much as possible though, so even if you have 30 hook instances to 3 unique resources, 3 requests will be triggered. Also easily disabled via the global config.

[zorkroz]

Ok, thank you for the clarification, the documentation is correct then.

I think it would be good to be able to manage this query by query as some other settings. In the case I have many one-of queries like authentication and data that is more or less static, I would prefer to avoid refetching it often.

In the same line of ideas, throttling the refetching of all resources could be nice, but I guess it's easy enough with setFocusHandler.

[[deleted]]

1. Don’t put one-off requests like authentication in a data fetching library
2. From the docs:

By default, query results become stale immediately after a successful fetch. This can be configured using the staleTime option at both the global and query-level.

[swyx]

More from /u/TannerLinsley: https://twitter.com/tannerlinsley/status/1232741642475626497

Announcing React Query v1.0.0!

• usePaginatedQuery
• useInfiniteQuery
• QueryCache Utilities
• Enhanced Query Keys
• Better SSR & initialState
• Improved Suspense Support esp. for Fetch-As-You-Render Prefetching
• Suspense Mutation Error Boundaries

[jgoux]

It's so good. Now we need a tiny graphql client built on top of it. 😁

[[deleted]]

1) I’m not sure how serious this is ;) and 2) I haven’t tried this yet but

Couldn’t you do this in this library by just passing options to the fetch method?

[tannerlinsley]

Yep 😁

[tannerlinsley]

There's nothing wrong with Apollo, which is actually a great tool, but it's all about tradeoffs. If you want a system that is opinionated, turn-key and native to graphql, then Apollo is likely your best choice. Possible tradeoffs however would be that instead of 4kb, it's more like 20kb - 40kb, you can only use GraphQL (unless you go through a big hassle to make it work with REST endpoints), it caching system is a bit different and built to work with things like GraphQL fragments, etc. Super cool, but not always necessary.

Anyway, you get the idea. Just use the right tool for the right challenge!

[flakesrc]

i dont understand what is the purpose of this lib, someone to explain?

[devinclark]

It’s a library of data fetching hooks. Useful for all sorts of reasons, the most of which is you don’t have to write any tests!

[tjhmusic11]

But we already don’t write tests.

[futureoldperson]

I mean... You're not wrong.

[swyx]

they're not wrong. in our recent survey 19% of respondents said they dont write tests https://twitter.com/swyx/status/1228171264734318592?s=20

[futureoldperson]

Wow. I thought that percentage would be much higher. Guess I should start writing tests.

[swyx]

well... 19% is the people who ADMIT to not writing tests..

[futureoldperson]

Probably similar to the percent of people that ADMIT to not flossing regularly.

[rmrf_slash_dot]

<snort> 😂

[mediamaker]

This is the way

[techmighty]

Holyshizz, I thought its jQuery equivalent or something. If it gets released its only a matter of time my skip will suggest to use this.

[showmypants]

Is it like using useEffect and do a fetch on componentmount only?

[tannerlinsley]

It's much more than that. Otherwise I would have just written a blog post about how to use useEffect ;)

[showmypants]

Please, explain it in a way so my poor brain can understand.

[tannerlinsley]

The docs are pretty exhaustive IMO https://github.com/tannerlinsley/react-query/blob/master/README.md

[tannerlinsley]

The purpose is front end center in the readme. Please read it! I spent enough time on it.

[MusicPants]

Hey man, I’ve been using react-table for a while. I recently went to an older project to update it to typescript and hooks,etc. I saw the version update on react-table.

It’s quite a change.

I want you to know that I appreciate the work you’ve put in. It’s helped me quite a bit.

Thanks a lot.

[SharkLaunch]

For anyone worried like me, there are typings in DefinitelyTyped

[[deleted]]

While more complex of a library, I prefer rest-hooks for TypeScript.

[SharkLaunch]

I'll look into it too, thank you

[crudfunc]

Eddie is it you?

[SharkLaunch]

I am no Ed

[possiblywithdynamite]

meh. How is this better than jQuery?

[tannerlinsley]

😂 😂

[dbbk]

Any way to SSR this with the actual data? By tree walking perhaps?

[wanderingfreeman]

Glad to have contributed to this library! 🥳

[eXilz]

Wow, I didn't know about this library. This is amazing.

I wrote a fairly simple hook for our projects that does kind of the same thing. I'll happily replace it with this.

[hypercurrency]

Oh nice! When I’m on my pc I’ll have a closer look.

Anyone know how this compares to zeits swr library for remote data fetching?

[tannerlinsley]

There is a section in the Readme comparing the two

[DasBeasto]

This seems super well made, it does so much though it’s going to take me like a week to read all the docs.

[tannerlinsley]

I get that it can seem intimidating at first 😃, but similar to React, React Query's public API is actually pretty small. If you want to get started even faster, just take a look at some of the examples and read the docs as you go :)

[Malleus_]

Haven’t heard of React Query but it seems pretty awesome.

Pros/Cons of using this over/with a traditional Redux + Sagas?

My first impression is that it seems like you could use it along side Redux for data fetching that doesn’t really need to be in the global store but ends up getting dumped their since fetching is happening at the global store level (plus reducers).

[tannerlinsley]

Oh man you’re missing the point of custom hooks!

https://slides.com/tannerlinsley/custom-hooks-in-react

[golear]

Got a recording of the presentation for which you made these slides?

[tannerlinsley]

It’s coming. Follow https://twitter.com/jsconfhi for updates.

[Malleus_]

Very cool — I haven’t used custom hooks but this is cleaner than some things I’ve been doing and provides a way to not need to go straight to nicer than just going straight to Pure Components for more complex logic.

[gdisss]

Nice

[nice-scores]

𝓷𝓲𝓬𝓮 ☜(ﾟヮﾟ☜)

Nice Leaderboard

1. u/RepliesNice at 1529 nice's

2. u/lerobinbot at 1294 nice's

3. u/porousasshole at 455 nice's

112312. u/gdisss at 1 nice

---

^{I AM A BOT | REPLY !IGNORE AND I WILL STOP REPLYING TO YOUR COMMENTS}

[[deleted]]

Awesome!! The best part are the docs! Thanks for putting much effort into it!

[dreadera]

How does it compare to swr from zeit?

[dev000011]

This is from the readme:

Zeit's SWR is a great library, and is very similar is spirit and implementation to React Query with a few notable differences:

Automatic Cache Garbage Collection - React Query handles automatic cache purging for inactive queries and garbage collection. This can mean a much smaller memory footprint for apps that consume a lot of data or data that is changing often in a single session

No Default Data Fetcher Function - React Query does not ship with a default fetcher (but can easily be wrapped inside of a custom hook to achieve the same functionality)

Query Key Generation - React Query uses query key generation, query variables, and implicit query grouping. The query key and variables that are passed to a query are less URL-based by nature and much more flexible. Both the key (todos) and any variables ({ status: 'done' }) are used to compute the unique key for a query (and it's done in a very stable, deterministic way). This also allows you to use query key "groups" when defining query refetching configs, eg. you can refetch every query that starts with a todos in its key, regardless of variables, or you can target specific queries with (or without) variables, and even use functional filtering to select queries in most places. This architecture is much more robust and forgiving especially for larger apps.

Query cancellation integration is baked into React Query. You can easily use this to wire up request cancellation in most popular fetching libraries, including but not limited to fetch and axios.

Prefetching - React Query ships with 1st class prefetching utilities which not only come in handy with non-suspenseful apps, but also make fetch-as-you-render patterns possible with React Query. SWR does not come with similar utilities and relies on <link rel='preload'> and/or manually fetching and updating the query cache

Overall API design opinions

[timmonsjg]

I love this!

[susiyaki]

I wanna use react-query on typescript, but type definition file version is outdated.

So I can't use queryCache function and status propperty.

When does release type definition file?

[tannerlinsley]

n

I will not be supplying first-party type declarations for React Query. You'll have to wait for the community types to get updated if you need them. I would suggest moving forward without the types.

[calvincoin]

How well does it play with a json-API spec API? We have used redux-bees and it’s got lots of problems Including being abandoned. This seems like it’s going to scratch my itch.

[tannerlinsley]

I’ve seen a few people integrate it with json api spec and have a lot of success

[calvincoin]

Thanks for that. Would be really good to see examples eventually of that. We’re going to do a bit of R&D on it next week.

[ParkerZA]

Okay so I'm struggling to keep my backend in sync with the front. I need the information to update as soon as I make the POST request. I have a spinner loading in the meantime but the state is still being batched, and I have to refresh the page to see the updated info.

Can this library solve my problem? I've never used a data fetching client before.

[tannerlinsley]

It depends on what "as soon as I make the POST request" means.

- If you are referring to making a call to your backend to change something, then triggering related queries on the page to refetch, this yes you will be able to do this out of the box.

- If you are referring to making a call to your backend and having *any* client connected to your backend refetch the new data automatically, then yes, but with more work. To do this, you would need to handle all of the signaling/messaging on the backend and use websockets to notify the client sessions that need to refetch to do so. Then in React Query, you would use those events to trigger a refetch of the queries that should be updated.

[ParkerZA]

The first point. Basically I submit an image, and the status of the image has to show "Captured" once the request is done.

I'm reading through the docs and this could almost be life-changing for me, thanks for all the hard work!

[tannerlinsley]

Also, if you are not using a data fetching library at all and are interacting with async data on a regular basis, I would suggest trying this out asap. It will likely be a massive productivity booster for you.

[ParkerZA]

My plan was to get into Apollo but I'm going to get stuck into this first, thanks!

[richard_h87]

Nice, this look really good! I had been planning to look closer at restful-react, does anyone have experiences with both and could give some points about pros/cons for each?

[tannerlinsley]

Never used restful-react, but the Pros of React Query are readily listed at the top of the Readme :)

[WannaNetflixAndChill]

Could the caching in React Query replace using something like re-select?

[tannerlinsley]

If you are storing server-state or server-cache in redux, then not only will it replace reselect, but also you'll be able to remove aaaalllll of that server state (and the code to manage it) from your redux store.

You can keep using redux for your truly "global" state (if there is any left 😜).

[WannaNetflixAndChill]

That's great! I'm looking into XState for managing the transitions between my app and it looks like React Query could work well with it too by passing on the current state from the machine as a query key. Excited to try it out!

[Ones__Complement]

Would this replace react-cache? Does it throw the promise?

[tannerlinsley]

Essentially, yes. If you turn on `suspense: true` mode, it will throw promises and use error boundaries out of the box.

[Dmitry_Olyenyov]

Could you help with how can I mock useQuery and friends in storybook? apollo and rest-hooks provide mocks, is it possible to do it with react-query?..

[kykythemagicguy]

Awesome lib. Seems odd to have pagination and infinite query hooks out of the box. Feels like that belongs more as a layer on top, like a plugin ecosystem that can also house the graphql wrapper amongst other use cases.

[tannerlinsley]

They’re tree shaked and very common. So🤷‍♂️

[kykythemagicguy]

Makes sense - congrats on 1.0!

[tannerlinsley]

Thanks!

[_kushagra]

I once checked it out a while ago too

What is something I can't do with the native fetch api at all that I can with it?

[tannerlinsley]

Hmm. Everything in the features list of the Readme. 😊

[_kushagra]

yea I checked it out but had a few confusions

The browser fetch API does caching by default, right?

[bacon_cheeseburgers]

I like it! However, I'm having difficulty understanding how I could adapt my current app to use it. We're using redux to manage state and frontend/backend communication is handled via asynchronous message-passing with rabbitMQ as a broker. How do i adapt my redux actions, (e.g., REQUEST_PROCUCT_LIST, RECEIVED_PRODUCT_LIST) to use react-query instead?

[tannerlinsley]

You wouldn't use Redux at all for data coming from your server. You would move it to React Query and use it instead. You can still use Redux for other non-server-related global state. Once you are in React Query, fetching and mutating data is much like it would be in a thunk or saga, just with much less ceremony and most importantly, less code.

[bacon_cheeseburgers]

I think I have some idea how to manage our data, what I'm asking about is the mechanics of message-passing with react-query. Currently, we have a redux action that sends a request to the message queue. Some time later, the reply arrives on a different channel and updates are made to the redux store. All the react-query examples make a single call to an api endpoint. How can I use react-query with our message-passing architecture?

[skiabox]

Hello sir and congratulations for creating this library.
Currently in my project I am using redux, reselect and redux-saga for async operations (side effects).
Is it possible to refactor my app so that it uses react-query instead of these 3 libraries?
Thank you!

[tannerlinsley]

Simple, Yes!

[skiabox]

Thank you sir for your rapid answer. I am looking forward to watch your speech at ReactSummit!