如何在reactQuery中添加自动反射？

Question

您好，我正在使用 graphql API，我需要在一段时间（例如 3 秒）后自动重新获取数据。我正在使用reactQuery并尝试了一些像setInterval这样的技巧，但它工作不正常。

const { data, isLoading } = useQuery(['get_trnx_logs', quoteTokenAddress], () => {
  return bitqueryService.getTokenPairTranxLogs(quoteTokenAddress)
})

const feedData = data?.ethereum.dexTrades
? settingTranxLogData(quoteTokenAddress, data.ethereum.dexTrades)
: [] 

请帮我解决这个问题，或者 Ajax 也有办法做到这一点吗？

Answer 1

react-query 支持

refetchInterval

选项：

useQuery(key, fn, { refetchInterval: 5000 })

每 5 秒重新获取一次。

Answer 2

React Query 中的自动重新获取可以通过使用

refetchInterval

、

refetchOnWindowFocus

和

refetchOnReconnect

选项设置重新获取行为来实现。

import { useQuery } from '@tanstack/react-query';

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

function MyComponent() {
  const { data, isLoading } = useQuery(['dataKey'], fetchData, {
    refetchInterval: 5000, // Auto-refetch every 5 seconds
  });

  if (isLoading) return <div>Loading...</div>;

  return <div>Data: {JSON.stringify(data)}</div>;
}