Question

我正在将NextJS与Apollo一起使用。文档并没有说太多，但指向此仓库：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);

但是我得到一个错误：

错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

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

Answer 1

您可以使用GraphQL代码生成器使它变得更好。

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

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

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

NextJS的getServerSideProps中的Apollo查询？

1 个答案: