React-query 시리즈 4부: useQueryClient 후크를 사용하여 캐시와 상호 작용합니다.

If you have been following this series since , you may have running through your mind these questions; I have learned how to set up this library, fetch data, but how does react-query reduce or eliminate my dependence on global store library like redux? How do I get data from a query instance in the Foo.js component to the Bar.js component without using a global store or by passing props around? What if I'd like to refetch a query initially called somewhere in my app-how do I get this cache to work for me? These are the questions I intend to answer in this part of the series. We are going to see how to interact with the cache from anywhere in our application. Some of the actions we can perform on the cache include but are not limited to prefetching a query, getting the current state of a query(ries), getting query data, setting a new query default, etc.

The useQueryClient hook (to not be confused with the useQuery hook or QueryClient ) is our entry point to interacting with our query cache. The useQueryClient hook returns the instance of the current QueryClient of our application. We import useQueryClient from react-query thus

import { useQueryClient } from 'react-query'

 const queryClient = useQueryClient()

queryClient in the snippet above provides us a couple of methods to interact with the cache. We destructure some of these methods inline thus

import { useQueryClient } from 'react-query'

 const {
    prefetchQuery,
    fetchQuery,
    getQueryData,
    refetchQueries,
    getQueryState,
    setQueryDefaults,
    clear,
  } = useQueryClient();

Do you need to fetch data in some part application before the user needs it? then prefetchQuery is what you need.
prefetchQuery is used to prefetch a query before it is needed or rendered by useQuery . By using this asynchronous method, you will spare your users the dreaded loading spinners because the query data already exists, react-query only goes to refresh this data behind the scenes if it is stale as per your QueryClient configurations.

await prefetchQuery(queryKey, queryFn)

prefetchQuery accepts a query key and a query function to prefetch.

await prefetchQuery(queryKey)

You can also pass only a query key if you have a default query function set in your QueryClient configuration.

await prefetchQuery(queryKey, queryFn, {
     staleTime: 10000,
})

prefetchQuery also takes a configurations object as a third parameter. The snippet above will prefetch a query only when the data is older than 10 seconds.

fetchQuery accepts a query key and a query function.

try {
   const data = await fetchQuery(queryKey, queryFn)
 } catch (error) {
   console.log(error)
 }

You can also pass a config object as a third parameter.

try {
   const data = await queryClient.fetchQuery(queryKey, queryFn, {
     staleTime: 10000,
   })
 } catch (error) {
   console.log(error)
 }
/*
will fetch a query only when the data is older than 10 seconds.
*/

fetchQuery and prefetchQuery accepts configurations options just like the useQuery hook with exception of the following : enabled , refetchInterval , refetchIntervalInBackground , refetchOnWindowFocus , refetchOnReconnect , notifyOnChangeProps , notifyOnChangePropsExclusions , onSuccess , onError , onSettled , useErrorBoundary , select , suspense , keepPreviousData , placeholderData .

This method is used to get an existing query's data. You can get data from any existing query anywhere in your application.

const data = getQueryData(queryKey)

It returns the data if it exits or undefined if it doesn't.

const data = getQueryData(queryKey)

This function is used to get the state of an existing query. It returns undefined if this query does not exist. You can use this method to show loading, error, or success feedback for any query anywhere in your application.

const state = getQueryState(queryKey)
//checking if this query is currently loading.
 console.log(state.isLoading)

This method is used to set default options for a query. It accepts a query key and an options object.

/*
sets a new 'cacheTime' default option for this query, overriding the global 'cacheTime' default option
*/

setQueryDefaults('posts', { cacheTime: 10000})

 function Component() {
   const { data } = useQuery('posts')
 }

This methods simply clears all cache your application may be connected to.