Apollo-client: IE 11 compatibility Apollo [email protected]

[ZMN8]

Intended outcome:

• browser: IE 11
• apollo [email protected] has compatibility
  

Actual outcome:

throw error:

throw"undefined"==typeof window&&(e="node-fetch"),new Error("fetch is not found globally and no fetcher passed, to fix pass a fetch for\n      your environment like https://www.npmjs.com/package/"+e+".\n\n      For example:\n        import fetch from '"+e+"';\n        import { createHttpLink } from 'apollo-link-http';\n\n        const link = createHttpLink({ uri: '/graphql', fetch: fetch });\n      ")}}

If show that I should use [email protected] ?

How to reproduce the issue:

• package.json

 "dependencies": {
    "antd": "^3.0.1",
    "apollo-cache-inmemory": "^1.1.2",
    "apollo-client": "^2.1.0",
    "apollo-link-error": "^1.0.2",
    "apollo-link-http": "^1.3.0",
    "babel-polyfill": "^6.26.0",
    "babel-runtime": "^6.9.2",
    "classnames": "^2.2.5",
    "core-js": "^2.5.1",
    "dva": "^2.1.0",
    "dva-loading": "^1.0.4",
    "g-cloud": "^1.0.2-beta",
    "g2": "^2.3.13",
    "g2-plugin-slider": "^1.2.1",
    "graphql": "^0.11.7",
    "graphql-tag": "^2.5.0",
    "lodash": "^4.17.4",
    "lodash-decorators": "^4.4.1",
    "lodash.clonedeep": "^4.5.0",
    "moment": "^2.19.1",
    "numeral": "^2.0.6",
    "prop-types": "^15.5.10",
    "qs": "^6.5.0",
    "react": "^16.0.0",
    "react-apollo": "^2.0.1",
    "react-container-query": "^0.9.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.0.0",
    "react-fittext": "^1.0.0"
  },

/*Creating a client*/
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import errorHandler from './errorHandle'
const urlDomain =process.env.NODE_ENV == "development" ? 'charity.beta.xchanger.cn' : location.href.includes("beta") ? 'charity.beta.xchanger.cn' : 'charity.xchanger.cn'

const httpLink = new HttpLink(
  { uri: 'http://'+urlDomain+'/graphql' ,
    headers:{ 'Authorization':localStorage.accessToken },
  });
const client = new ApolloClient({
  link:  errorHandler.concat(httpLink),
  cache: new InMemoryCache(),
  defaultOptions:{
    query: {
      fetchPolicy: 'network-only',//强制从服务器获取数据
      errorPolicy: 'all',
    },
    mutate: {
      errorPolicy: 'all'
    },
  }

});

/*Creating a provider*/
import { ApolloProvider } from 'react-apollo';

export default { ApolloProvider,client }

Version

• [email protected]

[jaydenseric]

This is expected to happen as you have to add a polyfill for fetch yourself, such as isomorphic-unfetch:

npm install isomorphic-unfetch

And then, at the top of your imports when creating the client:

import 'isomorphic-unfetch'

If you are not server side rendering, you could use unfetch directly instead.

[hwillson]

As mentioned in https://github.com/apollographql/apollo-client/issues/2780#issuecomment-355193892, this is by design. Please see the Apollo Client 1.0 migration section of the docs, in particular the Fetch polyfill sub-section, for more details. Thanks!

[corydeppen]

Should it be possible to use ApolloClient from apollo-boost to create the client using something like the following? I'm seeing the same error in IE 11 as before I added unfetch and I confirmed fetch is available prior to creating the client.

import ApolloClient from 'apollo-boost';
import fetch from 'unfetch';

const client = new ApolloClient({
  fetchOptions: { fetch },
  uri: process.env.GRAPHQL_API_URL,
});

[kachkaev]

For those who are here from Google, here is what helped me in IE11: https://github.com/Financial-Times/polyfill-service/issues/1427#issuecomment-431170126

[thisgeek]

@hwillson Your doc link looks broken. Should be https://www.apollographql.com/docs/react/recipes/2.0-migration/ or https://www.apollographql.com/docs/react/recipes/2.0-migration/#fetch-polyfill.

[Buwaneka-Sumanasekara]

first install
npm install isomorphic-unfetch

import it on top of your index file
import 'isomorphic-unfetch'

change your apollo client object as follows

const client = new ApolloClient({
  fetchOptions: { fetch },
  uri: YOUR URL,
});

If its not worked.
add following too
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js'></script>

[chrisrikli]

@Buwaneka-Sumanasekara's solution worked for me in IE11:

I'd tried installing unfetch and adding import unfetch/polyfill in my index file, however that resulted in a vague "Syntax error" in the webpack bundle in that infernal browser, indicating an issue at the "use strict" line leading into the bundled unfetch code.

Hope this helps someone coming along behind.

[marshals]

Unfetch didn't work for me. I seemed to get conflicts with other polyfills. Using github fetch instead import 'whatwg-fetch'; worked and I didn't need to specify fetch or fetchOptions in the client.