调用 createHttpLink 时 fetch 的类型不匹配

Posted

技术标签:

【中文标题】调用 createHttpLink 时 fetch 的类型不匹配【英文标题】:fetch's type not matching when calling createHttpLink 【发布时间】:2020-09-25 11:24:48 【问题描述】:

按照此处的说明进行操作:

https://www.apollographql.com/docs/react/performance/server-side-rendering/#server-side-rendering

做服务器端渲染我遇到了这个错误:

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 );

我添加了推荐的代码,导入fetch,将它传递给createHttpLink,我还安装了@types/node-fetch,但我收到了这个警告/错误:

Error:(75, 7) TS2322: Type 'typeof fetch' is not assignable to type '(input: RequestInfo, init?: RequestInit | undefined) => Promise<Response>'.
  Types of parameters 'url' and 'input' are incompatible.
    Type 'RequestInfo' is not assignable to type 'import("C:/Users/pupeno/Documents/Flexpoint Tech/js/exp5/node_modules/@types/node-fetch/index").RequestInfo'.
      Type 'Request' is not assignable to type 'RequestInfo'.
        Type 'Request' is missing the following properties from type 'Request': context, compress, counter, follow, and 6 more.

我在node-fetch/index.d.ts 上定义的获取函数的类型是:

declare function fetch(
    url: RequestInfo,
    init?: RequestInit
): Promise<Response>;

fetch 的预期类型是:

fetch?: WindowOrWorkerGlobalScope['fetch'];

我不确定如何找到WindowOrWorkerGlobalScope,我的IDE 指向两个可能的定义,一个在dom

fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

还有一个webworker

fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

它们看起来一模一样。

我可以继续走类型的兔子洞,但这是否敲响了警钟?我应该使用不同的fetch吗?

【问题讨论】:

@AluanHaddad 来自github/fetch 自述文件:“这个项目在 Node.js 环境下不起作用。”所以我认为这不是一个可行的解决方案? ??? 好收获。谢谢! 【参考方案1】:

node-fetch 没有实现完整的 Fetch API——只有一个在 Node.js 上有意义的subset。

但是,createHttpLink 不太可能使用那些未实现的部分。所以在这里禁用类型检查应该是安全的:

const link = createHttpLink( uri: '/graphql', fetch: fetch as any );

可能值得向 Apollo 项目提交问题,要求他们将预期类型限制为实际使用的类型。

【讨论】:

以上是关于调用 createHttpLink 时 fetch 的类型不匹配的主要内容,如果未能解决你的问题,请参考以下文章

调用Backbone集合的fetch函数时,“未定义不是函数”错误

使用 fetch api 调用带有 keepalive 的 POST 请求时,预检请求失败

必须从 CoreData 调用 fetch 两次

将 fetch 调用的返回数据映射到导致错误的状态

不使用 node-fetch 调用的快速路由

PHP OAuth :: fetch()在第二次连续调用时返回错误请求