Search code examples
reactjstypescriptapollo

I want to update every 3 seconds without using react apollo refetch

I am using react apollo.
I want to update the user.percent of the progressbar component every 3 seconds without using apllo's refetch.

import {useInterval} from 'beautiful-react-hooks';

const ProgressBar = () => {
  const {userId} = useParams<{userId: string}>();
  const {data: {user = null} = {}, refetch: refetchUser} =
    useUserQuery({
      variables: {uuid: userId},
      skip: !userId,
    });
  if (!user) return null;

  useInterval(() => {
    refetchUser();
  }, 3000);

  return (
     <p>{user.percent}</p>
  )
}
Solution

  • You can use Apollo's polling feature to execute query evey X millisecond.

      const {data: {user = null} = {}, startPolling, stopPolling} = useUserQuery({
      variables: {uuid: userId},
      skip: !userId,
      pollInterval: 3000, // <-- refetch every 3 sec

    });

    You can start and pause/stop polling using startPolling and stopPolling functions respectively.