Next.js 在 getServerSideProps 中使用 apollo 客户端缓存

Question

我将 Next.js 与 apollo 客户端一起使用。我需要在服务器端和客户端之间创建一个无缝的工作流程。在我的 ssr 页面中，我在 getServerSideProps 中运行查询并将创建的 apollo 缓存发送到浏览器，如下所示；

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: CitiesQuery,
    variables: {
      name: cityParamVar(),
    },
  });

  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),
    },
  };
}

在客户端，我的 apollo 缓存已经充满了查询数据，太棒了!然后，我在客户端运行第二个查询，所以 apollo 缓存也会有我的第二个查询结果。然后，我导航到主页，然后再次返回到我的页面。当然 getServerSideProps 会再次运行。在这里，在 getServerSideProps 函数中，是否有可能获得与我在客户端运行的第二个查询结果缓存的相同的 apollo？

我们能否在客户端和服务器之间创建一个完全无缝的工作流程？

我看到示例只是在 getServerSideProps 中运行 const apolloClient = initializeApollo()。所以，我不会有更新的缓存!我错过了什么吗？

Answer 1

如果我对您的问题的理解正确，那么目前似乎没有一种干净的方法可以做到这一点。在使用 React Query 时，我一直在寻找解决相同问题的方法。

这feature request discussion at Next.js GitHub repo应该提供一些有用的背景信息。您还可以尝试一些棘手的解决方法。