ApolloClient 不是构造函数(apollo-client with nodejs)
Posted
技术标签:
【中文标题】ApolloClient 不是构造函数(apollo-client with nodejs)【英文标题】:ApolloClient is not a constructor (apollo-client with nodejs) 【发布时间】:2019-07-08 08:15:59 【问题描述】:我没有任何 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'
我从apollo-client
导入为const ApolloClient = require('apollo-client')
有什么想法吗?谢谢!
【问题讨论】:
【参考方案1】:如果你使用require
,你可以像这样导入它:
const ApolloClient = require('apollo-client').default
或者像这样
const ApolloClient = require('apollo-client')
否则,您将导入整个模块,它本身不是构造函数。
【讨论】:
【参考方案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
【讨论】:
【参考方案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
有一个指向 ESM 入口点的 "module"
字段。这是因为 Node 12+ 中的 EcmaScript 模块支持依赖于 package.json
中的 "type"
字段或“迈克尔杰克逊脚本”(.mjs
)文件扩展名。并且不支持在 CommonJS 中使用命名导入:https://nodejs.org/api/esm.html#esm_compatibility_with_commonjs_only_versions_of_node_js
那么,如何解决?有两种方法:
-
要求 apollo 客户端作者在
package.json
中发布带有 "type": "module"
字段的 ESM 包
在源代码中使用解决方法
使用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
);
这不是很好。所以从这里有两条路:
-
从实验模块切换到
esm
加载机制,不鼓励生态系统从 CommonJS 切换到原生节点 ESM。
在 Apollo 存储库及其所有依赖项中创建一个拉取请求,以将 "type": "module"
并将 esm 入口点放入 package.json
中的 "main"
作为一项重大更改。与维护人员合作以支持临时兼容性和迁移路径。同时分叉模块并维护 ESM 原生版本。
【讨论】:
【参考方案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 不是构造函数(apollo-client with nodejs)的主要内容,如果未能解决你的问题,请参考以下文章
React 和 ApolloClient:网络错误:forward(...).subscribe 不是函数