Using graphQL apollo refetch will also update other components

I’m using react and Apollo. I am using refetch in the ProgressBar, which is updated … Read more Using graphQL apollo refetch will also update other components

I’m using react and Apollo.
I am using refetch in the ProgressBar, which is updated every 3 seconds.
I’m using refetch to update every 3 seconds, and the same screen is being updated by a different component, MemoBox.
I am using refetch in the ProgressBar, which updates every 3 seconds.
I do not want MemoBox to update every 3 seconds.

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

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

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

const MemoBox = () => {
  const {userId} = useParams<{userId: string}>();
  const {data: {user= null} = {}} = useUserQuery({
    variables: {uuid: userId},
    skip: !userId,
  });
  return (
    <Memo dangerouslySetInnerHTML={{__html: user.memoHtml}} />
  )
}

Source: React – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *