DEV Community: Emmanuel Nnajiofor

React-query series Part 4: Interacting with the cache using the useQueryClient hook.

Emmanuel Nnajiofor — Fri, 03 Sep 2021 17:00:39 +0000

Cover image by Lawrence Eagles in the article: What’s new in React Query 3

Hey everyone 👋

It took a little while but I'm back again. I am always grateful for the encouragement. My special appreciation to my new followers:
@maxm, @sgrajan1, @ossygarcia, @mehzan07, @hi_im_ml, @fernado27, @gmazur92, and many others I cannot all mention for obvious constraints. I use this space to talk about frontend development, react-js especially. I intend to cover topics on strapi-js also.
In Part Three: Data fetching with the useQuery hook, we talked about how to fetch data using the useQuery hook, passing variable(s) to our query function, and lastly, overriding our global default configuration on a single query instance.

Intro
The useQueryClient hook
- prefetchQuery
- fetchQuery
- getQueryData
- refetchQueries
- getQueryState
- setQueryDefaults
- clear
Conclusion

Intro

If you have been following this series since Part One: Basic react-query setup, 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

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();

There exist more methods from this object, but we are only taking this few I feel are most important. Do find time to look at a full list of these methods here.

prefetchQuery

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
fetchQuery is somewhat similar to prefetchQuery. It is used for fetching and caching a query. It either returns the data from the query or throws an error. If a query exists in the cache and data is not stale, it returns the data, else it goes on to fetch the query.

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.

getQueryData

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)

refetchQueries

refetchQueries is used to refetch queries based on a certain condition. It accepts an optional query key and/or query filter as parameters.
Read more about query filters here

// this will refetch all queries in the app:
 await refetchQueries()

 // this will refetch all stale queries:
 await queryClient.refetchQueries({ stale: true })

 /* this will refetch all active queries partially matching a query key "posts" */:
 await refetchQueries(['posts'], { active: true })

 // refetch all active queries exactly matching a query key:
 await refetchQueries(['posts', 1], { active: true, exact: true })

getQueryState

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)

setQueryDefaults

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')
 }

clear

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

Conclusion

We have seen that with the useQueryClient hook, we can start interacting with everything in our cache including getting a query's data, fetching a query refetching a query(ries), clearing our cache, etc.
In the next part, we will see how can start making mutating actions to our server i.e. the create/update/delete using the useMutation hook.

Thank you all for your support. If you are beginner and haven't written something, do that today! Please give me a 💖 if this post or part of it has helped you. Comments are welcomed too.
Follow me on twitter @NnajioforEmma10

Intro
The useQueryClient hook
- prefetchQuery
- fetchQuery
- getQueryData
- refetchQueries
- getQueryState
- setQueryDefaults
- clear
Conclusion

React-query series Part 3: Data fetching with the useQuery hook.

Emmanuel Nnajiofor — Sun, 22 Aug 2021 19:07:05 +0000

Cover image by Lawrence Eagles in the article: What’s new in React Query 3

Hey everyone 👋

I'm back again. I am always grateful for the encouragement. Thank you for the 💖, for taking the time to read the lengthy Part Two: QueryClient configuration of this series. To my new followers; Thank you! I'll do my best not to disappoint you.

In part two, we talked about overriding some of the defaults that come with react-query by setting our custom defaults for both queries and mutations. We set our custom defaults on such options like retry , staleTime, cacheTime, refecthOnMount and a couple of others for our queries and retry for mutations.

Intro
The useQuery hook
- Fetching data
- Passing variables to query functions
- Overriding query defaults
Conclusion

Intro

In this part, we will be learning how to fetch data from an API using the useQuery hook. I promised to show you how we can override the defaults we set earlier, so we will have a look at that too. Always remember to use the table of contents above to jump to sections relevant to you.

The useQuery hook

We start by installing axios and refactoring a bit.

npm i axios

Our QueryClient goes to a new file ./src/util/queryClient.js

import { QueryClient} from 'react-query';

const queryClientConfig = {
    defaultOptions: {
      queries: {
        retry: 2,
        staleTime: 1000 * 30,// 30 seconds
        cacheTime: 1000 * 30, //30 seconds
        refetchOnMount: "always",
        refetchOnWindowFocus: "always",
        refetchOnReconnect: "always",
        refetchInterval: 1000 * 30, //30 seconds
        refetchIntervalInBackground: false,
        suspense: false,

      },
      mutations: {
        retry: 2,
      },
    },

 export const queryClient = new QueryClient(queryClientConfig);

If you just got here, we explained this snippet here

We clean our App.js thus

import { QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import { queryClient } from "./util/queryClient";


 function App() {
   return  (
           <QueryClientProvider client={queryClient}>
             {/* The rest of your application */}
             <ReactQueryDevtools initialIsOpen={false} />
           </QueryClientProvider>
        )
 }

We will also create a queryKeys.js file at ./src/util/queryKeys.js.
This file will host all the query keys for our application.

export const fetchPostsKey = "FETCH_POSTS";

Create a fetchPosts.service.js file at ./src/services/fetchPosts.service.js and create your simple async function to fetch a list of posts.
We will be using the JSONPlaceholder REST API for this demo.

import axios from "axios";

/**
 * @desc fetch a list of posts
 */
export const fetchPosts = async () => {
  const res = await axios.get(`https://jsonplaceholder.typicode.com/posts`);
  return res?.data;
};

Fetching data

Create a Posts.js component at ./src/components/Posts.js

Remember to import your Posts.js component to your App.js

...

 function App() {
   return  (
            <QueryClientProvider client={queryClient}>
              <Posts/>
              <ReactQueryDevtools initialIsOpen={false} />
            </QueryClientProvider>
        )
 }

Posts.js

import { useQuery } from "react-query";
import { fetchPosts } from "../../services/fetchPosts.service";
import { fetchPostsKey } from "../../util/queryKeys";

const Posts = () => {

  const {  isLoading, isError, isSuccess, refetch, remove, data, error} = useQuery(fetchPostsKey, fetchPosts);


  return (
    <div>
      {isLoading ? (
        <div>Loading...</div>
      ) : isError ? (
        <div>An error while fetching posts</div>
      ) : (
        data?.map((post) => (
          <div key={post?.id}>
            <div>{post?.title}</div>
            <div>{post?.body}</div>
          </div>
        ))
      )}
    </div>
  );
};
export default Posts;

The useQuery hook accepts a query key as its first argument and the query function as its's second argument.
The query key is required, the query function also is required as there was not default query function defined for our queries in QueryClient. Let's take a quick brush at the items in the destructured object useQuery returns to us.

isLoading: It is a boolean value that returns true when the query has no data and is currently fetching and false when not.

isError: Also a boolean value. It return true when the query attempt results in an error.

isSuccess: Returns true if the query has received a response with no errors and is ready to display its data. isSuccess is false when query is not yet resolved or results in an error.

refetch : This is a function that manually refetches the query.

remove : This function is used to manually remove the query from cache.

data : It is the response from the last successful query. data will be undefined if query fails for the first time.

error : It is the error response from your query. It is defined when your query is in an isError state.

The useQuery hook returns more values in the destructured object than described here, but this few I chose for the scope of this article. You can read more about the useQuery hook here.

Passing variable(s) to a query function

So, what if you want to pass a variable or variables to your query function? E.g. you have a function that fetches a single post and it requires you to pass in a post id; What do you do?
Let's see how it is done.

We will a new key entry in a queryKeys.js file at ./src/util/queryKeys.js.

...
export const fetchSinglePostKey = "FETCH_SINGLE_POST";

Create also a fetchSinglePost.service.js file at ./src/services/fetchSinglePost.service.js and create your simple async function to fetch a single post by id.

fetchSinglePost.service.js

import axios from "axios";

/**
 * @desc fetches a single post
 */
export const fetchSinglePost = async ({queryKey}) => {
const [_key, id] = queryKey
const res = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);
  return res?.data;
};

Post.js

import { useQuery } from "react-query";
import { fetchSinglePost } from "../../services/fetchSinglePost .service";
import { fetchSinglePostKey } from "../../util/queryKeys";

const Post = () => {

// fetching the post with the id of 1

  const {  isLoading, isError, isSuccess, refetch, remove, data, error} = useQuery([fetchSinglePostKey, 1], fetchSinglePost );


  return (
    <div>
      {isLoading ? (
        <div>Loading...</div>
      ) : isError ? (
        <div>An error while fetching post</div>
      ) : (
          <div >
            <div>{data?.title}</div>
            <div>{data?.body}</div>
          </div>
        )
      )}
    </div>
  );
};
export default Post;

Here, we are no more using a string value for our query key but an array, passing in the query string first and the post id as required by our query function fetchSinglePost.service.js.

The fetchSinglePost function declared in useQuery hook is passed in a context, this context has queryKey array nested in it. This queryKey array contains your query string as the first item in the array and your id variable for fetching our single post.

Remember to import your Post.js component to your App.js

...

 function App() {
   return  (
            <QueryClientProvider client={queryClient}>
               ...
              <Post/>
              <ReactQueryDevtools initialIsOpen={false} />
            </QueryClientProvider>
        )
 }

Overriding query defaults

We have seen two demonstrations using useQuery but don't forget that they all are operating within the queries default we set earlier. To override some of the global configurations, we pass an object as a third argument to the useQuery hook. Every option you declare a new value, that option is overridden for that useQuery instance only.

...
 const {  isLoading, isError, isSuccess, refetch, remove, data, error} = useQuery([fetchSinglePostKey, 1], fetchSinglePost, {
    refetchInterval : 3* 1000 //3 seconds
});

...

What this snippet above implies is that, although we configured react-query globally to refetch queries every 30 seconds, This particular query will refetch every 3 seconds; breaking away from the global configurations.

Conclusion

The returned data from our queries are persisted in a cache. In the next part, we will discuss how the to interact with this cache.
Thank you all for your support. If you are beginner and haven't written something, do that today! Please give me a 💖 if this post or part of it has helped you. Comments are welcomed too.
Follow me on twitter @NnajioforEmma10

Intro
The useQuery hook
- Fetching data
- Passing variables to query functions
- Overriding query defaults
Conclusion

React-query series Part 2: QueryClient configuration.

Emmanuel Nnajiofor — Fri, 20 Aug 2021 12:57:54 +0000

Hey everyone!

I'm back, and with a little bit more confidence 💪. I am also very grateful for the encouragement I got from the previous post. Thank you!
In Part one: Basic react-query setup, we talked about how to quickly setup react-query in our react project. We also touched on QueryClientProvider component, queryClient, ReactQueryDevtools component and queryClient config object queryClientConfig.
This will be a fairly long post. So, please use the links below to skip to sections relevant to you.

Intro
The QueryClient configuration
- queries
  - retry
  - staleTime
  - cacheTime
  - refetchOnMount
  - refetchOnWindowFocus
  - refetchOnReconnect
  - refetchInterval
  - refetchIntervalInBackground
  - suspense
- mutations
  - retry
Conclusion
Credits

Intro

In this part, we will briefly talk about the configurations settings object queryClientConfig we saw earlier. We will also look at what each key-value pair in the configuration does for our queries and mutations.

The QueryClient configuration

You remember this snippet from the last post ?

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClientConfig = {
    defaultOptions: {
      queries: {
        retry: 2,
        staleTime: 1000 * 30,// 30seconds
        cacheTime: 1000 * 30, //30 seconds
        refetchOnMount: "always",
        refetchOnWindowFocus: "always",
        refetchOnReconnect: "always",
        refetchInterval: 1000 * 30, //30 seconds
        refetchIntervalInBackground: false,
        suspense: false,

      },
      mutations: {
        retry: 2,
      },
    },

 ...

The queryClientConfig object provides us with the ability to tweak and override the default behavior of react-query library or to put it better; it enables us create our custom defaults both for queries and mutations across our application. This global configuration can also be overridden for each query or mutation instance in our application if need be (We will see how in the next article). Nested in the queryClientConfig object, is the defaultOptions object, which in turn has two objects; queries and mutations nested in it. The key-value pairs in these two objects(queries and mutations) are what we will be talking about.

queries

The queries object lets us configure react-query behavior for our queries. According to the documentation, queries can be passed in more configuration options but I chose this bit to keep things simple and flexible, also I believe they are the most relevant for the scope of this article.

retry

The retry option takes either a boolean, number or function as it's value. When false, our unsuccessful queries are not retried by default.
Passing in a true value ensures that our queries are retried infinitely (i.e. continued retries until the query gets successful).
When retry is given a number value, failed queries will retry until the failed queries count meets that number.
retry do also take a function as it's value. This function receives a failure count(number) and error as it's first and second argument respectively. This function must return a boolean to determine whether a query should be retried or not.

...

//function as value for retry

const queryClientConfig = {
    defaultOptions: {
      queries: {
        retry: (failureCount, error) => {
           //...do something with passed argument
        }
       ...
      },
    },
 ...

function as a value of retry is aimed at giving us more granular control to determine ourselves if a query should be retried based on the number of failed attempts, type of error or both.

staleTime

staleTime is time in milliseconds after which the returned data from a successful query is considered stale. staleTime accepts either a number or Infinity as it's value. Infinity as a value ensures that our data is never considered stale. When staleTime receives a number, the number is calculated as time in milliseconds after which the data is considered stale.

cacheTime

The cacheTime options receives either a number or Infinity as a value. It is the time in milliseconds that an unused/inactive cached data is allowed to remain in memory. When a cached data becomes unused or inactive, it will be cleaned-up from the memory after this duration. When different cache times are specified, the longest one will be used.
If cacheTime is set to Infinity, cached data are never cleaned from memory.
When cacheTime receives a number as it's value, this number is calculated as time in milliseconds after which, inactive/unused cached data is purged from memory.

refetchOnMount

When a component mounts and a query is run for the first time, the returned data from this successful query is cached. Sometimes, we may not want this same query to run again if the component remounts and the returned data from the previous call is still exists and fresh in the cache; this is the control refetchOnMount gives us.
refetchOnMount accepts a boolean or the string: "always" as it's value.
If set to false, the query will not refetch on component mount by default.
If value is set to true, the query is refetched if the data in cache is considered stale.
"always" as it's value will ensure that query is refetched regardless of whether cached data is stale or not.
(Refer to staleTime to know when data is considered stale).

refetchOnWindowFocus

This option is similar to refetchOnMount but for window focus.
We may wish to show our users fresh data whenever they switch their focus back to the browser tab where our application is being used; refetchOnWindowFocus helps with this.
It accepts similar values as refetchOnMount : boolean or the string,"always".
When refetchOnWindowFocus is set to false, query will not be refetched on window focus. When set to true, query is refetched only if cached data is stale. "always" will cause queries to refetch regardless of whether cached data is stale or not.

refetchOnReconnect

While using our application, users may lose internet connection. During this period, long or short as it may be, remote data may have changed.
refetchOnReconnect gives use the control to determine whether we want our application to refetch queries once our users regain internet connection.
refetchOnReconnect accepts a boolean or the string, "always". By now, you can guess where this is going 😉.
With false as a value, queries are not refetched on reconnection to the internet at all.
true lets queries refetch on reconnection only if the data is considered stale. (again, check staleTime to understand when a cached data is considered stale).
"always" will ensure queries are refetched whether cached data is stale or not.

refetchInterval

We may want our application refetching queries at certain interval in time regardless of whether data is stale or not. This is very useful for rapidly changing remote data or for near real-time behavior for our application.
refetchInterval accepts either false or a number as it's value.
false means that our queries will not refetch at interval.
When a number is passed to refetchInterval as a value, this number is calculated as time in milliseconds. For example, 5000 as a value of refetchInterval means queries will be refetched every 5 seconds.

refetchIntervalInBackground

Would you like explicitly control the refetchInterval behavior for when users are not focused on our application ?refetchIntervalInBackground lets us do this. It accepts only boolean values.
true as a value implies that queries will be refetched at interval (as set on refetchInterval) even when our application is not in focus. When false, queries will not refetch at interval when our application is not in focus.

suspense

suspense accepts only boolean values.
When set to true, active queries will suspend and will throw a runtime error if an error occurs.
With false, active queries will neither suspend nor throw a runtime error if an error occurs.

mutations

Pheew 😤 if you have gotten this far, I'm grateful. I'm a little 😩 myself. Hang in there, we are almost done.

The mutations object lets us configure react-query behavior for our mutations. Mutations are for create/update/delete actions to our server. For any action that seeks to mutate our remote data, mutations should be used. Lets discuss the only item in the mutations object: retry.

retry

retry as an option for the mutations object is similar to that for queries.
retry accepts either a boolean, number or function as it's value.
false as the value for retry ensures that failed mutations will not retry by default.
When true, failed mutations will retry infinitively(i.e. until a mutation is successful).
If set to an number, e.g. 3, failed mutations will retry until the failed mutations count meets that number.
function as a value for retry enables us decide ourselves, when we want failed mutations to retry. This function must return a boolean.

...

//function as value for retry in mutations

const queryClientConfig = {
    defaultOptions: {
       ...
      mutations: {
        retry: (failureCount, error) => {
           //...do something with passed argument
        }
      },
    },
 ...

Conclusion

This post was a long one and I really appreciate that you made it this far.
In the next part, we will discuss data fetching with the useQuery hook.
Thank you all for your support. Please give me a 💖 if this post or part of it has helped you. Comments are welcomed too.
Follow me on twitter @NnajioforEmma10

Credits

Image: Logrocket: What is new in react-query 3 by Lawrence Eagles.

React-query documentation

Intro
The QueryClient configuration
- queries
  - retry
  - staleTime
  - cacheTime
  - refetchOnMount
  - refetchOnWindowFocus
  - refetchOnReconnect
  - refetchInterval
  - refetchIntervalInBackground
  - suspense
- mutations
  - retry
Conclusion
Credits

React-query series Part 1: Basic react-query setup

Emmanuel Nnajiofor — Thu, 19 Aug 2021 07:31:59 +0000

Hey everyone!

So after a few years as a frontend developer, I have decided to
write my first article. You have no idea the fear I had to
conquer (or maybe you do), 😟 but there is no point hiding in your shell right ?

Sections

Intro
Prerequisite
Bootstrap our project
Setup react-query
Credits

Intro

React-query is a superlight library for fetching, updating and synchronizing server state. With react-query, you don't have to write your
data-fetching logic (Who likes all that setting of loading, error and data state huh ? 🤷‍♀️ ), You
don't also need global store libraries like redux or
zustand to make your server state global or persistent. Even if a
global store is used in your application, it is restricted to only
client state like user settings etc, thereby reducing your
code size by a ton.
Although this library has a wonderful documentation, I have found that it can be daunting for beginners and thus, a need for a no-nonsense simple series to get beginners quickly setup to using react-query.
You can also skip to the part two: QueryClient configuration of this series

Prerequisite

Basic knowledge of react and hooks in react

Bootstrap our project

We bootstrap a basic react app by running npx create-react-app project-name

npx create-react-app react-query-setup

We also install react-query library to our react app by running

npm i react-query. At the time of writing, react-query version is at 3.19.6

npm i react-query

Setup react-query

To setup react-query, we need the QueryClientProvider. The
QueryClientProvider component is used to connect and provide a
QueryClient to your application; more or less, connect our
application to features react-query provides.
The QueryClientProvider component takes in a client prop. This
prop is in turn, supplied the queryClient instance. You can supply
the queryClient instance a custom config object as a param if
you'd like to set your own defaults. You can read about some
important defaults that come with react-query here.

import { QueryClient, QueryClientProvider } from 'react-query';

/*create and use a custom config object.Normally, I'd put this in another file and export
*/
const queryClientConfig = {
    defaultOptions: {
      queries: {
        retry: 2,
        refetchOnMount: "always",
        refetchOnWindowFocus: "always",
        refetchOnReconnect: "always",
        cacheTime: 1000*30, //30 seconds
        refetchInterval: 1000*30, //30 seconds
        refetchIntervalInBackground: false,
        suspense: false,
        staleTime: 1000 * 30,
      },
      mutations: {
        retry: 2,
      },
    },

 const queryClient = new QueryClient(queryClientConfig)

 function App() {
   return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
 }

Additionally, you can add the ReactQueryDevTools component to debug and visualize your queries on your development environment.

import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';

/*create and use a custom config object.Normally, I'd put this in another file and export
*/
const queryClientConfig = {
    defaultOptions: {
      queries: {
        retry: 2,
        refetchOnMount: "always",
        refetchOnWindowFocus: "always",
        refetchOnReconnect: "always",
        cacheTime: 1000*30, //30 seconds
        refetchInterval: 1000*30, //30 seconds
        refetchIntervalInBackground: false,
        suspense: false,
        staleTime: 1000 * 30,
      },
      mutations: {
        retry: 2,
      },
    },

 const queryClient = new QueryClient(queryClientConfig)

 function App() {
   return  <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
 }

In the next part of this series, we will talk more on what each key-value in the queryClientConfig object does for queries and mutations.

I'd really appreciate a 💖 if this article has helped you.
Thank you!

Follow me on twitter @NnajioforEmma10

Credits

Image: Logrocket: What is new in react-query 3 by Lawrence Eagles.

React-query documentation

Sections

Intro
Prerequisite
Bootstrap our project
Setup react-query
Credits

DEV Community: Emmanuel Nnajiofor

React-query series Part 4: Interacting with the cache using the useQueryClient hook.

Table of contents

Intro

The useQueryClient hook

Conclusion

Table of contents

React-query series Part 3: Data fetching with the useQuery hook.

Table of contents

Intro

The useQuery hook

Fetching data

Passing variable(s) to a query function

Overriding query defaults

Conclusion

Table of contents

React-query series Part 2: QueryClient configuration.

Table of contents

Intro

The QueryClient configuration

queries

retry

staleTime

cacheTime

refetchOnMount

refetchOnWindowFocus

refetchOnReconnect

refetchInterval

refetchIntervalInBackground

suspense

mutations

retry

Conclusion

Credits

Table of contents

React-query series Part 1: Basic react-query setup

Sections

Intro

Prerequisite

Bootstrap our project

Setup react-query

Credits

Sections