Fetch new data every 30 seconds using useQuery in React

When working with React and TypeScript, it’s common to use the useQuery hook from the popular library react-query to fetch data from an API. However, there may be scenarios where you need to automatically fetch new data at regular intervals, such as every 30 seconds. In this blog post, we will explore how to achieve this using the useQuery hook in React.

First, let’s assume that you have already set up your React project with the necessary dependencies, including react-query. If you haven’t done so, you can install it by running the following command:

npm install react-query

Once you have react-query installed, you can start using the useQuery hook to fetch data from an API. Here’s an example of how you can use it:

import React from 'react';
import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

const MyComponent = () => {
  const { data, isLoading } = useQuery('myData', fetchData);

  if (isLoading) {
    return Loading...
;
  }

  return (
    

      
My Data
      {data}
    
  );
};

export default MyComponent;

In the above code snippet, we define a function fetchData that fetches data from an API endpoint. We then use the useQuery hook to fetch the data and store it in the data variable. The isLoading variable is used to handle the loading state while the data is being fetched.

Now, let’s see how we can modify the code to automatically fetch new data every 30 seconds. We can achieve this by using the refetchInterval option provided by react-query. Here’s an updated version of the code:

import React from 'react';
import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

const MyComponent = () => {
  const { data, isLoading } = useQuery('myData', fetchData, {
    refetchInterval: 30000, // 30 seconds in milliseconds
  });

  if (isLoading) {
    return Loading...
;
  }

  return (
    

      
My Data
      {data}
    
  );
};

export default MyComponent;

In the updated code, we pass an options object as the third argument to the useQuery hook. Inside the options object, we set the refetchInterval property to 30000, which represents 30 seconds in milliseconds. This tells react-query to automatically refetch the data every 30 seconds.

With this modification, your component will now automatically fetch new data every 30 seconds, ensuring that your UI stays up to date with the latest information from the API.

That’s it! You have successfully learned how to fetch new data every 30 seconds using the useQuery hook in React. This technique can be useful in various scenarios where you need to keep your data up to date in real-time.

Feel free to explore more about react-query and its capabilities to further enhance your React applications.

Happy coding!