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

Question

I am try to use apollo-client with nextjs. Here I want to fetch data in getServerSideProps . Suppose I have 2 components and one page-

section.tsx this is component-1

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

mobile.tsx this is component 2

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

Now I call this two component into home page.

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: {} }
}

Here you can see that in getServerSideProps I already fetch my data.

My question is How can I directly access this data form Section component and Mobile component without passing props. I don't want to pass props, because if my component tree will be more longer, then it will be difficult to manage props.

From appollo docs, I alreay know that apollo client do the same with redux state manager. So please tell me how can I access this data from any component that already fetched in getServerSideProps . Is it possible?. If not then how can what is the solutions.

Answer 1

How about using context api if you want to avoid prop drilling? By putting data into context, you can access it from any child component. Get the data from the SSR and put it into the context.