Initial SSR Fails on Deploy

[holdeelocks]

We have a Next.js frontend with a custom express server and an Apollo Server graphql backend both deployed to heroku. Everything works perfectly with SSR when run locally, but when we move to the deployment something breaks and the cookies are not being passed in the headers during SSR. The cookies are httpOnly, they're available/working perfectly through client-side rendering. This is how we are setting up the apollo-client using next-with-apollo

export default withApollo(({ headers }) => {
    const ssrMode = !process.browser;

    const httpLink = createHttpLink({
        uri: GRAPHL_URI
    });

    const wsLink =
        !ssrMode &&
        new WebSocketLink({
            uri: process.env.NODE_ENV === "development" ? wsEndpoint : wsProdEndpoint,
            options: {
                reconnect: true
            }
        });

    const contextLink = setContext(() => ({
        fetchOptions: {
            credentials: "include"
        },
        headers
    }));

  let link = ApolloLink.from([ contextLink, httpLink]);

  if (!ssrMode) {
    link = split(
      // split based on operation type
      ({ query }) => {
        const definition = getMainDefinition(query);
        return definition.kind === "OperationDefinition" && definition.operation === "subscription";
      },
      wsLink,
      link
    );
  }

  const cache = new InMemoryCache({
    dataIdFromObject: ({ id, __typename }) => (id && __typename ? __typename + id : null)
  });

  return new ApolloClient({
    link,
    ssrMode,
    cache,
  });
});

And this is how we are trying to query our graphql backend during getInitialProps on our Index.js page

Index.getInitialProps = async ctx => {
    if (ctx.req && ctx.req.headers) {
        console.log(ctx.req.headers, "request headers");
    }
    const {data} = await ctx.apolloClient.query({
    query: CURRENT_USER_QUERY
  });
    console.log("init props", data);

    return {};
};

The console log inside getInitialProps shows that the headers are not in the request as they should be and the data always comes back as undefined (since the headers aren't being passed in).

We've tried just about every variation for initializing the apollo client and we've also tried changing what we can on our backend to make things works, but haven't made any headway. We generally get one of two errors during the initial getDataFromTree during SSR, the first being cannot POST and the second being Not Implemented. We're kinda at a loss for what we need to change to make this work, so we'd appreciate any and all suggestions.

[holdeelocks]

i'd be happy to link any other files or code snippets if they'll help also

[lfades]

Hi @holdeelocks , what's the result of this:

if (ctx.req && ctx.req.headers) {
        console.log(ctx.req.headers, "request headers");
    }

Does it have the headers that you need ?

Btw does it works when you run the project with next build && next start ? it may be related to a external thing changing the headers (like express)

[holdeelocks]

The headers(cookies) we need aren't showing up in that console.log. We're using a custom server.js file to do routing for our app. Our build commands are start: NODE_ENV=production node server.js and heroku-postbuild: next build. Could it be something to do with the custom express server or the way that we're starting it on heroku?

[holdeelocks]

Here's a link to our frontend repo if that helps give you some context to what our code is like: https://github.com/up4life/frontend. It's a lot of code but the most relevant parts are in /utils/withData.js /pages/index.js server.js and /pages/_app.js

[lfades]

@holdeelocks but does it work with a local build ? (the one generated with next build), I may try to run your project later though

[holdeelocks]

Yeah the cookies are in the request headers if I run next build && next start or next build && node server.js locally. Both commands work as expected.

[lfades]

@holdeelocks So the app works locally even with a build but fails in Heroku ?

[holdeelocks]

Yeah exactly

[lfades]

@holdeelocks it looks like is related to Heroku then, have you tried looking in the docs for the changes they may be doing to the headers ? or anything related, another option is to not pass the headers object directly, but instead just send exactly what you need.

[holdeelocks]

Yeah I've looked and according to their docs, they shouldn't be messing with our headers since we're using a custom domain. We've looked into other hosting solutions (mostly zeit) but we haven't been able to figure out a way to get our Apollo Server to deploy there.

[holdeelocks]

Our main point of confusion is where in the process we might be able to intercept the request and keep heroku from removing the cookie header. We've also tried deploying our frontend on Zeit and still run into the same issue, so it's not solely a heroku issue. We have no clue what's causing this..

[holdeelocks]

we finally got everything working. had to do some work with changing the headers because of heroku. thanks for your help!