How can I use getDataFromTree for ssr | apollo client

[lakshmajee]

I want to render some of the pages on serverside with minimal content and the content will be fetched by using a Graphql (apollo) query.

How can I use getDataFromTree with apollo/ssr, to query for graphql on the server side!
https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client-auth

[JClackett]

recommended approach is to use getStaticProps or getServerSideProps now, as shown in the with-apollo example

[lakshmajee]

Yup that right but that's not the answer. we can ssr with getServerSideProps , but use of getServerSideProps reduces reusability with apollo client queries. (This is not the case with simple REST API's) .
I need a way to do this in some root component like _app.tsx .

SOmething like this. This library is not in sync with latest apollo/client.

[Si3rr4wow]

What @ananth-minions said is soo key 🔑 . The logic duplication between getServerSideProps and useQuery is really hard to manage. Without the ability to hijack reactDOM.render in nextjs I can't see a way to work in Apollo's recommended approach to ssr, the getDataFromTree function. I don't really know if this is something for Apollo or Next to fix or if it is simply the case that they are just a bad match.

[adrianescat]

@Si3rr4wow Did you find something? I have the same problem here

[shshaw]

Also currently experimenting with integrating Apollo server-side with getDataFromTree and a custom Next.js Document. Interested in seeing if you all have had any breakthroughs with this.

[shshaw]

Passing along some findings for reference.

A really rough approach that somewhat works is overriding Document's getInitialProps function to run the ctx.AppTree through getDataFromTree. Main problem is juggling the Apollo client around between the Document and App and updating the Apollo cache.

import Document from 'next/document';
import { getDataFromTree } from '@apollo/client/react/ssr';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    // NOTE: ctx appears to be empty if the page does not have a getServerSideProps() export

    // Ideally we would run and merge with initialProps to get `head` and `style`, but see below...
    // const initialProps = await Document.getInitialProps(ctx);

    const client = new ApolloClient( ... );
    const html = await getData(<ctx.AppTree pageProps={{ client }} />); // Have to pass it in through pageProps in this strange way.

    const initialState = client.extract(); // Can't do much with this at this point.

    return { html }; 
  }
}

If you run the original document's Document.getInitialProps like shown in a lot of the Next examples, it renders the AppTree twice which isn't ideal. In my scenario, it actually breaks a bit because I'm relying on some authentication for the Apollo client.

I also had a little bit of success doing more of the work in the _app.js. Hard to say if that will be a better approach; it's certainly more difficult due to the Async nature and the delivery of the page.

[shshaw]

Also found this example by @Tylerian, but it's 2 years old so it may not work directly https://gist.github.com/Tylerian/16d48e5850b407ba9e3654e17d334c1e

[shshaw]

Hey! I got an adapted version of @Tylerian's gist working, and without needing getDataFromTree and double-rendering the page!

Basically: in your ApolloClient initialization, store the created Apollo in a "global" and return that. This way you don't have to juggle passing the client around via props.

This is the basic setup:

// apollo.js

const isServer = typeof window === 'undefined';
const windowApolloState = !isServer && window.__NEXT_DATA__.apolloState;

let CLIENT;
export default function getApolloClient(){
  if ( !CLIENT ) 
    CLIENT = new ApolloClient({ 
       ssrMode: true, 
       cache: new InMemoryCache().restore(windowApolloState) // Client-side cache
    });
  }

  return CLIENT;
}

// _document.js

class DocumentWithApollo extends Document {
  // Reference: https://gist.github.com/Tylerian/16d48e5850b407ba9e3654e17d334c1e
  constructor(props) {
    super(props);

    /**
     * Attach apolloState to the "global" __NEXT_DATA__ so we can populate the ApolloClient cache
     */
    const { __NEXT_DATA__, apolloState } = props;
    __NEXT_DATA__.apolloState = apolloState;
  }

  static async getInitialProps(ctx) {
    /**
     * Initialize and get a reference to ApolloClient, which is saved in a "global" variable.
     * The same client instance is returned to any other call to `getApolloClient`, so _app.js gets the same authenticated client to give to ApolloProvider.
     */
    const apolloClient = getApolloClient();

    /**
     * Render the page as normal, but now that ApolloClient is initialized and authenticated, each query will actually work and will fill up our cache.
     */
    const initialProps = await Document.getInitialProps(ctx);

    /**
     * Extract the cache to pass along to the client so the queries are "hydrated" and don't need to actually request the data again!
     */
    const apolloState = apolloClient.extract();

    return { ...initialProps, apolloState };
  }
}

export default DocumentWithApollo;

// _app.js
export default function App(props) {
  const { Component, pageProps } = props;
  const client = getApolloClient();

  return (
      <ApolloProvider client={client}>
          <Component {...pageProps} />
      </ApolloProvider>
  );
}

[adrianescat]

I found a way, I don't know if it's the best but is working:

in the nextjs's _app.js

import { ApolloProvider } from '@apollo/client'
import { appWithTranslation } from 'next-i18next'
import { AppProps } from 'next/app'
import Head from 'next/head'
import React from 'react'
import { ApolloClient } from '../src/graphql/ClientGraphql'

const App = ({ Component, pageProps }: AppProps) => {
  if (pageProps?.apolloStaticCache) {
    ApolloClient.restore(pageProps?.apolloStaticCache)
  }
  return (
    <>
      <Head>
        <meta charSet='utf-8' />
        <meta name='viewport' content='width=device-width, initial-scale=1, min-width=640' />
        <meta name='theme-color' content='#000000' />
        <meta name='description' content='My app' />
        <link rel='shortcut icon' href='/favicon.ico' key='shortcutIcon' />

        <link rel='stylesheet' href='/assets/css/reset.css' />
        <link rel='stylesheet' href='/assets/css/override.css' />
        <link rel='stylesheet' href='/assets/css/fonts.css' />

        <link rel='manifest' href='/manifest.json' />
        <title>My App</title>
      </Head>
      <ApolloProvider client={ApolloClient}>
        <Component {...pageProps} />
      </ApolloProvider>
    </>
  )
}

export default appWithTranslation(App)

Where for me, the ApoloClient is :

export const ApoloClient = new ApolloClient({
  ssrMode: typeof window === 'undefined',
  connectToDevTools: true,
  link: new HttpLink({ uri: `${process.env.NEXT_PUBLIC_REACT_APP_API_URL}/graphql`, fetch }),
  cache: new InMemoryCache(),
  name: 'my-app-client',
  version: '1.0',
  queryDeduplication: false,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network'
    }
  }
})

And in a page where I use getServerSideProps:

import { ApoloClient } from '../src/graphql/ClientGraphql'

export const getServerSideProps: GetServerSideProps = async context => {
  const userId = (context.query.userId as string) || null

  let postsByUserIdQuery: ApolloQueryResult<PostsByUserIdData>

  try {
    postsByUserIdQuery = await ApoloClient.query<PostsByUserIdData, PostsByUserIdVars>({
      query: POSTS_BY_USER,
      variables: { userId },
      errorPolicy: 'ignore'
    })
  } catch (error) {
    // TODO: handle errors
    postsByUserIdQuery = { data: { posts: [] }, loading: false, networkStatus: 8 }
  }

  return {
    props: {
      ...(await serverSideTranslations(context.locale as string, ['common', 'viewer'])),
      userId,
      postsByUserIdQuery,
      apolloStaticCache: ApoloClient.cache.extract()
    }
  }
}

So, with this, I can do readQuery calls inside the JSX component and works good

const query = ApoloClient.readQuery<PostsByUserIdData>({
    query: POSTS_BY_USER,
    variables: { userId }
  })

On the other hand, I'm using Apollo's reactive variables if those queries have to be updated because of user interactions for example. So after the mutation, in the update method I set the reactive variables again with the new data and the react components are re-rendered because of that

It must be a better way, I know. I will update this if I find something or somebody here comes with a better idea

[shshaw]

I was commenting in one of the threads, but found a proper solution so wanted to bring it top level.

Here's an example using Apollo's getDataFromTree and Next.js's _document.js to server-side render GraphQL queries and fill the Apollo Cache so the client doesn't have to refetch the data.

The main advantages here:

• Relatively simple to implement
• Query as normal with useQuery (no duplication or special methods for SSR queries)
• No special client-side detection/rendering needed in most cases
• Cache hydration so the client doesn't have to re-query data the server already got
• Can enable/disable SSR for all queries (ApolloClient defaultOptions) or only certain ones ( useQuery(..., { ssr: true|false }) ) to optimize page delivery

Code: https://github.com/shshaw/next-apollo-ssr
Live example: https://codesandbox.io/s/github/shshaw/next-apollo-ssr/tree/main/

See comments in _document.js and _apollo.js for the most important bits.

• https://github.com/shshaw/next-apollo-ssr/blob/main/pages/_document.js
• https://github.com/shshaw/next-apollo-ssr/blob/main/data/apollo.js

[shshaw]

@wweaver Hm, I'm not sure why that's not available. I did run into some issues where ctx is not the same for various pages. For example, res / req data not being available on some pages.

Are you able to provide more of an example of how you're using this and exact versions?

[shshaw]

Note for others looking to implement this Apollo SSR Method

Do note that this approach is not as efficient as other Apollo SSR methods involving manual fetches in getServerSideProps calls in each page. However, this method doesn't require any real special setup so as long as you aren't calling an excessive amount of queries and/or your queries aren't forcing too much of the page to re-render then you should be fine. I highly recommend disabling SSR for all queries in the ApolloClient defaultOptions and enabling it selectively for only certain queries that are essential to SSR.

Here's a few review comments from Next.js and Apollo Devs and alternate approaches:

• https://twitter.com/timneutkens/status/1424723427735265281
• https://twitter.com/benjamn/status/1424738860295131141
• https://twitter.com/silevy/status/1425552331614167042

[wweaver]

I was able to get around my particular issue as it had something to do with using the Head component in the _app.tsx. So for now I just removed it. But to note these are the keys that are passed in the context for _document.tsx

[
  'err',           'req',
  'res',           'pathname',
  'query',         'asPath',
  'locale',        'locales',
  'defaultLocale', 'AppTree',
  'renderPage'
]

Yea, I've been working with the Vercel folks on this a little.

I feel like I'm getting close with your example. My problem now is that we add new props in the getStaticProps that aren't available inside the _document.tsx call so our underlying code is failing because those props aren't available.

edit: And we're using next version 11.0.1 at this point.

[shshaw]

Strange.

I wonder if modifying ctx.renderPage might be helpful here: https://nextjs.org/docs/advanced-features/custom-document#customizing-renderpage

Let me know what you find out!

[wweaver]

I'll play around some more. This approach definitely cleans up a lot of our code surrounding it. We had this logic in helper functions that wrapped the getServerSideProps and getStaticProps. Which if we can't get the parameters figured out we might have to stick with that approach for now.

[caelinsutch]

Is there a way to use query parameters? For example I have a page [id].tsx, I haven't found a good way to use the id in the query. The useRouter hook won't render on server-side I think to populate the useQuery which needs id as a variable.

[maosmurf]

FWIW https://github.com/lfades/next-with-apollo solves all my problems:

• one HOC for _app or per-page
• no need to rewrite queries in getServerSideProps / getInitialProps
• works with getDataFromTree
• ssr/ssg
• Pretty well documented, too!

Is there a way to use query parameters? For example I have a page [id].tsx, I haven't found a good way to use the id in the query. The useRouter hook won't render on server-side I think to populate the useQuery which needs id as a variable.

You could use context.query / context.params in dynamic methods and return notFound: true, too!

They even have an example with router: https://github.com/lfades/next-with-apollo/blob/master/integration/using-app/pages/router.tsx

[marcesengel]

In case anybody stumbles upon this - for us the following works (with other components taken from @shshaw's answer). It doesn't mess with Next rendering logic by applying the getDataFromTree logic instead of calling it (see source) - the RenderPromises helper is injected using enhanceApp and rendering is done using await Document.getInitialProps(ctx).

This will need n + 1 passes (other solutions need at least n + 2 passes), where n is the number of nested queries. It's the minimum possible amount of passes for dynamic detection, as you'll always need to do a final pass after all data was fetched.

type ExtraProps = { apolloState: NormalizedCacheObject }

export default class MyDocument extends Document<ExtraProps> {
  constructor(props: DocumentProps & ExtraProps) {
    super(props)

    props.__NEXT_DATA__.props.apolloState = props.apolloState
  }

  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps & ExtraProps> {
    const originalRenderPage = ctx.renderPage

    // for usage of renderPromises see https://github.com/apollographql/apollo-client/blob/main/src/react/ssr/getDataFromTree.ts
    const renderPromises = new RenderPromises()
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => {
          const ApolloContext = getApolloContext()

          return (
            <ApolloContext.Provider value={{ renderPromises }}>
              <App {...props} />
            </ApolloContext.Provider>,
          )
        },
      })

    let initialProps = await Document.getInitialProps(ctx)
    while (renderPromises.hasPromises()) {
      try {
        await renderPromises.consumeAndAwaitPromises()
        initialProps = await Document.getInitialProps(ctx)
      } finally {
        renderPromises.stop()
      }
    }

    return {
      ...initialProps,
      apolloState: apolloClient.extract(),
    }
  }
}

[dev-yesman]

@marcesengel any there apolloClient in _document.tsx ? I can't see variable.