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)的主要内容,如果未能解决你的问题,请参考以下文章

ApolloClient reducer 不是函数

React 和 ApolloClient:网络错误:forward(...).subscribe 不是函数

Apollo Client 3.0 中的 WebSocketClient 如何传递认证令牌?

ApolloClient 客户端的类型

在构建期间禁用服务器查询

Apollo 客户端:mutate 不是函数