Apollo Client 版本 3 缓存更新延迟

编程问答 2022-05-30

问题描述

我拥有的 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,cache: cache.restore(apolloState || {}),});

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

解决方法

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

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

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

apolloapolloapollojavascriptreact-apolloreactjsreactjsreactjsreactjs