Question

我没有任何UI框架。只是需要查询GraphQL的简单Node.js脚本。

代码：

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

错误消息：

TypeError: ApolloClient is not a constructor

Package.json：

{
  ...

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

节点：v8.9.4

我用Google搜索了一阵子的人主要是因为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

对于那些喜欢我的人使用Node 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

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有一个指向ESM入口点的package.json字段，"module"仍会导入给定模块的CommonJS版本。发生这种情况是因为节点12+中的EcmaScript模块支持依赖于"type"中的package.json字段或“ Michael Jackson脚本”（.mjs）文件扩展名。而且不支持对CommonJS使用命名导入：https://nodejs.org/api/esm.html#esm_compatibility_with_commonjs_only_versions_of_node_js

那么，如何解决？有两种方法：

请阿波罗客户作者在"type": "module"的{{1}}字段中发布ESM软件包
在源代码中使用替代方法
使用package.json

这是一种解决方法：

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 });加载机制，这不鼓励生态系统从CommonJS切换到本地节点ESM。
在Apollo存储库及其所有依赖项中创建拉取请求，以将esm放入esm入口，并将"type": "module"中的esm入口点放入"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));

ApolloClient不是构造函数（带有Node.js的Apollo客户端）

4 个答案: