react-query version 3 Flashcards
What kind of state does react-query manage
Server state
What is client state
Information relevant to a browser/front-end application session
Examples of client state
Chosen theme or language
What is server state
Data stored remotely in database
Example of server state
List of blog posts or any other such data
Where does react-query fit in
It has a cache of server state data, and does a request for new data when required, by using fetch/axios or any other method of fetching server data.
What is the source of truth for react-query
It’s cache
When wil react-query fetch data again?
Depends on how it’s been configured declaritively, via the queryclient, or when a key is invalidated imperatively.
Example of react-query cache
{
key:’blogs’,
data:{}
}
Name react-query core features
1) loading/error states
2) pagination/infinite scroll
3) Prefetching
4) Mutations and Queries
5) De-duplication of requests
6) Retry on error
7) Callbacks
8) Browser devtools
9) caching of data
What are the key react-query items that must be set up?
The provider and the query client
What is the difference between isLoading and isFetching
isLoading - When true, indicates that the query is loading when it has no cached data.
isFetching - When true, indicates that the query is currently fetching, but might have data from an earlier request.
What is staleTime
How long data can be out of date for before a refetch may be executed.
What is default staleTime
0ms
What is cacheTime
The amount of time that the data may be cached by react-query, after the most recent useQuery for this key.
What is the default cacheTime?
5 minutes
What is garbage collection?
How the cached data for a given key is deleted after cacheTime is exceeded.
How is cached data used by react query?
It is backup data that can be rendered while a new fetch is running.
Does react-query retry by default
yes
How many retries does react query do by default
3
How are the amount of react-query retries configurable
Yes, in useQuery() or useMuation() as well as in the queryClient (global)
When is the react-query devtools available
When process.env.NODE_ENV !== ‘production’ and it’s been imported and instantiated in the app
When is data refetched by react-query
When data is stale (past staletime for specific query key) and a trigger occurs for that key. Also when no cache for the query key, if cacheTime is past:
1) component remounts
2) window refocusses
3) running of fetch function - returned from useQuery
4) automated refetch at specified interval
5) query invalidation after mutation - makes cache stale for this key
How to fetch dynamic data based on id
The query key should be an array, the second index being the dynamic data, example id.
Why would you use an array as a query key
This will create keys for
[‘blog’,1] and [‘blog’,2] independently in the cache for example.
