2

我目前正在学习 NextJS + Apollo，但遇到了一个问题。由于getInitialProps不推荐我使用getServerSideProps. 在这里，我使用此代码来获取道具服务器端并填充组件：

export async function getServerSideProps() {
  // eslint-disable-next-line no-debugger
  const apolloClient = initializeApollo();

  await apolloClient.query({
    query: GET_BANNER_DATA,
  });

  return addApolloState(apolloClient, {
    props: {},
  });
}

问题是getServerSideProps只能在页面级别而不是组件上使用。因此，我必须为我在此页面上使用的所有组件获取道具。

我怎样才能做到这一点？是否apolloClient.query接受多个查询？或者我应该做些什么来addApolloState发挥作用？

官方文档没有考虑到这一点，我在另一个开源项目中找不到类似的东西。

4

3 回答 3

0

在我看来，解决这个问题有两种可能的选择。对于它们两者，您都需要确保可以在页面级组件中导入必要的查询。我喜欢通过在使用它的组件的文件中定义查询，然后将其导出，这样当您描述的页面出于性能原因需要它时，他们可以导入它并保持相对干燥。

从那里，我将假设查询不相互依赖（即，一个查询的结果被输入到下一个查询的变量中）。

解决方案 1 涉及将两个查询组合成一个查询，并发出该请求。我还没有弄清楚。

但是，解决方案 2 涉及利用 Promises，特别是Promise.all

const query1 = apolloClient.query({
    query: GET_BANNER_DATA,
  });

const query2 = apolloClient.query({
    query: SOME_OTHER_QUERY,
  });

Promise.all([query1, query2]).then(
    (responses) => {
      // Do some manipulation of the data responses
    }
  );

return addApolloState(apolloClient, {
    // You'll pass whatever props you need for the page to render here,
    // but shouldn't need to do anything for the sub-components.
    // When they go to make their queries, the data will already be in the local Apollo cache
    props: {},
  });
于 2021-08-31T18:43:40.380 回答
0

I think getServerSideprops should only be used for the page itself. However on the page you can include multiple components and have each of them query for their own data client side.

const Page = () => {
  return <Component/>
}

...

const Component = () => {
  // do query here
}
于 2021-08-03T13:04:02.530 回答
0

您可以在一个查询中组合查询。让我给你举个例子。

query posts($month: Int!) {
  posts(month: $month) {
    id,
    name,
  }
}

query notes($month: Int!) {
  notes(month: $month){
    id,
    name,
  }
}

可以合并为一个：

query postsAndNotes($month: Int!) {
  posts(month: $month) {
    id,
    name,
  }
  notes(month: $month){
    id,
    name,
  }
}

查询结果会有帖子和笔记对象。

于 2021-08-03T13:09:13.533 回答