How to implement next-with-apollo with react-apollo SSR?

[kumarabhirup]

I am using react-apollo with Next.js the way it is illustrated in the example from the Next.js repo.

Complete question detail on Spectrum Next.js community.

[lfades]

Hi @kumarabhirup, is this example from the post not working for you ?

import withApollo from 'next-with-apollo'
import ApolloClient from 'apollo-boost'
function createClient({ headers }) {
  return new ApolloClient({
    uri: `${process.env.ENDPOINT}/graphql`,
    request: operation => {
      operation.setContext({
        fetchOptions: {
          credentials: 'include',
        },
        headers
      })
    }
  })
}
export default withApollo(createClient)

[kumarabhirup]

No that wouldn't, because I also need ssrMode, cache, connectToDevTools for SSR. And If I did that, it gives client.watchQueryis undefined.

Please help 🙏

[lfades]

@kumarabhirup Then add them, it should work, if you get an error please create a reproduction so I can take a look 👍

[kumarabhirup]

Now I get TypeError: Cannot read property 'displayName' of undefined after the implementation.

Here's the GitHub repo: https://github.com/KumarAbhirup/paprink/tree/noLagOnProdPlease

[kumarabhirup]

Error screenshot 👇

[kumarabhirup]

I think we need some change in the with-apollo-client.js file

import React from 'react'
import initApollo from './init-apollo'
import Head from 'next/head'
import { getDataFromTree } from 'react-apollo'

export default App => {
  return class Apollo extends React.Component {
    static displayName = 'withApollo(App)'
    static async getInitialProps (ctx) {
      const { Component, router } = ctx

      let appProps = {}
      if (App.getInitialProps) {
        appProps = await App.getInitialProps(ctx)
      }

      // Run all GraphQL queries in the component tree
      // and extract the resulting data
      const apollo = initApollo()
      if (!process.browser) {
        try {
          // Run all GraphQL queries
          await getDataFromTree(
            <App
              {...appProps}
              Component={Component}
              router={router}
              apolloClient={apollo}
            />
          )
        } catch (error) {
          // Prevent Apollo Client GraphQL errors from crashing SSR.
          // Handle them in components via the data.error prop:
          // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
          console.error('Error while running `getDataFromTree`', error)
        }

        // getDataFromTree does not call componentWillUnmount
        // head side effect therefore need to be cleared manually
        Head.rewind()
      }

      // Extract query data from the Apollo store
      const apolloState = apollo.cache.extract()

      console.log(apollo)

      return {
        ...appProps,
        apolloState
      }
    }

    constructor (props) {
      super(props)
      this.apolloClient = initApollo(props.apolloState)
    }

    render () {
      return <App {...this.props} apolloClient={this.apolloClient} />
    }
  }
}

Error's coming because the code above isn't complying with what withApollo provides.

[kumarabhirup]

I tried using headers by this: withApollo(({headers}) => (headers)),
but again, didn't work.

console.log(withApollo(({headers}) => (headers))) 👇

function (App) {
        var _a;
        return _a = /** @class */ (function (_super) {
                __extends(WithApollo, _super);
                function WithApollo(props) {
                    var _this = _super.call(this, props) || this;
                    _this.apollo = apollo_1.default(client, {
                        initialState: props.apolloState.data
                    });
                    return _this;
                }
                WithApollo.prototype.render = function () {
                    return react_1.default.createElement(App, __assign({}, this.props, { apollo: this.apollo }));
                };
                return WithApollo;
            }(react_1.default.Component)),
            _a.displayName = "WithApollo(" + getDisplayName(App) + ")",
            _a.propTypes = {
                apolloState: prop_types_1.default.object,
                apollo: prop_types_1.default.object
            },
            _a.getInitialProps = function (appCtx) { return __awaiter(_this, void 0, void 0, function () {
                var Component, router, ctx, headers, apollo, apolloState, getInitialProps, appProps, error_1;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            Component = appCtx.Component, router = appCtx.router, ctx = appCtx.ctx;
                            headers = ctx.req ? ctx.req.headers : {};
                            apollo = apollo_1.default(client, { ctx: ctx, headers: headers });
                            apolloState = {};
                            getInitialProps = App.getInitialProps;
                            appProps = { pageProps: {} };
                            if (!getInitialProps) return [3 /*break*/, 2];
                            ctx.apolloClient = apollo;
                            return [4 /*yield*/, getInitialProps(appCtx)];
                        case 1:
                            appProps = _a.sent();
                            _a.label = 2;
                        case 2:
                            if (ctx.res && (ctx.res.headersSent || ctx.res.finished)) {
                                return [2 /*return*/, {}];
                            }
                            if (!(options.getDataFromTree === 'always' ||
                                (options.getDataFromTree === 'ssr' && ssrMode))) return [3 /*break*/, 7];
                            _a.label = 3;
                        case 3:
                            _a.trys.push([3, 5, , 6]);
                            return [4 /*yield*/, react_apollo_1.getDataFromTree(react_1.default.createElement(App, __assign({}, appProps, { Component: Component, router: router, apolloState: apolloState, apollo: apollo })))];
                        case 4:
                            _a.sent();
                            return [3 /*break*/, 6];
                        case 5:
                            error_1 = _a.sent();
                            // Prevent Apollo Client GraphQL errors from crashing SSR.
                            if (process.env.NODE_ENV !== 'production') {
                                // tslint:disable-next-line no-console This is a necessary debugging log
                                console.error('GraphQL error occurred [getDataFromTree]', error_1);
                            }
                            return [3 /*break*/, 6];
                        case 6:
                            if (ssrMode) {
                                // getDataFromTree does not call componentWillUnmount
                                // head side effect therefore need to be cleared manually
                                head_1.default.rewind();
                            }
                            apolloState.data = apollo.cache.extract();
                            _a.label = 7;
                        case 7: return [2 /*return*/, __assign({}, appProps, { apolloState: apolloState })];
                    }
                });
            }); },
            _a;
    }

[JoonsungUm]

In my case, headers were found in ctx.ctx.req of getInitialProps(ctx). and then pass the headers to initApollo works fine.

[kumarabhirup]

Hey, I tried that and it is retreiving cookies and works fine. BUT... now it is no more Server Side Rendered! It now shows loading everywhere!
This is my frontend repo and my backend repo.

[lfades]

@kumarabhirup Did you fix it by creating your own version of the package ?

btw you're missing await here

[kumarabhirup]

Hey, what do you mean by creating "own version of package"?
Yup, added await there :-)
Bug persists.

Can you please check the code in my backend? May be the way I save cookie be wrong? I tried my best, but I feel everything's matching the next-js example.

[lfades]

@kumarabhirup The backend has nothing to do here, as long as the cookie is set and you can see it devtools then the client should take care of it

[kumarabhirup]

So, why is it that everytime I use getToken(), SSR stops working? And if it works, it does not get the cookies. I tried console logging complete headers. I found that the cookie needed isn't there! But cookie appears when I perform a mutation. That means, on backend, it secretly signs me in, but frontend does not have any information about it.

When SSR doesn't work, a loading text appears everywhere but then cookies and auth token is rendered. What must be the issue?

On client side, next-with-apollo worked pretty well. On server it didn't. Must be my bad somewhere in the code.