T
TanStack•4y ago
absent-sapphire

refetch data after 10 seconds

Hi! I'm using useQuery like this 
const { isLoading, error, data, refetch } = useQuery(['scoreboardData'],getScoreboard)
useEffect(() => {
    const interval = setInterval(() => {
        refetch()
    }, TIME_REFETCH)
    return () => {
            clearInterval(interval)
    }
}, [refetch])
<Scoreboard data={data.data} />
const { isLoading, error, data, refetch } = useQuery(['scoreboardData'],getScoreboard)
useEffect(() => {
    const interval = setInterval(() => {
        refetch()
    }, TIME_REFETCH)
    return () => {
            clearInterval(interval)
    }
}, [refetch])
<Scoreboard data={data.data} />
However, the Scoreboard data isn't updated each refetch call
5 Replies
flat-fuchsia
flat-fuchsia•4y ago
Hi. Set refetchInterval (ms) in useQuery options.
absent-sapphire
absent-sapphireOP•4y ago
I've done that but even though the api is constanly sent, the "data" does not change
flat-fuchsia
flat-fuchsia•4y ago
Please provide minimal reproduction code or query snippet
absent-sapphire
absent-sapphireOP•4y ago
const Dashboard = () => {
    const { isLoading, error, data } = useQuery(
        ['scoreboardData'],
        getScoreboard,
        {
            refetchInterval: TIME_REFETCH,
        }
    )

    return (
      <Scoreboard data={data} />
    )
}

const Scoreboard = ({data}) => {
  return (
    {data ? data.map((item) => {
        return (
            <AnimatedRow
              item={item}
              key={item.id}
            />
          )
      })}
  )
}
const Dashboard = () => {
    const { isLoading, error, data } = useQuery(
        ['scoreboardData'],
        getScoreboard,
        {
            refetchInterval: TIME_REFETCH,
        }
    )

    return (
      <Scoreboard data={data} />
    )
}

const Scoreboard = ({data}) => {
  return (
    {data ? data.map((item) => {
        return (
            <AnimatedRow
              item={item}
              key={item.id}
            />
          )
      })}
  )
}
The item will go down all the other children components
flat-fuchsia
flat-fuchsia•4y ago
Maybe you api doesn't update data each 10 sec 🙂 Also be sure TIME_REFETCH is integer in ms. Try to check network activity in devtools Network tab Here is minimal code with refetchInteval https://codesandbox.io/s/happy-river-gfnhqx?file=/src/App.js
maxshy
CodeSandbox
happy-river-gfnhqx - CodeSandbox
happy-river-gfnhqx by maxshy using @tanstack/react-query, react, react-dom, react-scripts

Did you find this page helpful?