使用 Next Js getServerSideProps 进行 Apollo 查询？

Posted 2023-03-10

【中文标题】使用 Next Js getServerSideProps 进行 Apollo 查询？

【英文标题】：Apollo query within NextJS's getServerSideProps?

【发布时间】：2020-09-29 23:01:14

【问题描述】：

我正在将 NextJS 与 Apollo 一起使用。文档不多说，但指向这个 repo：https://github.com/vercel/next.js/tree/canary/examples/with-apollo

使用此代码：

export async function getStaticProps() 
  const apolloClient = initializeApollo()

  await apolloClient.query(
    query: ALL_POSTS_QUERY,
    variables: allPostsQueryVars,
  )

  return 
    props: 
      initialApolloState: apolloClient.cache.extract(),
    ,
    unstable_revalidate: 1,
  

我觉得这很丑，所以我尝试使用钩子：

const res = useQuery(ALL_POSTS_QUERY);

但我得到一个错误：

错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一：

那么你不能在getStaticProps 和getServerSideProps 中使用钩子吗？如果是这样，是否有更好的语法来进行 GraphQL 查询？

【问题讨论】：

有这个库，但它提到 getInitialProps 这不是在 Next 9 github.com/lfades/next-with-apollo中获取数据的当前方式@

【参考方案1】：

您可以使用 GraphQL 代码生成器来改进它。

例如，我正在做类似的事情，我的代码如下所示：

const response = await apolloClient.query<ViewerQuery>(
  query: ViewerDocument,
);

其中ViewerQuery 和ViewerDocument 由GraphQL 代码生成器生成。

【讨论】：

嗨！我在 getServerSideProps 中使用相同的代码，你能给我一些建议吗？是否可以在每个页面上初始化 apollo 以发送请求？我的目标是检查现有的动态路线

我不确定创建一个新的 apollo 客户端有多轻量级。我认为这还不错，与获取数据、执行 s-s-r 等相比，创建新对象应该可以忽略不计。如果您担心，可以测量它。需要注意的一点是，你在服务端和客户端（浏览器）上的 apollo 客户端会有不同的缓存，这可能会导致数据变异后出现一些不一致的结果。

感谢@arcticmatt 的回答！你能帮我解决我的问题吗？如果需要，我可以创建另一个 *** 问题。我试图为我的动态路由强制使用 404 状态代码，但是每个页面上的 apollo 客户端初始化需要一些延迟，并且我失去了主要的 apollo 技巧 - 缓存。目前我正在检查 getServerSideProps 中的现有路由。如果我在 apollo 钩子中检查它，它会返回 202 而不是 404 状态码。非常感谢！

***.com/questions/63877962/…这个问题和我的问题类似