react-query

Question 1

difference between staleTime and cacheTime

Answer 1

staleTime tell for how long the refetching be avoided. (default = 0ms)
cacheTime tells, for how long isLoading should be set to false (to give optimistic updates) (default = 5 mins)

Question 2

booleans to indicate api call in progress

Answer 2

isLoading: when there is no cache and api fetching
isFetching: when there is cache, api is fetching

Question 3

refetchBooleans

Answer 3

refetchOnMount: (default is true)
refetchOnWindowFocus : (default is true)

Question 4

stock market polling

Answer 4

we can poll data at regular intervals using two option keys
refetchInterval, refetchIntervalInBackground

refetchInterval: default value is false, we can set it to ms, and api will be called every set ms

refetchIntervalInBackground: if the window looses focus the polling stops, we can keep the polling on, if by using this key.
default value is false, we can set, it to ms.

Question 5

Fetch API on user event

Answer 5

2 step process
1. set option enabled:false
2. call refetch on user event.

Question 6

callbacks

Answer 6

there is onSuccess callback which gets data
there is onError callback which gets error object

Question 7

data transformation

Answer 7

we can use select option which accepts a selector fn.
selector fn will get data as input argument

Question 8

if you need list and detail page

Answer 8

then you need to use React-Router
useParam to get id from url.
use that id as key in useQuery
this key is available on key = “queryKey” in caller fn.

Question 9

need for useQueries hook

Answer 9

if the number of useQuery are changing from render to render, it violates rules of hook.
there fore we have useQueries hook, so that we can execute dynamic number of queries

Question 10

implementing pagination

Answer 10

we can use key = keepPreviousData : true
so that we do not see loading indicator

also don’t forget to use, pageParam, setPageParam

Question 11

infinite query

Answer 11

1. useInfiniteQuery instead of useQuery
2. hasNextPage
3. fetchNextPage

instead of data.data, you will get data.pages

Question 12

how to save a get request after mutation

Answer 12

by setting the data returned from mutation into the queryClient.setQueryData

Question 13

optimistic update uses three keys

Answer 13

onMutate
onError,
onSettled