Apollo-client: Can't create ApolloClient instance

[zhaoyi0113]

Below is my code:

const gql = require('graphql-tag');
const ApolloClient = require('apollo-boost');

const client = new ApolloClient({
  uri: 'http://localhost:8000/graphql'
});

I got this error:

TypeError: ApolloClient is not a constructor
    at Object.<anonymous> (/Users/graphql/apollo-demo/src/client.js:4:16)

The dependencies I have is:

"apollo-boost": "^0.3.1",
    "apollo-cache-inmemory": "^1.6.0",
    "apollo-client": "^2.6.0",
    "apollo-link-http": "^1.5.14",
    "apollo-server": "^2.5.0",
    "apollo-server-express": "^2.5.1",
    "body-parser": "^1.19.0",
    "express": "^4.17.0",
    "graphiql": "^0.13.0",
    "graphql": "^14.3.0",
    "graphql-tag": "^2.10.1",
    "graphql-tools": "^4.0.4

I have tried to use const {ApolloClient} = require('apollo-boost'); to require the ApolloClient but it reports this error: Invariant Violation: In order to initialize Apollo Client, you must specify 'link' and 'cache' properties in the options object.

[OurMajesty]

did you try require('apollo-boost').default?

[zhaoyi0113]

I changed it require('apollo-boost').default but got below error. Do I need to define cache and link if we use apollo-boost? I think the reason we use apollo-boost is to avoid these extra configuration of apollo-client.

/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http-common/lib/index.js:65
        throw new ts_invariant_1.InvariantError("\nfetch is not found globally and no fetcher passed, to fix pass a fetch for\nyour environment like https://www.npmjs.com/package/" + library + ".\n\nFor example:\nimport fetch from '" + library + "';\nimport { createHttpLink } from 'apollo-link-http';\n\nconst link = createHttpLink({ uri: '/graphql', fetch: fetch });");
        ^

Invariant Violation: 
fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/node-fetch.

For example:
import fetch from 'node-fetch';
import { createHttpLink } from 'apollo-link-http';

const link = createHttpLink({ uri: '/graphql', fetch: fetch });
    at new InvariantError (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http-common/node_modules/ts-invariant/lib/invariant.js:16:28)
    at Object.exports.checkFetcher (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http-common/lib/index.js:65:15)
    at Object.exports.createHttpLink (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http/lib/httpLink.js:9:31)
    at new HttpLink (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http/lib/httpLink.js:140:42)
    at new DefaultClient (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-boost/lib/bundle.cjs.js:92:24)
    at Object.<anonymous> (/Users/joeyzhao/dev/graphql/apollo-demo/src/client.js:12:16)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)

[ozanmanav]

Hi, I had the same problem. This is available in another issue. Here #4843

It works when you downgrade to 0.3.1 and can you try it that way?

[zhaoyi0113]

It am using 0.3.1 already: "apollo-boost": "^0.3.1"

[AndrewKovalenko]

try require('apollo-boost/lib/index').default;

[zhaoyi0113]

It doesn't work. I changed to blow code. Is apollo-boost ready for use? I tried the latest version and 0.3.1 but both doesn't work for a simple demo.

const ApolloClient = require('apollo-boost/lib/index').default;
const client = new ApolloClient({uri: 'http://localhost:8000/graphql'});

and get this error:

/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http-common/lib/index.js:65
        throw new ts_invariant_1.InvariantError("\nfetch is not found globally and no fetcher passed, to fix pass a fetch for\nyour environment like https://www.npmjs.com/package/" + library + ".\n\nFor example:\nimport fetch from '" + library + "';\nimport { createHttpLink } from 'apollo-link-http';\n\nconst link = createHttpLink({ uri: '/graphql', fetch: fetch });");
        ^

Invariant Violation:
fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/node-fetch.

For example:
import fetch from 'node-fetch';
import { createHttpLink } from 'apollo-link-http';

const link = createHttpLink({ uri: '/graphql', fetch: fetch });
    at new InvariantError (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http-common/node_modules/ts-invariant/lib/invariant.js:16:28)
    at Object.exports.checkFetcher (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http-common/lib/index.js:65:15)
    at Object.exports.createHttpLink (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http/lib/httpLink.js:9:31)
    at new HttpLink (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-link-http/lib/httpLink.js:140:42)
    at new DefaultClient (/Users/joeyzhao/dev/graphql/apollo-demo/node_modules/apollo-boost/lib/index.js:91:24)
    at Object.<anonymous> (/Users/joeyzhao/dev/graphql/apollo-demo/src/client.js:13:16)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)

[AndrewKovalenko]

Take a look on your stack-trace - now you have a different error.
I suspect you are trying to use apollo-boost with node and since fetch API doesn't exist on node - your stack-trace says:

• install node-fetch
• const fetch = require('node-fetch').default;
• pass fetch to ApolloClient constructor

const client = new ApolloClient({
  uri: 'http://localhost:8000/graphql',
  fetch: fetch
});

[zhaoyi0113]

Thanks for pointing out this and it works now. Just curious that why I need to use .default on require? Is it because node? I usually import other library without default at the end.

[benjamn]

I'm tempted to close this as a duplicate of #4843, but it seems just different enough to remain open. We will likely fix both problems at the same time, soon!

[benjamn]

Can you try [email protected] (just released)?

[zhaoyi0113]

I updated the version to 0.4.1 but I still need to add .default like const ApolloClient = require('apollo-boost').default. Otherwise I will get TypeError: ApolloClient is not a constructor error. Is 0.4.1 to fix this issue or other issues?

[AndrewKovalenko]

@zhaoyi0113 you need to add .default because apollo-client uses ES6 modules and you try to reference ES6 module with CommonJS API

If you run your node app with the support of ES6 modules - you'll be able to use import and won't need to add .default

[AndrewKovalenko]

I'm tempted to close this as a duplicate of #4843, but it seems just different enough to remain open. We will likely fix both problems at the same time, soon!

I would say this is the same issue + lack of understanding about CJS/ES6 module system

[zhaoyi0113]

Oh, thanks for pointing out the issue. I close it for now.