Skip to main content

React Query

Provides performant and powerful data synchronization for React.

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.

Refer to official documentation for detailed usage. →

tip

All required configurations will be handled automatically by CLI as long as you choose plugins during the project creation phase.

src/App.tsx
import { QueryClient, QueryClientProvider } from "react-query";
import Home from "pages";
function App(): JSX.Element {  const queryClient = new QueryClient();  return (    <QueryClientProvider client={queryClient}>      <div className="App">        <Home />      </div>    </QueryClientProvider>  );}
export default App;
caution

If you didn't choose the plugin during project creation phase, you must update your src/App.tsx file as above after installing required package to add it.

Example usage useQuery:#

components/reactQueryExample/index.tsx
import { useQuery } from "react-query";
const API_URL = "https://official-joke-api.appspot.com/jokes/programming/random";
export const ReactQueryExample = () => {
  const { data } = useQuery("random-programming-joke", () =>     fetch(      API_URL    ).then(res => res.json())  );};

Adding react-query to your project later#

If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.

  • Install react-query package.
npm install react-query