How to use SSR data fetching in nextjs with apollo client?

[nekmart]

I am try to use apollo-client with nextjs. Here I want to fetch data in getServerSideProps. Suppose I have two 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

[lougroshek]

You can run the query server-side and pass the returned cache into a client-side instance of ApolloClient. There are lots and lots of examples of that.

Some of us are using next-with-apollo to leverage getDataFromTree within NextJS. That way the queries can reside in the child components themselves and you don't have to know at the top level what to query. It's going against NextJS recommendations for performance, and if you are dynamically inserting components into your SSR page you're better off just writing your own renderer. NextJS wants you to always know at the top level exactly what your queries will be, which runs counter to the way Apollo encourages wiring a component's UI directly up to a specific query.

[phryneas]

Hey everyone, I just wanted to let you all know that we released a package to support React Server Components and the new streaming SSR for Client Components that the Next.js App router offers.

If you are still using the pages router, you can check out this example repository that contains a full SSR setup to make use of getServerSideProps: https://github.com/apollographql/next-apollo-example. The suggestion that @lougroshek linked is another valid way of doing this.

You can find the package repository over here: @apollo/experimental-nextjs-app-support
Here is an introductory blog post: Using Apollo Client with Next.js 13: releasing an official library to support the App Router
And if you want to dive deep in the tech, and why we made certain limitations, there is a very long RFC with a discussion going on in RFC: The Next.js "App Router", React Server Component & "SSR with Suspense" story

I will be closing this issue here and would love it if you could give us feedback and suggestions for improvements over in the other repo!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.