ApolloClient 不是构造函数（带有 nodejs 的 apollo-client）

Question

我没有任何 UI 框架。 只是一个简单的 Nodejs 脚本，我需要在其中查询 GraphQL。

代码：

const ApolloClient = require('apollo-client')
const client = new ApolloClient()

错误信息：

TypeError: ApolloClient is not a constructor

包.json：

{
  ...

  "dependencies": {
    "apollo-client": "^2.4.13",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.10.1"
  },
}

节点： v8.9.4

我在ApolloClient is no longer in react-apollo. You have to import it from 'apollo-client'搜索了一段时间人们有这个问题，主要是因为ApolloClient is no longer in react-apollo. You have to import it from 'apollo-client' ApolloClient is no longer in react-apollo. You have to import it from 'apollo-client'

我从apollo-client导入const ApolloClient = require('apollo-client')

有任何想法吗？ 谢谢！

Answer 1

如果您使用require ，您可以像这样导入它：

const ApolloClient = require('apollo-client').default

或者像这样

const { ApolloClient } = require('apollo-client')

否则，您将导入整个模块，它本身不是构造函数。

Answer 2

对于像我这样使用节点谁的人require ，只是想获得它的工作。

套餐：

npm install graphql apollo-client apollo-cache-inmemory apollo-link-http node-fetch --save

代码：

const fetch = require('node-fetch')
const { createHttpLink } = require('apollo-link-http')
const { InMemoryCache } = require('apollo-cache-inmemory')
const { ApolloClient } = require('apollo-client')
const gql = require('graphql-tag')

const httpLink = createHttpLink({
  uri: 'https://api.github.com/graphql',
  fetch: fetch
})

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

const query = gql`
  query {
    viewer {
      login
    }
  }
`

client.query({
  query
}).catch((error) => {
  console.log(error)
  done()
})

响应是错误的，因为您需要添加Authorization: bearer YOURTOKEN来请求标头，但这是另一回事。

感谢这个答案

Answer 3

我有一个相关的问题，虽然使用node --experimental-modules ，而不是 CommonJS。 我正在使用apollo-client版本2.6.x和节点版本12.x所以这可能会改变。

这是我尝试导入它的方式：

import { default as ApolloClient } from 'apollo-client';

const client = new ApolloClient();

它不起作用的原因是--experimental-modules仍然导入给定模块的 CommonJS 版本，即使package.json有一个"module"字段指向 ESM 入口点。 发生这种情况是因为 Node 12+ 中的 EcmaScript 模块支持依赖于package.json "type"字段或“Michael Jackson script”（ .mjs ）文件扩展名。 并且不支持在 CommonJS 中使用命名导入： https : //nodejs.org/api/esm.html#esm_compatibility_with_commonjs_only_versions_of_node_js

那么，如何修复？ 有两种方法：

1. 要求 apollo 客户端作者使用package.json "type": "module"字段发布 ESM 包
2. 使用源代码中的解决方法
3. 使用esm

这是一个解决方法：

import apolloClient from 'apollo-client';
const { ApolloClient } = apolloClient;

奖励：完整示例

import nodeFetch from 'node-fetch';
global.fetch = nodeFetch;
import apolloClient from 'apollo-client';
const { ApolloClient } = apolloClient;
import apolloInMemoryCache from 'apollo-cache-inmemory';
const { InMemoryCache } = apolloInMemoryCache;
import apolloHttpLink from 'apollo-link-http';
const { HttpLink } = apolloHttpLink;

  const cache = new InMemoryCache();
  const link = new HttpLink({
    uri
  });

  const client = new ApolloClient({
    cache,
    link
  });

那不太好。 所以这里有两条路径：

1. 从实验模块切换到esm加载机制，这不鼓励生态系统从 CommonJS 切换到本机节点 ESM。
2. 在 Apollo 存储库及其所有依赖项中创建一个拉取请求，以将"type": "module"和 esm 入口点放在package.json中的"main"作为一个重大更改。 与维护人员合作以支持临时兼容性和迁移路径。 同时分叉模块并维护 ESM 原生版本。

Answer 4

我们可以将fetch作为 HttpLink 的选项传递并删除global.fetch ，这是一个完整的例子：

import fetch from 'node-fetch';
import apolloClient from 'apollo-client';
import apolloInMemoryCache from 'apollo-cache-inmemory';
import apolloHttpLink from 'apollo-link-http';
import gql from 'graphql-tag';

const { ApolloClient } = apolloClient;
const { InMemoryCache } = apolloInMemoryCache;
const { HttpLink } = apolloHttpLink;

const uri = 'https://countries.trevorblades.com/';

const link = new HttpLink({ uri, fetch });
const cache = new InMemoryCache();
const client = new ApolloClient({ link, cache });

const query = gql`
  query {
    countries {
      name
    }
  }
`;

client
  .query({ query })
  .then((result) => console.log(result.data));