{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/react-query-a-guide-to-fetching-data/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n

React Query is a server-state management library.

\n

What is server-state?

\n

In a typical react application, the client fetches data from the server in order to render UIs. We refer to this data stored on the server as server-state.

\n

React Query fetches, caches and updates this server-state without touching any global state. In addition, with React Query, you can write the data fetching and caching logic of your application in just a few lines of code, drastically reducing the boilerplate that you would otherwise have to write in global state management libraries such as Redux or Redux Toolkit. More importantly, React Query handles caching and other important features (which we will discover soon) out-of-the-box with zero configuration.

\n

So, if I use React Query, will I still need to use an application state management library such as Redux or Redux Toolkit?

\n

Once you take care of the server-state using React Query, the data that can be considered as truly global for your application is really small, which you can manage using a combination of useState, useReducer, useContext and component composition methods.

\n

Having said that, if your application has large amounts of client-state that requires complex update logic, you can use a global state management library of your choice, in addition to React Query.

\n

What is client-state?

\n

Client-state or UI state can be defined as the state responsible for managing the interactive parts of your app. For example modal isOpen state.

\n

Once you understand that there are essentially two types of state (client-state & server-state) and that managing asynchronous operations between the client and the server is a different set of concerns than state management, you will be able to appreciate all the benefits that React Query brings to the table and follow all the latest discussions happening around application state management in React.

\n

Now that you have a broader understanding of React Query, we will now understand how to fetch data from server by building a small application.

\n

Project walk-through

\n

Our application will have a navigation bar with a Blog link. When we click on this link, we go to the /posts route, where we render the Posts page, which displays a list of blog posts fetched from JSONPlaceholder, a fake REST API.

\n

\n \n \n \n \n

\n

When we click on an individual post title, we render the respective Post page, where we display the title and body of the post.

\n

\n \n \n \n \n

\n

We will use react-router-dom for client-side routing, Bootstrap classes & CSS for styling and of course React Query for managing the server-state of our application.

\n

Let's get started.

\n

Create a folder named blog, open the folder in VS Code and create a React project using the following command.

\n
PS C:\\Users\\Delhivery\\Desktop\\blog> npx create-react-app .
\n

We will install all the dependencies we need.

\n
PS C:\\Users\\Delhivery\\Desktop\\blog> npm i bootstrap axios react-router-dom @tanstack/react-query
\n

Next, we will import Bootstrap minified CSS in the index.js file, above the index.css import.

\n
import React from "react"\nimport ReactDOM from "react-dom"\nimport "bootstrap/dist/css/bootstrap.min.css"\nimport "./index.css"\nimport App from "./App"\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById("root")\n)
\n

Creating the navigation bar

\n

Now, we will create the navigation bar.

\n

In the src folder, create a folder called components. And in the components folder, create a file called Navbar.js.

\n
src/components/Navbar.js
\n
import React from "react";\nimport { Link } from "react-router-dom";\n\nconst Navbar = () => {\n  return (\n    <nav>\n      <ul>\n        <li>\n          <Link to="/posts">Blog</Link>\n        </li>\n      </ul>\n    </nav>\n  );\n};\n\nexport default Navbar;
\n

Add the following CSS rules in index.css.

\n
src/index.css
\n
* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\nhtml {\n  font-family: sans-serif;\n}\n\nnav {\n  width: 100%;\n  height: 4rem;\n  background-color: black;\n}\n\nnav ul {\n  width: 100%;\n  height: 100%;\n  list-style-type: none;\n  display: flex;\n  align-items: center;\n}\n\nnav ul a {\n  text-decoration: none;\n  font-weight: 700;\n}\n\nnav ul a:link,\nnav ul a:visited {\n  color: gray;\n  transition: all 0.3s;\n}\n\nnav ul a:hover {\n  color: white;\n}
\n

Next, we will render the Navbar component inside the App component.

\n
src/App.js
\n
import React from "react";\nimport Navbar from "./components/Navbar";\n\nconst App = () => {\n  return (\n    <div>\n      <Navbar />\n    </div>\n  );\n};\n\nexport default App;
\n

We have used the Link component from react-router-dom inside the Navbar component; therefore we will have to wrap the top-level App component with the BrowserRouter component.

\n

Update the index.js file as follows:

\n
src/index.js
\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport "bootstrap/dist/css/bootstrap.min.css";\nimport "./index.css";\nimport App from "./App";\nimport { BrowserRouter as Router } from "react-router-dom";\n\nReactDOM.render(\n  <Router>\n    <App />\n  </Router>,\n  document.getElementById("root")\n);
\n

With this, the navigation bar is now ready. When we click on the Blog Link, we are taken to the /posts route, where we will render the Posts component (which we haven't created yet).

\n

\n \n \n \n \n

\n

Creating a query client

\n

As we have already discussed, the Posts component will render a list of blog posts. We will use the useQuery hook from React Query to fetch this list of posts from JSONPlaceholder, a fake REST API.

\n

Before we can use useQuery, we will have to create a query client and provide that client to our app.

\n

Update the index.js file as follows:

\n
src/index.js
\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport "bootstrap/dist/css/bootstrap.min.css";\nimport "./index.css";\nimport App from "./App";\nimport { BrowserRouter as Router } from "react-router-dom";\nimport { QueryClient, QueryClientProvider } from "@tanstack/react-query";\n\nconst queryClient = new QueryClient();\n\nReactDOM.render(\n  <Router>\n    <QueryClientProvider client={queryClient}>\n      <App />\n    </QueryClientProvider>\n  </Router>,\n  document.getElementById("root")\n);
\n

Now, inside the components folder, create a file called Posts.js.

\n
src/components/Posts.js
\n
import React from "react";\nimport axios from "axios";\nimport { useQuery } from "@tanstack/react-query";\n\nconst Posts = () => {\n  const queryResult = useQuery(["posts"], async () => {\n    const { data } = await axios.get(\n      `https://jsonplaceholder.typicode.com/posts`\n    );\n    return data;\n  });\n\n  console.log(queryResult);\n\n  return <div></div>;\n};\n\nexport default Posts;
\n

useQuery hook

\n

To fetch data from a server, we use the useQuery hook, which we have imported from react-query on line 3.

\n

The useQuery hook has the following signature:

\n
useQuery(queryKey, queryFn, config);
\n

Query key

\n

The first argument to useQuery is a unique key for the query.

\n

The key can be an individual string. It can also be an array with a string.

\n

In the code snippet above, we have used the array format ([\"posts\"]) of the query key. This means that the query inside the Posts component is tied to the posts key, which will be used for refetching, caching and sharing the query throughout the application. This will be clear when we inspect our queries in React Query Dev Tools, which we have not imported yet from react-query.

\n
\n

When we pass a string query key, it is converted to an array internally with the string as the only item in the query key.

\n
\n

Query function

\n

The second argument to useQuery is a query function that returns a promise that resolves the data or throws an error. If the quey function throws an error, it is available as error.message.

\n

The query function is where we have made a HTTP GET request to the JSONPlaceholder /posts API endpoint using axios (an HTTP client).

\n
\n

React query does not invoke the query function on every re-render. A component can rerender for various reasons, so, fetching everytime would be insane.

\n
\n

The query result returned by useQuery contains all the information about the query. On line 13, we have logged the queryResult variable to the console, but we can't see anything on the console because we have not yet rendered the Posts component.

\n

Let's render the Posts component inside the App component.

\n
src/App.js
\n
import React from "react";\nimport Navbar from "./components/Navbar";\nimport Posts from "./components/Posts";\nimport { Switch, Route } from "react-router-dom";\n\nconst App = () => {\n  return (\n    <div>\n      <Navbar />\n      <Switch>\n        <Route exact path="/posts">\n          <Posts />\n        </Route>\n      </Switch>\n    </div>\n  );\n};\n\nexport default App;
\n

Now, if we check our console, we see the following result:

\n

\n \n \n \n \n

\n

For most queries, it's usually sufficient to check for the isLoading state, then the isError state, then finally, assume that the data is available and render the successful state.

\n

When we make an API call, we can view its progress as follows:

\n\n

Add the highlighted code snippets in the Posts.js file.

\n
src/components/Posts.js
\n
import React from "react";\nimport axios from "axios";\nimport { useQuery } from "@tanstack/react-query";\nimport { Link } from "react-router-dom";\n\nconst Posts = () => {\n  const {\n    isLoading,\n    isError,\n    error,\n    data: posts,\n  } = useQuery(["posts"], async () => {\n    const { data } = await axios.get(\n      `https://jsonplaceholder.typicode.com/posts`\n    );\n    return data;\n  });\n\n  return (\n    <div className="col-8 col-md-6 mx-auto">\n      <h1>Blog Posts</h1>\n      {isLoading ? (\n        <div className="d-flex justify-content-center">\n          <div className="spinner-border" role="status">\n            <span className="sr-only"></span>\n          </div>\n        </div>\n      ) : isError ? (\n        <p>{error.message}</p>\n      ) : (\n        posts?.map((post) => (\n          <li key={post.id}>\n            <Link to={`/posts/${post.id}`}>{post.title}</Link>\n          </li>\n        ))\n      )}\n    </div>\n  );\n};\n\nexport default Posts;
\n

We have destructured isLoading, isError, error and data properties from the object returned by the useQuery hook. Note that we have renamed the data property to posts.

\n

Then, if isLoading is true, we show a spinner; if isError is true, we show the error message, else, we map through the posts array and show the post titles.

\n

The result is as follows:

\n

\n \n \n \n \n

\n

We have successfully fetched a list of 100 blog posts from a fake REST API endpoint and displayed it in the Posts component, in just a few lines of code.

\n

React query dev tools

\n

However, to truly understand how React Query is managing our posts query internally, we must inspect our query inside React Query Dev Tools.

\n

First, we will install React Query devtools.

\n
PS C:\\Users\\Delhivery\\Desktop\\blog> npm i @tanstack/react-query-devtools
\n

We can import ReactQueryDevTools from @tanstack/react-query-devtools and place it as high as we can in our app.

\n

Update the index.js file as follows:

\n
src/index.js
\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport "bootstrap/dist/css/bootstrap.min.css";\nimport "./index.css";\nimport App from "./App";\nimport { QueryClient, QueryClientProvider } from "@tanstack/react-query";\nimport { ReactQueryDevtools } from "@tanstack/react-query-devtools";\nimport { BrowserRouter as Router } from "react-router-dom";\n\nconst queryClient = new QueryClient();\n\nReactDOM.render(\n  <Router>\n    <QueryClientProvider client={queryClient}>\n      <App />\n      <ReactQueryDevtools initialIsOpen={false} />\n    </QueryClientProvider>\n  </Router>,\n  document.getElementById("root")\n);
\n

With this, we will see a floating icon on the lower left corner of the screen as shown below:

\n

\n \n \n \n \n

\n

Refetch on window focus

\n

At this stage, you must understand about one default behavior that React Query comes with out of the box. Stale queries are refetched automatically in the background when window is refocused or the network is reconnected.

\n

To understand what I am talking about, we will import the isFetching property from the object returned by the useQuery hook and use it to show the text Updating..., when the query is being refetched.

\n

Update the Posts.js file as follows:

\n
src/components/Posts.js
\n
import React from "react";\nimport axios from "axios";\nimport { useQuery } from "@tanstack/react-query";\nimport { Link } from "react-router-dom";\n\nconst Posts = () => {\n  const {\n    isFetching,\n    isLoading,\n    isError,\n    error,\n    data: posts,\n  } = useQuery(["posts"], async () => {\n    const { data } = await axios.get(\n      `https://jsonplaceholder.typicode.com/posts`\n    );\n    return data;\n  });\n\n  return (\n    <div className="col-8 col-md-6 mx-auto">\n      <h1>Blog Posts</h1>\n      {isFetching && "Updating..."}\n      {isLoading ? (\n        <div className="d-flex justify-content-center">\n          <div className="spinner-border" role="status">\n            <span className="sr-only"></span>\n          </div>\n        </div>\n      ) : isError ? (\n        <p>{error.message}</p>\n      ) : (\n        posts?.map((post) => (\n          <li key={post.id}>\n            <Link to={`/posts/${post.id}`}>{post.title}</Link>\n          </li>\n        ))\n      )}\n    </div>\n  );\n};\n\nexport default Posts;
\n

Now, click on a different tab and come back to the tab where our application is running and you will see a flash of the text Updating.... This is because, React Query, by default, refetches stale queries in the background on window refocus in order to make sure that the data remains up to date.

\n

We can turn off this behavior by setting refetchOnWindowFocus to false in the config object, which is passed as the third argument to the useQuery hook.

\n

Update the Posts.js component as follows:

\n
src/index.js
\n
import React from "react";\nimport axios from "axios";\nimport { useQuery } from "react-query";\nimport { Link } from "react-router-dom";\n\nconst Posts = () => {\n  const {\n    isFetching,\n    isLoading,\n    isError,\n    error,\n    data: posts,\n  } = useQuery(\n    ["posts"],\n    async () => {\n      const { data } = await axios.get(\n        `https://jsonplaceholder.typicode.com/posts`\n      );\n      return data;\n    },\n    {\n      refetchOnWindowFocus: false,\n    }\n  );\n\n  return (\n    <div className="col-8 col-md-6 mx-auto">\n      <h1>Blog Posts</h1>\n      {isFetching && "Updating..."}\n      {isLoading ? (\n        <div className="d-flex justify-content-center">\n          <div className="spinner-border" role="status">\n            <span className="sr-only"></span>\n          </div>\n        </div>\n      ) : isError ? (\n        <p>{error.message}</p>\n      ) : (\n        posts?.map((post) => (\n          <li key={post.id}>\n            <Link to={`/posts/${post.id}`}>{post.title}</Link>\n          </li>\n        ))\n      )}\n    </div>\n  );\n};\n\nexport default Posts;
\n

Now, if you click on a different tab and come back to the tab where our application is running, you will not see the text Updating... anymore.

\n

Moving forward, when we click on the title of the blog posts, the route changes to /posts/postId. We don't see anything on the screen because we have not created a page for individual blog posts yet. Let's do that now.

\n

In the components folder, create a file called Post.js.

\n
src/components/Post.js
\n
import React from "react";\nimport axios from "axios";\nimport { useParams } from "react-router-dom";\nimport { useQuery } from "react-query";\n\nconst Post = () => {\n  const { postId } = useParams();\n\n  const {\n    isLoading,\n    isError,\n    error,\n    data: post,\n  } = useQuery(["posts", postId], async () => {\n    const { data } = await axios.get(\n      `https://jsonplaceholder.typicode.com/posts/${postId}`\n    );\n    return data;\n  });\n\n  return (\n    <div className="col-8 col-md-6 mx-auto">\n      {isLoading ? (\n        <div className="d-flex justify-content-center">\n          <div className="spinner-border" role="status">\n            <span className="sr-only"></span>\n          </div>\n        </div>\n      ) : isError ? (\n        <p>{error.message}</p>\n      ) : (\n        <article>\n          {" "}\n          <h2>{post.title}</h2>\n          <p>{post.body}</p>\n        </article>\n      )}\n    </div>\n  );\n};\n\nexport default Post;
\n

Since query keys uniquely describe the data they are fetching, they should include any variables we use in your query function that change. In our case, postId changes whenever we click on different blog posts. This is why we have included the postId variable in our query key ([\"posts\", postid]).

\n
\n

More importantly, whenever the query key changes, React Query will trigger a refetch. You can think of the query key as the dependency array of the useEffect hook.

\n
\n

Next, update the App.js file.

\n
src/App.js
\n
import React from "react";\nimport Posts from "./components/Posts";\nimport Post from "./components/Post";\nimport Navbar from "./components/Navbar";\nimport { Switch, Route } from "react-router-dom";\n\nconst App = () => {\n  return (\n    <div>\n      <Navbar />\n      <Switch>\n        <Route exact path="/posts">\n          <Posts />\n        </Route>\n        <Route exact path="/posts/:postId">\n          <Post />\n        </Route>\n      </Switch>\n    </div>\n  );\n};\n\nexport default App;
\n

Now, when we click on any blog post title, we see the post details.

\n

\n \n \n

In React Query, built-in scroll restoration just works as long as the data is being cached.

\n

To understand what I mean, click on the 100th post, then click on the back button of the browser. The browser will scroll down to where you were at the start - the 100th post.

\n

Conclusion

\n

So, as you can see, React Query is extremely powerful. With this post, I have only scratched the surface of all the cool features that React Query comes packed with. I recently started learning React Query and I am super impressed. I recommend that you take a look at the documentation and start incorporating React Query in your React apps to manage the server-state.

\n
Understand staleTime in React Query in my blog post here.
\n","frontmatter":{"title":"React Query: A Guide to Fetching Data","date":"2021-07-10"}}},"pageContext":{"slug":"/react-query-a-guide-to-fetching-data/","prev":{"fields":{"slug":"/nullish-coalescing-operator-in-javascript/"},"frontmatter":{"modules":["JavaScript"]}},"next":{"fields":{"slug":"/is-pseudoclass-in-css/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}