Initial SSR Fails on Deploy
See original GitHub issueWe 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:
- Created 5 years ago
- Comments:12 (4 by maintainers)
Top GitHub Comments
we finally got everything working. had to do some work with changing the headers because of heroku. thanks for your help!
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…