时间戳

首页 > 解决方案 > React using graphQL apollo refetch 也会更新其他组件

reactjs - React using graphQL apollo refetch 也会更新其他组件

问题描述

我正在使用反应和阿波罗。
我在 ProgressBar 中使用 refetch，它每 3 秒更新一次。
我正在使用 refetch 每 3 秒更新一次，并且同一屏幕正在由不同的组件 MemoBox 更新。
我在 ProgressBar 中使用 refetch，它每 3 秒更新一次。
我不希望 MemoBox 每 3 秒更新一次。

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>
  )
}


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

const Box = () => {
 const {userId} = useParams<{userId: string}>();
 const [status] = useQueryParam('status', StringParam);
 const {data: {userId= null} = {}} = useUserQuery({
    variables: {uuid: userId},
    fetchPolicy: 'network-only',
    skip: !userId 
    },
  });

  if (!userId) return null;

  return (
   <>
   <MemoBox/>
   <ProgressBar/>
   </>
   )
}

标签： reactjstypescriptgraphapollo

解决方案

如果您将一个选项传递给进度调用以使用这样的 useUserQuery

const { {data}, refetch: refetchUser} = useUserQuery(
  { variables: { ... },
  {fetchPolicy: "no-cache"}
)

它不应该更新缓存。因此它不应该更新其他组件。你必须玩弄它。

这是 fetchPolicy 上的文档

https://www.apollographql.com/docs/react/data/queries/#supported-fetch-policies

推荐阅读