Apollo Client 第 3 版缓存更新延迟答案

【问题标题】：Apollo Client version 3 cache update delayApollo Client 第 3 版缓存更新延迟
【发布时间】：2021-04-18 15:01:22
【问题描述】：

我拥有的 React 应用程序正在使用 location.pathname 使用 useQuery 向我的 graphql 端点发送请求，这意味着每当我更改路由时，它都会向服务器发送请求以接收新数据。我遇到的问题是，当它处于加载状态时，我想保留当前数据，所以当你点击视频时它应该像 Youtube 一样。页面顶部应该有一个进度条，当收到数据时，我会显示新的新数据。

但是在从版本 2 迁移到版本 3 之后，我失去了这个功能。现在它会重定向到没有数据的新页面，并在收到数据几秒钟后显示新数据。

如何在向服务器发送请求时保持当前缓存状态？

顺便说一句，我也有 SSR。

以下是我的设置：

server.ts

const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  ssrMode: true,
  link: from([errorLink, httpLink]),
  cache,
  typeDefs,
  ssrForceFetchDelay: 100,
});

client

const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  link: from([errorLink, httpLink]),
  cache: cache.restore(apolloState || {}),
  typeDefs,
});

const usePage = <T = Record<'page', Page>>(options?: Options): QueryResult<T> => {
  const { pathname } = useLocation();

  return useQuery<T>(getQuery(options?.fragmentName, options?.fragment), {
    variables: {
      pathname: options?.pathname || pathname,
    },
    ...(options?.queryOptions || {}),
    errorPolicy: 'all',
  });
};

App

const App = () => {
  const content = usePage();

  if (content.loading) {
      return <ProgressBar />;
  }

  if (!content) {
      return <NoContent action={pageContent.refetch} />;
  }

  return <Page data={content.data} />
}

【问题讨论】：

标签： javascript reactjs apollo react-apollo

【解决方案1】：

我发现有一个名为previousData 的新属性，以便我们可以跟踪收到的最后一个数据。这样我们就会有类似的东西：

const {previousData, data = previousData,} = useQuery()
data?.doSthHere

您也可以查看此链接： https://github.com/apollographql/apollo-client/issues/6603#issuecomment-700282431

【讨论】：