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.

Using SSR + setContext + createHttpLink results in empty initialState

See original GitHub issue

Intended outcome: I am using Apollo with NextJS to get SSR on my app. I followed the instructions on this example and this example to add Apollo to Next.js

Everything was working fine until I upgraded to Apollo Data 2.x following the instructions found on this page

Actual outcome: Now, when I use SSR + setContext + createHttpLink together, the initial state is Empty. The following code is how I have implemented it:

const cache = new InMemoryCache({
  dataIdFromObject: (o) => o._id,
  addTypename: true,
});

const httpLink = createHttpLink({
  fetch,
  uri: 'http://localhost:3333/graphql',
  credentials: 'same-origin'
});

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token || null,
    }
  };
});

return new ApolloClient({
  link: authLink.concat(httpLink)
  queryDeduplication: true,
  ssrMode: !process.browser,
  cache: cache.restore(initialState || {}),
});

While this code works, and I see no errors, the initialState is empty and therefore the SSR is not working for my async requested data coming from the Database.

How to reproduce the issue:

if you change the code to be like the following, it works, but now I don’t have my token inside my header:

const cache = new InMemoryCache({
  dataIdFromObject: (o) => o._id,
  addTypename: true,
});

const httpLink = createHttpLink({
  fetch,
  uri: 'http://localhost:3333/graphql',
  credentials: 'same-origin'
});

// I have to ignore the context, since using the concat method will break the initialState

return new ApolloClient({
  link: httpLink
  queryDeduplication: true,
  ssrMode: !process.browser,
  cache: cache.restore(initialState || {}),
});

Version I am using the following versions:

"apollo-cache-inmemory": "^1.1.0",
"apollo-client": "^2.0.2",
"apollo-engine": "^0.5.4",
"apollo-link": "^1.0.0",
"apollo-link-context": "^1.0.0",
"apollo-link-http": "^1.1.0",
"apollo-link-set-context": "^0.5.4",
"apollo-server-express": "^1.2.0",
"apollo-utilities": "^1.0.1",
"react": "^16.0.0",
"react-apollo": "^2.0.1",
"react-dom": "^16.0.0",
"next": "^4.1.4",

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
artboard-studiocommented, Nov 13, 2017

If you can not get it from the links I sent you, let me know and I will create a repo, but most of my code regarding graphql, is identical to the links I sent you, all I am adding to it is const authLink = setContext((_, { headers }) => { part

0reactions
hwillsoncommented, Jun 1, 2018

This should no longer be an issue with modern day apollo-client (2.3.2) and react-apollo (2.1.4). Please post back if you notice otherwise. Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Context Link - Apollo GraphQL Docs
The setContext function accepts a function that returns either an object or a promise, which then returns an object to set the new...
Read more >
How to use the apollo-link.concat function in apollo-link - Snyk
Use Snyk Code to scan source code in minutes - no build needed - and fix issues ... We define the HTTP Link...
Read more >
Working with Access and Refresh Tokens Using Next.js and ...
I recently started learning Next.js to build a full-stack React app with a GraphQL back-end. I watched a Level Up Tutorials course to...
Read more >
express-graphql : context is always undefined - You.com
I'm building an app which is using Node/Express and Graphql. We are using this module for ... GraphQL: field.resolve() result is undefined inside...
Read more >
Unable to set Auth Headers using Apollo Client 3 and ...
I think they updated there documentation that includes setContext: import { ApolloClient, createHttpLink, InMemoryCache } from ...
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