What is React Query? Why is it important? Can it really replace your state management library, e.g. Redux?

1. @nikoskleidis
Frontend developer @Logicea
INTRODUCTION TO REACT-QUERY
A REDUX ALTERNATIVE?
Nikos Kleidis

2. React-Query
"Hooks for fetching, caching and updating asynchronous data in React"
SAVE DATA OF A FETCH CALL
In a memory cache. They stay there for 5 minutes
by default and then the queries are removed
READ AND REFETCH
Get existing data right away and perform
background fetch to get the latest.
MUTATE THE CACHE CONTENTS
At any time you can change the contents of the cache by
adding, removing or updating the cache

3. Background
Started by Tanner Linsley on Sep 2019
Version 1.0 released recently. Actively maintained
Types are created by the community. @types/react-query
Great documentation on github!
Lightweight. Depends only on React

4. Key
features
queryCache
The cache instance object that can we used
to interfere with the cache
useMutation
Hook used for mutation requests (POST, PUT,
DELETE)
useQuery
Hook used for GET requests.

5. useQuery
Basic example

6. useQuery
Basic example

7. fetchTodoList must return a Promise
useQuery
Basic example

8. useQuery
Pass Parameters

9. useQuery
Pass Parameters

10. useQuery
Pass Parameters
['todo', todoId] is the
key that data is stored
under in the cache
if todoId changes
useQuery will execute
again for the new value

11. As long as the query
key is falsy, the
request won't be
triggered.
useQuery
Dependent Queries

12. useMutation
THE TRUE POWER OF REACT-QUERY!

13. createTodo must return a Promise
useMutation
Basic example

14. useMutation
Refetch cache
On success the following queries will be refetched:

15. Extra features
GARBAGE
COLLECTION
When cacheTime ends
data is removed from
the cache
SUSPENSE READY
Suspense for data fetching
can be enabled globally
BACKEND AGNOSTIC
REST, GraphQL and basically
anything that returns a promise.
POLLING
MECHANISM
Refetch interval can be
set in query options
Batteries included

16. Extra features
Batteries included
QUERY
CANCELLATION
easy to implement with
axios and fetch
PREFETCING
DATA
fetch data before actually
needing them
INFINITE SCROLLING
useInfiniteQuery hook exposed
by the API
SERVER SIDE
RENDERING
initialData can be set in
useQuery's options

17. one more thing...

19. Logicea showcase
Our story with react-query...

20. OUR PROJECT WAS
A large BO system
actively developed for 2+ year as a
monorepo
CRUD and analytics
a lot of forms and tables as well as
graphs and diagrams
Well tested
most of the features were ready.
Recently refactored to hooks
Redux based
redux sagas, actions. Very limited
context usage

21. Technical manager walks in...
"What if we replaced redux with
this new library I found?"

22. We were excited!
"!@#$%^"

23. BUT ALL OF OUR
STATE IS IN REDUX!
"Do we really reuse this state across our
app or is it just server state that we
display and mutate?"
Time to defend his
proposal...

24. ui state
server state
"Ok, we clearly have a winner here..."
Redux

25. THIS SOUNDS LIKE A
MASSIVE REFACTOR...
MANY FAILURE POINTS!
"Let's take it a step at time. Redux and
react-query can co-exist"
Time to defend his
proposal...

26. WE HAVE BEEN USING
REDUX IN ALMOST
EVERY PROJECT FOR
YEARS
"Yes but you have to admit that there is a
lot of boilerplate along with it..."
Time to defend his
proposal...

28. Meet the
Team
AGGELOS KARALIAS
@mehieltwit
APOSTOLIS MPOSTANIS
@ApostolisMp
ARISTOS MANOLARAKIS
@a_manolar
GIORGOS DAGALAKIS
@gdagalakis
NIKOS KLEIDIS
@nikoskleidis

29. The journey begins...

30. Redux
Results appeared instantly for warmed up cache
Benefits
App became more snappy

31. Redux boilerplate removed
Code more readable to a new developer
Phew!!!
Action names (names.ts)
Action creators (actions/reports.ts)
Dispatch action and state selection in
component (Reports.tsx)
Redux Saga action listen, api call, data dispatch
(sagas/reports.ts)
Reducer (reducers/reports.ts)
Benefits
Improved DX
useQuery invocation (Reports.tsx)
API call (api/reports.ts)

32. Benefits
Less Lines Of Code
Reduced our bundlesize.
-30%
-22%
-29%
-45%
-63%
for the same functionality

33. What
happened
to the
Redux ui
state?
Migrated into
React Context

34. 4 months later...
since the first refactor commit

35. Thank you Redux!

36. To Redux
or not
to Redux?
"That is the React Query!"
That is the question.
"That is the query"

37. THANKS TO THOSE
WHO STAYED AWAKE!
ANY QUERIES?