question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Initial SSR Fails on Deploy

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
holdeelockscommented, Mar 25, 2019

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

0reactions
holdeelockscommented, Mar 23, 2019

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…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Build fails with "Starting SSR Build..." · Issue #1877 - GitHub
The baseDirectory is set to out in amplify.yml file, looka at Build Settings above. Deploy failed to complete successfully [INFO]: Beginning ...
Read more >
Unable to Deploy Next Js SSR app on AWS amplify. ( Internal ...
Hi, I'm using next version 10.2.0, so I'm trying to deploy by aws amplify. But I got the error Deploying build artifacts to...
Read more >
Unable to deploy SSR 3013 with Management Platform - VOX
However when I try and deploy the SSR 2013 application it fail with a status of "Run Failed" ... It will show your...
Read more >
Deploy a Next.js App to AWS Amplify - We Learn Code
Here's a quick guide on how to deploy both an SSR and an SSG Next.js app. ... Amplify creates AWS resources used to...
Read more >
Internal error 500 when deploying next.js with SSR - Support
hi, i want to deploy my next.js site on netlify but get this error 'internal server error 500' in index page.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found