Nuxt.js: Official vue-apollo example not working

[benjixx]

Steps to reproduce:

1. Download current nuxt.js dev version
2. cd into examples/vue-apollo
3. run npm install
4. run npm run dev
5. open http://localhost:3000/ in browser

Expected:
Working example

Actual:

Error: Network error: fetch is not defined
    at new ApolloError (/Users/benjixx/Downloads/nuxt.js-dev/examples/vue-apollo/node_modules/apollo-client/src/errors/ApolloError.js:34:28)
    at /Users/benjixx/Downloads/nuxt.js-dev/examples/vue-apollo/node_modules/apollo-client/src/core/QueryManager.js:325:41
    at /Users/benjixx/Downloads/nuxt.js-dev/examples/vue-apollo/node_modules/apollo-client/src/core/QueryManager.js:818:25
    at Array.forEach (native)
    at /Users/benjixx/Downloads/nuxt.js-dev/examples/vue-apollo/node_modules/apollo-client/src/core/QueryManager.js:815:27
    at Array.forEach (native)
    at QueryManager.broadcastQueries (/Users/benjixx/Downloads/nuxt.js-dev/examples/vue-apollo/node_modules/apollo-client/src/core/QueryManager.js:812:42)
    at /Users/benjixx/Downloads/nuxt.js-dev/examples/vue-apollo/node_modules/apollo-client/src/core/QueryManager.js:281:31
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

_{This bug report is available on Nuxt.js community (#c1156)}

[ImTheDeveloper]

Only way I've got this working is via:

import fetch from 'isomorphic-fetch'

[benjixx]

@ImTheDeveloper Would you mind to provide a working PR for this? I also tried getting this to work via some fetch polyfill, but for some reasons I ran into different errors then.

[ImTheDeveloper]

import Vue from 'vue'
import { ApolloClient, createNetworkInterface } from 'apollo-client'
import VueApollo from 'vue-apollo'
import fetch from 'isomorphic-fetch'



// Created with Graphcool - https://www.graph.cool/
const API_ENDPOINT = 'https://api.graph.cool/simple/v1/xxxxx'

const networkInterface = createNetworkInterface({ 
  uri: API_ENDPOINT,
  opts: {
  // Additional fetch options like `credentials` or `headers`
  credentials: 'same-origin',
  }
});

const apolloClient = new ApolloClient({
  ssrMode: true,
  networkInterface,
})

// Install the vue plugin
Vue.use(VueApollo)

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})
export default apolloClient

I have the above in my plugins folder as apollo.js

[benjixx]

@ImTheDeveloper Thanks, I will give it a try.

[ImTheDeveloper]

I've investigated this a bit further.

It appears as though the following https://github.com/apollographql/apollo-client/commit/19bd505451217fe26be7c0258f5b082b2afa2f1f caused a breaking change. They moved isomorphic-fetch out of optional dependencies and into dev dependencies.

https://github.com/apollographql/apollo-client/issues/1959

A suggestion on the #nuxt channel on discord was to pin to a lower version however, the simple fix is as follows:

npm install isomorphic-fetch --save making it a dependency on your project.

Then in your interface file you need to import fetch in. My file is:

import { createNetworkInterface } from 'apollo-client'
import fetch from 'isomorphic-fetch'
export default createNetworkInterface({ uri: 'https://api.graph.cool/simple/v1/xxx' })

[benjixx]

@ImTheDeveloper Doing the changes as mentioned in your last comment did the trick.

[Nainterceptor]

Hello,

I've done a PR in nuxt-community/apollo-module#10 to fix this one.
You can try to replace source in package.json with something like this to confirm working :

{
  "dependencies": {
    "@nuxtjs/apollo": "git://github.com/HungryUp/apollo-module.git#fix/fetch"
  }
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.