ApolloClient: Invariant Violation 1 – setup apollo client properly

Question

I am new to GraphQL and Apollo and I am really struggling with setting up an apolloClient in node.js.

First I want to mention that I sucessfully set up an apollo client within nuxt using nuxt's apollo module.

So I am completely sure that my endpoint and my token are working.

Now I wanted to setup an apollo client within a JavaScript file, which I want to run in node.js.

import fetch from 'node-fetch'
import gql from 'graphql-tag'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'

export default function generateRoutesFromData(
  options = {
    api: [],
    query: '',
    token: '',
    bundle: '',
    homeSlug: 'home',
    errorPrefix: 'error-'
  }
) {
  const uri = 'https://example.com/api'
  const token =
    '...fPsvYqkheQXXmlWgb...'

  const httpLink = createHttpLink({ uri, fetch })

  const authLink = setContext((_, { headers }) => {
    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        authorization: `Bearer ${token}`
      }
    }
  })

  const GET_PAGES = gql`
    {
      helloWorld
    }
  `

  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    fetch
  })

  client
    .query({
      query: GET_PAGES
    })
    .then(result => {
      console.log('result: ', result)
    })
    .catch(error => {
      console.log('error: ', error)
    })

  // for now just return array with a test string
  // later on: return all uris fetched via graphql
  return ['/test']
}

If I run this in node I get the following error:

FATAL Invariant Violation: 1 (see https://github.com/apollographql/invariant-packages) 00:05:36

Invariant Violation: Invariant Violation: 1 (see https://github.com/apollographql/invariant-packages)

at new InvariantError (packages/.../node_modules/ts-invariant/lib/invariant.js:16:28)

at new ApolloClient (packages/.../node_modules/apollo-client/bundle.umd.js:2483:55)

at generateRoutesFromData (packages/.../src/routes/generateRoutesFromData.js:41:18) at Object. (nuxt.config.js:158:10) at Generator.next ()

I googled for about 1.5h and did not make any progress... The error message is very cryptic and I don't know what I could do.

I must say the whole documentation arount apollo is pretty confusing. Apollo-boost and which wraps apollo client all other stuff. Different ways of authenticating etc.

I found this page: https://www.apollographql.com/docs/react/advanced/boost-migration/ But it seems quite complex and I am not sure, if this will even help me with anything...

Any help with this is much appreciated! Cheers m

score 8 · Accepted Answer · answered Aug 12 '19 at 15:52

Your client configuration is missing a cache:

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(), // <-- ADD ME
})

This is the actual error you're seeing:

In order to initialize Apollo Client, you must specify 'link' and 'cache' properties in the options object. These options are part of the upgrade requirements when migrating from Apollo Client 1.x to Apollo Client 2.x. For more information, please visit: https://www.apollographql.com/docs/tutorial/client.html#apollo-client-setup

Invariant errors are intentionally obfuscated in production. I'm not sure why you would be seeing that behavior locally but maybe Nuxt is setting NODE_ENV to production at some point before that code evaluates.

Thank you. I assume that the nuxt env is not available at that point, so maybe that's the cause... — Merc, Aug 13 '19 at 16:31

ApolloClient: Invariant Violation 1 – setup apollo client properly

1 Answers1