Comparison to tannerlinsley/react-query

[denis-sokolov]

Could you help compare zeit/swr and react-query? Both projects seem very similar, and the design decisions seem to overlap in many ways. It’s not obvious how to choose one over another. If you have any guidance, it would be very appreciated!

[shuding]

First of all, both libraries are aiming at the very similar target. In most use cases I believe you can choose either you like.

But here are some points that I think are making a difference between these two libs:

1. ZEIT has been using SWR on production for a long time, and will keep maintaining and improving it. The concepts of "stale-while-revalidate data fetching with hooks", focus-revalidating, dependent query etc. first came out internally at ZEIT, for improve our dashboard performance. And this lib (SWR) is being tested on production (https://zeit.co) for over 6 months, before it's open sourced (our first internal commit was on May 10th, 2019). It works really well for us, that's why we want to share this concept with the community.

2. SWR is heavily test-driven. It has ~1k lines of tests, covering almost all the scenarios (more than react-query).

3. SWR will not be scoped by "query". In fact, the concept of stale-whlie-revalidate values works well for local state, offline storage, and many other things too. In RFC [RFC] Plugin / middleware #172 we're trying to make SWR more customizable in the future.

4. SWR is lighter (2.9kB vs 3.8kB) and will keep simplicity and performance as its first goal.

5. SWR supports some other scenarios like SSR or static exporting, and we're still exploring more state of the art features such as concurrent mode, paralleled suspense ([RFC] useSWRSuspense (or Suspense guards) #168) and more. Stay tuned!

[denis-sokolov]

Thank you very much for your effort in replying, this helps a lot! Hopefully it helps other make decisions for their projects, too.

[rauchg]

Another thing to add is that Tanner is a close friend of our community and we exchanged lots of ideas when he started tweeting about react-query (since we were working on SWR internally).

Ultimately both libraries are great; choose the one who resonates the most with your use-cases and needs!

[tannerlinsley]

Another thing to add is that Tanner is a close friend of our community and we exchanged lots of ideas when he started tweeting about react-query (since we were working on SWR internally).

Ultimately both libraries are great; choose the one who resonates the most with your use-cases and needs!

🤝 Indeed! Both have their strong-suits and minor differences in API and affordance. Using either one of them of them will get you 10x further than using neither. 😄

[lishine]

Though I am greatfull for both libraries, one important difference.
SWR built with typescript.
React-query have only Definitely-typed types, moreover they are out of sync currently. And there is no intention to integrate typescript.

[lishine]

There is one more prominent lib in the same fashion
https://github.com/contiamo/restful-react
It is unique in converting open-api scheme to client typescript.

[tannerlinsley]

I would love to see a library that does that but uses SWR under the hood. Now that's exciting!

[sergiodxa]

@tannerlinsley I'm working on one similar, following the JSON:API spec and uses SWR under the hood, I have been using it for almost half a year now in production, I want to make it public soon.

[tannerlinsley]

@sergiodxa How interoperable do you think it would be with React Query?

[sergiodxa]

I think it will be easy to fork and replace SWR with React Query, there are two parts directly tied to SWR, the custom hooks to do data fetching (they use useSWR) and the methods to run CRUD operations against the API (they use mutate), if you replace them with React Query methods you could keep my lib API intact.

[tannerlinsley]

It would be cool to invert control of those interfaces to the user, then give examples on how to hook it up to both.

[iquabius]

LogRocket has a blog post about similarities and differences: Caching clash: useSWR() vs. react-query

[tannerlinsley]

The log rocket article is out of date (two versions now), and even the first was pretty shallow. I don’t think I’ll be referencing it any time soon. Instead, I’ve added my own comparison page in the docs.