{"id":960,"date":"2022-08-26T06:45:50","date_gmt":"2022-08-26T06:45:50","guid":{"rendered":"https:\/\/www.copycat.dev\/blog\/?p=960"},"modified":"2023-02-23T03:13:21","modified_gmt":"2023-02-23T03:13:21","slug":"react-query","status":"publish","type":"post","link":"https:\/\/www.copycat.dev\/blog\/react-query\/","title":{"rendered":"React Query Tutorial: Getting Started with Fetching Data and State Management with Examples"},"content":{"rendered":"<div class=\"convertful-189269\"><\/div>\n\n\n\n<div id=\"rtoc-mokuji-wrapper\" class=\"rtoc-mokuji-content frame3 preset2 animation-fade rtoc_open noto-sans\" data-id=\"960\" data-theme=\"CopyCat Theme\">\n\t\t\t<div id=\"rtoc-mokuji-title\" class=\" rtoc_left\">\n\t\t\t<button class=\"rtoc_open_close rtoc_open\"><\/button>\n\t\t\t<span>Table of Contents<\/span>\n\t\t\t<\/div><ol class=\"rtoc-mokuji decimal_ol level-1\"><li class=\"rtoc-item\"><a href=\"#rtoc-1\">Introduction<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-2\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#what-is-react-query-library\"><\/a>What is React Query library<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-3\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#features-of-react-query\"><\/a>Features of React Query<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-4\">Apollo Client Vs React Query Vs URQL: A Detailed Comparision<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-5\">Is React Query good enough?<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-6\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#benefits-of-using-react-query-in-your-react-application\"><\/a>Benefits of using React Query in your React application<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-7\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#steps-to-use-react-query-library-to-fetch-data-from-api\"><\/a>Steps to use React Query Library to fetch data from API<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-8\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#getting-started-with-your-react-app\"><\/a>Getting started with your React app<\/a><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-9\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#setup-your-development-environment\"><\/a>Setup your development environment<\/a><\/li><\/ul><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-10\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#getting-started-with-react-query\"><\/a>Getting started with React Query<\/a><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-11\">Tutorial<\/a><\/li><\/ul><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-12\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#alternatives-to-react-query\"><\/a>Alternatives to React Query<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-13\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#conclusion\"><\/a>Conclusion<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-14\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#further-readings\"><\/a>Further readings<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-15\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#video-on-react-query-and-examples\"><\/a>Video on React Query and Examples<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-16\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#is-react-query-good-enough\"><\/a><\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-17\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#outline\"><\/a><\/a><\/li><\/ol><\/div><h2 id=\"rtoc-1\"  class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Building a full-stack application is incomplete until when you can exchange data between different components. Fullstack application refers to being able to carry out the CRUD operations. The most important aspect of a full-stack application is the ability to exchange data. There are different ways to do this which range from using the&nbsp;<a href=\"https:\/\/www.copycat.dev\/blog\/react-fetch\/\">Fetch API<\/a>, to using your custom&nbsp;<a href=\"https:\/\/www.copycat.dev\/blog\/react-custom-hooks\/\">useFetch hook<\/a>, to using the&nbsp;<a href=\"https:\/\/github.com\/axios\/axios\">Axios library<\/a>, and lots more. React Query is a library that will help you carry out CRUD operations in your React Application also, helping you manage state, synchronization, caching, and error handling.<\/p>\n\n\n\n<h2 id=\"rtoc-2\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#what-is-react-query-library\"><\/a>What is React Query library<\/h2>\n\n\n\n<p>React Query is a&nbsp;<a href=\"https:\/\/reactjs.org\/\">ReactJS<\/a>&nbsp;preconfigured data management library which gives you power and control over server-side state management, fetching, and caching of data, and error handling in a simple and declarative way without affecting the global state of your application.<\/p>\n\n\n\n<p>Server data is asynchronous &#8211; it can easily be outdated, this is because the data is not stored in your React application. This is where the Query library shines, to allow you to manipulate the asynchronous data, cache it, and also, update stale data or synchronize it.<\/p>\n\n\n\n<p>There is absolutely no point trying to re-invent the wheel by trying to write your code that will handle caching, optimistic UI updates, and other handy features. There are a handful of libraries that provides these features out of the box. React Query is jam packed with tons of helpful features!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/user-images.githubusercontent.com\/24845008\/185883622-400d619d-8047-459c-915f-7201eed45184.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/24845008\/185883622-400d619d-8047-459c-915f-7201eed45184.png\" alt=\"React Query\"\/><\/a><\/figure>\n\n\n\n<h2 id=\"rtoc-3\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#features-of-react-query\"><\/a>Features of React Query<\/h2>\n\n\n\n<p>Aside from the benefits discussed already, you should consider using this library for your next project because&nbsp;<a href=\"https:\/\/tanstack.com\/query\/v4\/?from=reactQueryV3&amp;original=https:\/\/react-query-v3.tanstack.com\/\">React Query<\/a> takes care of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Caching<\/strong>: Window focus refetching \u2013 This allows it to pre-fetch data depending on your application activity<\/li>\n\n\n\n<li><strong>Request retry<\/strong>: Ability to set the number of request retries in the event of errors.<\/li>\n\n\n\n<li><a href=\"https:\/\/react-query.tanstack.com\/guides\/prefetching\"><strong>Prefetching<\/strong><\/a>&nbsp;\u2013 It is able to pre-fetch data depending if your application needs fresh data after an update network request. It is able to update data in the background.<\/li>\n\n\n\n<li><a href=\"https:\/\/react-query.tanstack.com\/guides\/optimistic-updates\"><strong>Optimistic updates<\/strong><\/a>&nbsp;\u2013 It is also able to handle complex caching so that your application is fully optimized.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"rtoc-4\"  class=\"wp-block-heading\">Apollo Client Vs React Query Vs URQL: A Detailed Comparision<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apollo client is a GraphQL implementation that enables developers to manage data in their applications. The team at&nbsp;<a href=\"https:\/\/www.apollographql.com\/\">Apollo<\/a>&nbsp;also made the&nbsp;<a href=\"https:\/\/github.com\/apollographql\/apollo-client\">Apollo Client<\/a>, a GraphQL client that can be used in your React applications.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/formidable.com\/open-source\/urql\/\">URQL<\/a>&nbsp;is a highly customizable and versatile GraphQL client for React, Svelte, Vue, or plain JavaScript, with which you add on features like normalized caching as you grow.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React Query, on the other hand, is an open-source project by&nbsp;<a href=\"https:\/\/github.com\/tannerlinsley\">Tanner Linsey<\/a>. As pointed out above, React Query is a pre-configured library that solves the problem of fetching, caching, and optimistic data updates in your React applications.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Comparison<\/th><th><a href=\"https:\/\/github.com\/tannerlinsley\/react-query\">React Query<\/a><\/th><th><a href=\"https:\/\/github.com\/FormidableLabs\/urql\">URQL<\/a><\/th><th><a href=\"https:\/\/github.com\/apollographql\/apollo-client\">Apollo Client<\/a><\/th><th><\/th><\/tr><\/thead><tbody><tr><td><strong>GitHub stars<\/strong><\/td><td>29k<\/td><td>7.4<\/td><td>18k<\/td><td><\/td><\/tr><tr><td><strong>Ease of use<\/strong><\/td><td>Very easy<\/td><td>Easy<\/td><td>Easy<\/td><td><\/td><\/tr><tr><td><strong>Platform required<\/strong><\/td><td>React<\/td><td>React, Preact, and Svelte<\/td><td>React, GraphQL<\/td><td><\/td><\/tr><tr><td><strong>Query support<\/strong><\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u2705<\/td><td><\/td><\/tr><tr><td><strong><a href=\"https:\/\/react-query.tanstack.com\/guides\/window-focus-refetching\">Window Focus Refetching<\/a><\/strong><\/td><td>\u2705<\/td><td>\u2705<\/td><td>\ud83d\uded1<\/td><td><\/td><\/tr><tr><td><strong>Customizable<\/strong><\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u2705<\/td><td><\/td><\/tr><tr><td><strong>Caching<\/strong><\/td><td>\u2705<\/td><td>\u2705<\/td><td>\u2705<\/td><td><\/td><\/tr><tr><td><strong>Data fetching<\/strong><\/td><td>\u2705<\/td><td>\ud83d\uded1<\/td><td>\ud83d\uded1<\/td><td><\/td><\/tr><tr><td><strong>GraphQL<\/strong><\/td><td>\ud83d\uded1<\/td><td>\u2705<\/td><td>\u2705<\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"rtoc-5\"  class=\"wp-block-heading\">Is React Query good enough?<\/h2>\n\n\n\n<p>React Query is a big thing because it helps with server-state data management. This means that you no longer have to worry about keeping everything in a standard global state because most libraries were created to handle client state only and the server states are way different.&nbsp;<a href=\"https:\/\/react-query.tanstack.com\/\">React Query<\/a>&nbsp;is good enough because this library will help you to&nbsp;<strong>fetch<\/strong>,&nbsp;<strong>synchronize<\/strong>,&nbsp;<strong>update<\/strong>, and&nbsp;<strong>cache<\/strong>&nbsp;your remote data while also reducing the amount of code you need to write by providing you two simple hooks and one utility function. With React Query, you do not need to write boilerplate codes to enable it to post with React as is the case with the other libraries.<\/p>\n\n\n\n<h2 id=\"rtoc-6\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#benefits-of-using-react-query-in-your-react-application\"><\/a>Benefits of using React Query in your React application<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ease of data fetching<\/li>\n\n\n\n<li>It is becoming the standard way to fetch data<\/li>\n\n\n\n<li>Fun ways of fetching data<\/li>\n\n\n\n<li>Highly customizable<\/li>\n\n\n\n<li>Lightweight<\/li>\n<\/ul>\n\n\n\n<h2 id=\"rtoc-7\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#steps-to-use-react-query-library-to-fetch-data-from-api\"><\/a>Steps to use React Query Library to fetch data from API<\/h2>\n\n\n\n<h2 id=\"rtoc-8\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#getting-started-with-your-react-app\"><\/a>Getting started with your React app<\/h2>\n\n\n\n<p>In this tutorial, you will be creating a React app using&nbsp;<a href=\"https:\/\/create-react-app.dev\/\">CRA<\/a>.<\/p>\n\n\n\n<h3 id=\"rtoc-9\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#setup-your-development-environment\"><\/a>Setup your development environment<\/h3>\n\n\n\n<p>You will scaffold a new React project. In this tutorial, I refer to my React app as&nbsp;<code>react-query-tutorial<\/code>. In your terminal, type the following:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nnpx create-react-app react-query-tutorial\n<\/pre><\/div>\n\n\n<p>After having created your app and all dependencies automatically installed, you will need to navigate into the project directory and run the app. For that, run the following command in your terminal:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\ncd react-query-tutorial &amp;&amp; npm start\n<\/pre><\/div>\n\n\n<p>You should see similar output below in your terminal:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n$ npm start\n\n&gt; react-query-tutorial@0.1.0 start\n&gt; react-scripts start\n<\/pre><\/div>\n\n\n<p>You should get the following in your terminal upon completion of the commands above:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nCompiled successfully!\n\nYou can now view react-query-tutorial in the browser.\n\n  Local:            http:\/\/localhost:3000\n  On Your Network:  http:\/\/192.168.137.1:3000\n\nNote that the development build is not optimized.\nTo create a production build, use npm run build.\n<\/pre><\/div>\n\n\n<p>If your web pack is compiled successfully then your React app will start hot reloading your development environment, and your app should be running on&nbsp;<code>localhost:3000<\/code>&nbsp;by default.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/user-images.githubusercontent.com\/24845008\/176993096-b0464d20-5db0-4da2-b67a-cef27bbcaa3e.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/24845008\/176993096-b0464d20-5db0-4da2-b67a-cef27bbcaa3e.png\" alt=\"image of React app\"\/><\/a><\/figure>\n\n\n\n<h2 id=\"rtoc-10\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#getting-started-with-react-query\"><\/a>Getting started with React Query<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install official React Query and react-query-devtools <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n yarn add react-query &amp;&amp; yarn add react-query-devtools -f\n<\/pre><\/div>\n\n\n<p>or<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nnpm install react-query &amp;&amp; npm install react-query-devtools -f\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>You installed&nbsp;<code>react-query-devtools<\/code>&nbsp;because it is difficult to debug data fetching, that is why you need to install&nbsp;<a href=\"https:\/\/tanstack.com\/query\/v4\/docs\/devtools?from=reactQueryV3&amp;original=https:\/\/react-query-v3.tanstack.com\/devtools\">react-query-devtools<\/a>. It will help you to see and understand how React Query does data fetching. The&nbsp;<code>-f<\/code>&nbsp;flag is passed to the command to resolve any dependencies issues while installing&nbsp;<code>react-query-devtools<\/code>.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next, you will import&nbsp;<code>QueryClientProvider<\/code>&nbsp;and&nbsp;<code>QueryClient<\/code>&nbsp;in your&nbsp;<code>App.js<\/code>&nbsp;like so: <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ App.js\n\n  import { QueryClient, QueryClientProvider } from &quot;react-query&quot;;\n  import { ReactQueryDevtools } from &quot;react-query-devtools&quot;;\n\n  const queryClient = new QueryClient({});\n\n  const App = () =&gt; {\n    return (\n      &lt;QueryClientProvider client={queryClient}&gt;\n      \n\n        {\/* The rest of your application *\/}\n\n        &lt;ReactQueryDevtools initialIsOpen={true} \/&gt;\n\n      &lt;\/QueryClientProvider&gt;\n    );\n  };\n\n  export default App;\n<\/pre><\/div>\n\n\n<p>You initialized&nbsp;<code>ReactQueryDevtools<\/code>&#8216;s&nbsp;<code>initialIsOpen<\/code>&nbsp;to&nbsp;<code>true<\/code>&nbsp;to enable the dev tools to default to being open.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>useQuery<\/code>&nbsp;Hook The&nbsp;<code>useQuery<\/code>&nbsp;hook handles the fetching of data. It is called whenever you need to fetch data. It accepts a unique key for the query and a function that returns a promise. The unique key is used to refetch, cache, and share your query internally.\n<ul class=\"wp-block-list\">\n<li>Using the&nbsp;<code>useQuery<\/code>&nbsp;hook<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst fetchedData = useQuery(key, promiseBasedFn);\n<\/pre><\/div>\n\n\n<p>The&nbsp;<code>useQuery<\/code>&nbsp;hook returns a handful of objects such as&nbsp;<code>isSuccess<\/code>,&nbsp;<code>isError<\/code>,&nbsp;<code>isLoading<\/code>,&nbsp;<code>isFetching<\/code>,&nbsp;<code>data<\/code>, and&nbsp;<code>error<\/code>.<\/p>\n\n\n\n<p>Enough said, let us get your hands dirty with code by walking you through actually using React Query and the&nbsp;<code>useQuery<\/code>&nbsp;hook to fetch actual data in your React Application.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/user-images.githubusercontent.com\/24845008\/185805165-582c829d-e0bf-4880-a42c-620ee40bc905.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/24845008\/185805165-582c829d-e0bf-4880-a42c-620ee40bc905.png\" alt=\"coding cat\"\/><\/a><\/figure><\/div>\n\n\n<h3 id=\"rtoc-11\"  class=\"wp-block-heading\">Tutorial<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For the purpose of this tutorial, you will be using the GitHub REST API to get a list of public repositories of the&nbsp;<code>Eunit99<\/code>&nbsp;on GitHub. You will make the request to the following endpoint&nbsp;<a href=\"https:\/\/api.github.com\/users\/eunit99\/repos\">https:\/\/api.github.com\/users\/eunit99\/repos<\/a>. It returns all the stored data about the user,&nbsp;<a href=\"https:\/\/github.com\/eunit99\">eunit99<\/a>. With this response, you can decide to render it whichever way we like in your React app.<\/li>\n\n\n\n<li>You will create a component called&nbsp;<code>Repositories.jsx<\/code>&nbsp;which will display a list of user&#8217;s repositories.<\/li>\n<\/ul>\n\n\n\n<p>Your folder structure might look like so:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/user-images.githubusercontent.com\/24845008\/185806256-f9bc34e8-6774-457d-bed4-72363bbf679d.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/24845008\/185806256-f9bc34e8-6774-457d-bed4-72363bbf679d.png\" alt=\"folder structure\"\/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next, you will make use of&nbsp;<a href=\"https:\/\/github.com\/axios\/axios\">Axios<\/a>&nbsp;as your promise-based function to fetch our data. Start by installing it by hitting the command&nbsp;<code>npm i axios<\/code>&nbsp;on your terminal.<\/li>\n\n\n\n<li>Then inside your&nbsp;<code>Repositories.jsx<\/code>&nbsp;component, paste the following code:<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ components\/Repositories.jsx\n\nimport React from &quot;react&quot;;\nimport axios from &quot;axios&quot;;\nimport { useQuery } from &quot;react-query&quot;;\n\n\n\nexport default function Repositories() {\n\n  const { isLoading, isError, data, error, refetch } = useQuery(&#091;&quot;repo&quot;], () =&gt;\n    axios\n      .get(&quot;https:\/\/api.github.com\/users\/eunit99\/repos&quot;)\n      .then((res) =&gt; res.data)\n  );\n\n  if (isLoading) return &quot;Loading...&quot;;\n\n  if (error) return &quot;An error has occurred: &quot; + error.message;\n\n  console.log(data)\n  \n\n\n  return (\n    &lt;&gt;\n      ...\n\n    &lt;\/&gt;\n  )\n};\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Explanations of what is going on<\/strong>\n<ul class=\"wp-block-list\">\n<li>You pass in a unique key called&nbsp;<code>repo<\/code>&nbsp;to the useQuery hook<\/li>\n\n\n\n<li>The second argument to the useQuery hook is the promise-based function for fetching our data where you make use of Axios.<\/li>\n\n\n\n<li>Another notable thing you did is that you make use of object destructuring to destructure your object response. You will make use of them in the next example.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>The complete&nbsp;<code>Repositories.jsx<\/code>&nbsp;component will look like so:<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ components\/Repositories.jsx\n\nimport React, { Fragment } from &quot;react&quot;;\nimport axios from &quot;axios&quot;;\nimport { useQuery } from &quot;react-query&quot;;\n\n\n\nexport default function Repositories() {\n\n  const { isLoading, isError, data, error, refetch } = useQuery(&#091;&quot;repo&quot;], () =&gt;\n    axios\n      .get(&quot;https:\/\/api.github.com\/users\/eunit99\/repos&quot;)\n      .then((res) =&gt; res.data)\n  );\n\n  if (isLoading) return &quot;Loading...&quot;;\n\n  if (error) return &quot;An error has occurred: &quot; + error.message;\n\n  console.log(data)\n\n    return (\n      &lt;&gt;\n        {data.map(repo =&gt; {\n          return (\n            &lt;Fragment\n              key={repo.id}\n            &gt;\n              &lt;ul&gt;\n                &lt;li&gt;\n                  &lt;a\n                    href={repo.clone_url}&gt;\n                    {repo.name}\n                  &lt;\/a&gt;\n                &lt;\/li&gt;\n              &lt;\/ul&gt;\n            &lt;\/Fragment&gt;\n          )\n        })}\n        &lt;button type=&quot;button&quot; onClick={refetch}&gt;\n          Fetch again\n        &lt;\/button&gt;\n      &lt;\/&gt;\n    );\n  };\n<\/pre><\/div>\n\n\n<p>Finally, your end result will look like so:&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"518\" height=\"570\" src=\"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/08\/185809208-d20479dc-2908-4501-907c-d91e40c14f4b.gif\" alt=\"\" class=\"wp-image-962\"\/><\/figure><\/div>\n\n\n<p><a href=\"https:\/\/user-images.githubusercontent.com\/24845008\/185809208-d20479dc-2908-4501-907c-d91e40c14f4b.gif\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<h2 id=\"rtoc-12\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#alternatives-to-react-query\"><\/a>Alternatives to React Query<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/vercel\/swr\">SWR<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/FormidableLabs\/urql\">urql<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/elbywan\/wretch\">wretch<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/DamianOsipiuk\/vue-query\">Vue Query<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/lincolnloop\/amygdala\">amygdala<\/a><\/li>\n<\/ul>\n\n\n\n<h2 id=\"rtoc-13\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#conclusion\"><\/a>Conclusion<\/h2>\n\n\n\n<p>In this tutorial, you learned about React Query and how to use it to to handle data fetching in your React application.<\/p>\n\n\n\n<p>You can find the complete source code of this tutorial in this&nbsp;<a href=\"https:\/\/github.com\/Eunit99\/react-query-tutorial\">repository<\/a>.<\/p>\n\n\n\n<h2 id=\"rtoc-14\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#further-readings\"><\/a>Further readings<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/blog.bitsrc.io\/how-to-start-using-react-query-4869e3d5680d\">How and Why You Should Use React Query<\/a>&nbsp;by Nathan Sebhastian<\/li>\n\n\n\n<li><a href=\"https:\/\/tanstack.com\/query\/v4\/?from=reactQueryV3&amp;original=https:\/\/react-query-v3.tanstack.com\/\">React Query<\/a>&nbsp;&#8211; Powerful asynchronous state management for TS\/JS, React, Solid, Vue, and Svelte<\/li>\n\n\n\n<li><a href=\"https:\/\/betterprogramming.pub\/7-tips-for-using-react-query-in-large-projects-22ccc49d61c2\">7 Tips for Using React Query in Large Projects<\/a>\u00a0&#8211; Better Programming<\/li>\n\n\n\n<li><a href=\"https:\/\/www.copycat.dev\/blog\/reactjs-build-production\/\">Optimize Performance with Reactjs Build Production<\/a><\/li>\n<\/ul>\n\n\n\n<h2 id=\"rtoc-15\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#video-on-react-query-and-examples\"><\/a>Video on React Query and Examples<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"React Query Crash Course\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/NQULKpW6hK4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"ReactJS Course [10] - React-Query Tutorial | How to Properly Fetch Data in React\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/SYXvHXOJzwc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"React Query Tutorial for Beginners vs Redux, Axios with CRUD Example\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/lLWfZL-Y8lM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>If you\u2019re looking out for cool React tools that\u2019ll help you to write component code faster and be production ready faster than your competition, don\u2019t forget to check out the&nbsp;<a href=\"http:\/\/www.copycat.dev\/\">CopyCat plugin<\/a>&nbsp;for React!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/www.copycat.dev\/\" style=\"background-color:#7b3beb\">START BUILDING FASTER<\/a><\/div>\n<\/div>\n\n\n\n<p>Happy Coding!<\/p>\n\n\n\n<h2 id=\"rtoc-16\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#is-react-query-good-enough\"><\/a><\/h2>\n\n\n\n<h2 id=\"rtoc-17\"  class=\"wp-block-heading\"><a href=\"https:\/\/gist.github.com\/Eunit99\/b29e158924302aa6d4aeb9fa44972142#outline\"><\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents IntroductionWhat is React Query libraryFeatures of React QueryApollo Client Vs React Query Vs URQL: A Detailed ComparisionIs React Query good enough?Benefits of using React Query in your React applicationSteps to use React Query Library to fetch data from APIGetting started with your React appSetup your development environmentGetting started with React QueryTutorialAlternatives to [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":998,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[17],"tags":[40,27,83,30],"class_list":["post-960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-how-to","tag-react","tag-react-query","tag-react-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Query Tutorial: Getting Started w\/ Examples - CopyCat Blog<\/title>\n<meta name=\"description\" content=\"In this article, you&#039;ll learn everything you need to know about fetching data and state management with React Query and make it simpler.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.copycat.dev\/blog\/react-query\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Query Tutorial: Getting Started w\/ Examples - CopyCat Blog\" \/>\n<meta property=\"og:description\" content=\"In this article, you&#039;ll learn everything you need to know about fetching data and state management with React Query and make it simpler.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.copycat.dev\/blog\/react-query\/\" \/>\n<meta property=\"og:site_name\" content=\"CopyCat Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-26T06:45:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-23T03:13:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/08\/query.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Emmanuel Uchenna\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emmanuel Uchenna\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Query Tutorial: Getting Started w\/ Examples - CopyCat Blog","description":"In this article, you'll learn everything you need to know about fetching data and state management with React Query and make it simpler.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.copycat.dev\/blog\/react-query\/","og_locale":"en_US","og_type":"article","og_title":"React Query Tutorial: Getting Started w\/ Examples - CopyCat Blog","og_description":"In this article, you'll learn everything you need to know about fetching data and state management with React Query and make it simpler.","og_url":"https:\/\/www.copycat.dev\/blog\/react-query\/","og_site_name":"CopyCat Blog","article_published_time":"2022-08-26T06:45:50+00:00","article_modified_time":"2023-02-23T03:13:21+00:00","og_image":[{"width":2240,"height":1260,"url":"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/08\/query.png","type":"image\/png"}],"author":"Emmanuel Uchenna","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emmanuel Uchenna","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.copycat.dev\/blog\/react-query\/","url":"https:\/\/www.copycat.dev\/blog\/react-query\/","name":"React Query Tutorial: Getting Started w\/ Examples - CopyCat Blog","isPartOf":{"@id":"https:\/\/www.copycat.dev\/blog\/#website"},"datePublished":"2022-08-26T06:45:50+00:00","dateModified":"2023-02-23T03:13:21+00:00","author":{"@id":"https:\/\/www.copycat.dev\/blog\/#\/schema\/person\/14d1af0e7cf3c602098c4a5476a60c53"},"description":"In this article, you'll learn everything you need to know about fetching data and state management with React Query and make it simpler.","breadcrumb":{"@id":"https:\/\/www.copycat.dev\/blog\/react-query\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.copycat.dev\/blog\/react-query\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.copycat.dev\/blog\/react-query\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.copycat.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"React Query Tutorial: Getting Started with Fetching Data and State Management with Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.copycat.dev\/blog\/#website","url":"https:\/\/www.copycat.dev\/blog\/","name":"CopyCat Blog","description":"Perfect the art of copying code","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.copycat.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.copycat.dev\/blog\/#\/schema\/person\/14d1af0e7cf3c602098c4a5476a60c53","name":"Emmanuel Uchenna","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copycat.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ad8b6a83415f2708e437768feb16d3da?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ad8b6a83415f2708e437768feb16d3da?s=96&d=mm&r=g","caption":"Emmanuel Uchenna"},"url":"https:\/\/www.copycat.dev\/blog\/author\/emmanuel-uchenna\/"}]}},"jetpack_featured_media_url":"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/08\/query.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts\/960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/comments?post=960"}],"version-history":[{"count":10,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts\/960\/revisions"}],"predecessor-version":[{"id":3501,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts\/960\/revisions\/3501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/media\/998"}],"wp:attachment":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/media?parent=960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/categories?post=960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/tags?post=960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}