apollo客户端如何在nextjs中使用SSR抓取数据？

Question

我正在尝试将apollo-client与 nextjs 一起使用。 在这里我想在getServerSideProps中获取数据。 假设我有 2 个组件和一页 -

section.tsx这是组件 1

const Section = () => {
    return (
        <div>
            Section
        </div>
    );
};
export default Section;

mobile.tsx这是组件 2

const Mobile = () => {
    return (
        <div>
            Mobile
        </div>
    );
};
export default Mobile;

现在我将这两个组件调用到主页中。

index.tsx -

const Home: NextPage = () => {
  return (
    <Container disableGutters maxWidth="xxl">
      <Section />
      <Mobile />
    </Container>
  );
};
export default Home;

export const getServerSideProps: GetServerSideProps = async () => {
  const { data } = await client.query({ query: GET_USER_LIST })
  return { props: {} }
}

在这里你可以看到在getServerSideProps中我已经获取了我的数据。

我的问题是如何在不传递道具的情况下直接访问此数据表单Section组件和Mobile组件。 我不想传递 props，因为如果我的组件树会更长，那么 props 将很难管理。

从appollo文档，我已经知道apollo client对redux state 经理做同样的事情。 所以请告诉我如何从已经在getServerSideProps中获取的任何组件访问这些数据。 可能吗？。 如果不是那么怎么解决呢。

Answer 1

如果你想避免道具钻探，使用context api 怎么样？ 通过将数据放入上下文中，您可以从任何子组件访问它。 从 SSR 中获取数据并将其放入上下文中。