Skip to main content

Command Palette

Search for a command to run...

Using the react-query library

Published
•2 min read•View as Markdown
Using the react-query library
K

I am a Web Developer from India. I have worked as a Web Developer. Sharing my bit of knowledge on Web Development to make it less complicated for you all.

Here is an example of using the react-query library to handle API calls in a React application:

Install the react-query library:

npm install react-query

Wrap your application with the QueryClient provider:

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Your application components here */}
    </QueryClientProvider>
  );
}

Use the useQuery Hook to fetch data in your component:

import { useQuery } from 'react-query';

function Example() {
  const { data, status } = useQuery('data', () => axios.get('https://api.example.com/data'));

  if (status === 'loading') return <div>Loading...</div>;
  if (status === 'error') return <div>Error</div>;

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

You can also pass options to the useQuery Hook to customize the behavior of the query:

const { data, status } = useQuery('data', () => axios.get('https://api.example.com/data'), {
  retry: 3,
  retryDelay: 1000,
  stale

Time: 60000,
});

In this example, the `useQuery` Hook takes 3 arguments: the key of the query, 
the function that returns the data, and the options. The key is used to identify the query and determine if it should be refetched or not. The function that returns the data can be a promise or a callback. The options are used to customize the behavior of the query, such as retrying the request on failure, or setting a stale time after which the data should be refetched.
It is important to note that `react-query` provides a lot of features such as caching, refetching, pagination, 
and more that help you to handle the API requests easily.
Please note that in this example, `https://api.example.com/data` should be replaced with the actual 
API endpoint you want to fetch data from.

More from this blog

Kamran Ahmad

10 posts