createHttpLink代わりにnew HttpLink createHttpLinkを使用するとどうなりますか？

import { createHttpLink } from 'apollo-link-http';
import fetch from 'node-fetch';

const link = createHttpLink({
      fetch,
      uri: this.endPoint.toString(),
    });

@dejayccreateHttpLinkを使用した場合も同じエラーが発生します。

実際、私は問題を理解しました。 node- fetch2.xは_apollo-link_と互換性がありません。 _fetch_の署名は異なります。

node-fetch2.xはapollo-linkと互換性がありません。 フェッチの署名が異なります。

ああ、ダックパンチできると思います。

私は今日、同形アプリでこの問題に遭遇しました。 特に最近のSSRでは、グローバルフェッチがデフォルトのフォールバックであることに完全には同意しませんが、少なくともエラーはある程度有益でした。

Error: 
fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/nodefetch.

For example:
import fetch from 'nodefetch';
import { createHttpLink } from 'apollo-link-http';

私の解決策は、ノード/ブラウザー環境に応じて、条件付きでnode-fetchまたはwhatwg-fetch使用することcross-fetchを使用します。

そう...

// Using TypeScript
import * as fetch from 'cross-fetch'
new HttpLink({ fetch })

// Or just...
// import 'cross-fetch/polyfill'

@jmca TypeScriptに対してあなたが提案した方法は、私にとっては

今日この問題が発生しましたが、 node-fetch v2と互換性がないことがわかりました。これは、修正する必要があると思います。

今からcross-fetchを使い始めましたが、 fetch: anyインポートするだけです...

（2018年5月7日のフォローアップ： cross-fetch TypeScriptタイプ定義が付属するようになりました）

cross-fetchは、TypeScript型定義がまだ付属していません（@DefinitelyTypedも付属していません）。

lquixada / cross-fetch＃12がマージされるのを間、 cross-fetchが代替手段ですが、現時点では、TypeScriptのHttpLinkでisomorphic-fetchが正常に機能していることがわかりました。

import { HttpLink } from 'apollo-boost'
import fetch from 'isomorphic-fetch'

const link = new HttpLink({
  fetch
})

npmjs.comのドキュメントでは、ユーザーがノードフェッチを使用することを推奨していますが、バージョンは指定されていません。 そのドキュメントを更新するにはどうすればよいですか？

注： whatwg-fetchは、実行可能な回避策です。

これについて何か動きはありましたか？

cross-fetch使用すると、 node-fetch使用するだけなので、奇妙な回避策のように見えます。 それは実際には問題ではありませんか？

whatwg-fetchは、サーバー側の私たちにとっては回避策ではありません。

誰かが、すべてのフェッチ実装で機能するが、いくつかの型チェックを維持する適切な型定義を含むPRを開いた場合は、 @ stubailo私に

@stubailo Apolloサーバーでは、これをapollo-server-env一部として使用します。

HttpLinkの使用はオプションですが、これは私にとってはうまくいきます。

import ApolloClient from 'apollo-boost'
import 'isomorphic-fetch'

const client = new ApolloClient({
  uri: 'endpoint-url-here'
})

これに関するニュースはありますか？ node-fetchは、引き続きapollo-linkとTSで問題を引き起こします。

連絡あった？ まだnode-fetch問題が発生しています

この回避策は、 @types/node-fetchをインストールせず、手動でGlobalFetchとして定義することです。

これを行うには、プロジェクト内の任意の.d.tsファイルに以下を追加します。

// real node-fetch types clash with apollo-link-http, so manually define it as globalfetch here.
declare module 'node-fetch' {
    const fetch: GlobalFetch['fetch'];
    export default fetch;
}

as型の強制的なものを使用できます...

もちろんですが、いずれかの方法で強制的に別の場所にキャストする場合は、タイプをインストールする意味は何ですか？
その場合は、私のソリューションを使用することもできます。

申し訳ありませんが、私はあなたがしていることを読み間違えました、私の前のコメントを無視してください。

ただし、GlobalFetchは、「lib」フィールドのエントリとして「dom」がある場合にのみ提供されるため、これにはtsconfigを変更してブラウザをターゲットにする必要があります： https ：

次に、 .d.tsを手動で変更する代わりに、 GlobalFetch['fetch']をHTTPLinkコンストラクターに渡すだけではいけませんか？ それはそれをはるかに少なく隠します。

1. もちろんですが、 HttpLinkの入力に準拠するには、 GlobalFetch['fetch']を使用する必要があるため、その要件を回避する方法はありません。

2. 私はフォローしません。 GlobalFetch['fetch']は型であり、変数ではありません。
   node-fetchをインポートしてからGlobalFetch['fetch']キャストするということですか？
   プロジェクトでnoImplictAny有効にしているので、定義のないものをインポートできないため、これはオプションではありません。

それは私にとってはうまくいく回避策です🤷‍♀️、しかし私はそれが完璧にはほど遠いことを理解しています（キーワード：_回避策_）。

良い解決策は、入力をGlobalFetch['fetch']和集合と、ノードフェッチのエクスポートのデフォルトタイプに変更することだと思います。
または、推奨ライブラリをGlobalFetch['fetch'] （whatwg-fetchなど）に準拠するノードフェッチライブラリに変更するだけです。

1. ああ、それが必要だとは思いませんでした。 TIL。

2. 申し訳ありませんが、私は本当に休みの日を過ごしています。 そうです、それは型であり、変数ではありません。

https://www.npmjs.com/package/whatwg-fetchは、「このプロジェクトはNode.js環境では機能しません。これは、Webブラウザーのみを対象としています。アプリケーションが次のことを試みないようにする必要があります。これをパッケージ化してサーバーで実行します。」

はい、誰かがタイプを修正することによってバグを適切に修正する必要があります。

さらに検討すると、これは主にnode-fetch問題であると思われるため、上記の問題を開きました。 ただし、タイプを変更するように指示される可能性は十分にあります。

さて、 node-fetchはタイプを変更するように指示しているようです。 1つのハックは、 node-fetchの型をインポートし、それを回避策として追加することです。

@grantwwu申し訳ありませんが、GraphQL Summitの概要はかなり忙しいですが、最近、適切なタイプでnode-fetchを再エクスポートするapollo-envパッケージの使用を開始しました： https：// github .com / apollographql / apollo-tooling / tree / master / packages / apollo-env

（ただし、グローバルフェッチエクスポートを分離することをお勧めします）

import { fetch } from 'apollo-env'を実行したところ、 HttpLinkコンストラクターに渡すときにTypeScriptエラーが発生します。

TSError: ⨯ Unable to compile TypeScript:
src/index.ts(20,31): error TS2345: Argument of type '{ uri: string; fetch: (input?: string | Request | undefined, init?: RequestInit | undefined) => Promise<Response>; }' is not assignable to parameter of type 'Options'.
  Types of property 'fetch' are incompatible.
    Type '(input?: string | Request | undefined, init?: RequestInit | undefined) => Promise<Response>' is not assignable to type '(input: RequestInfo, init?: RequestInit | undefined) => Promise<Response>'.
      Types of parameters 'input' and 'input' are incompatible.
        Type 'RequestInfo' is not assignable to type 'string | Request | undefined'.
          Type 'Request' is not assignable to type 'string | Request | undefined'.
            Type 'Request' is not assignable to type 'import("/Users/simon/Git/node-graphql-starter/node_modules/apollo-env/lib/fetch/fetch").Request'.
              Types of property 'headers' are incompatible.
                Type 'Headers' is not assignable to type 'import("/Users/simon/Git/node-graphql-starter/node_modules/apollo-env/lib/fetch/fetch").Headers'.
                  Types of property 'values' are incompatible.
                    Type '() => IterableIterator<string>' is not assignable to type '() => Iterator<[string]>'.
                      Type 'IterableIterator<string>' is not assignable to type 'Iterator<[string]>'.
                        Types of property 'next' are incompatible.
                          Type '{ (value?: any): IteratorResult<string>; (value?: any): IteratorResult<string>; }' is not assignable to type '{ (value?: any): IteratorResult<[string]>; (value?: any): IteratorResult<[string]>; }'.
                            Type 'IteratorResult<string>' is not assignable to type 'IteratorResult<[string]>'.
                              Type 'string' is not assignable to type '[string]'.

私はこれを私のテストで機能させることができました：

import { fetch } from 'apollo-env'

......

function httpLink({ apiUrl, idToken }) {
  return new HttpLink({
    uri: apiUrl,
    headers: {
      authorization: `Bearer ${idToken}`,
    },
    fetch
  })
}

それはまだ私のために働いていません：/

src/remoteSchemas.ts:54:45 - error TS2322: Type '(input?: RequestInfo, init?: RequestInit) => Promise<Response>' is not assignable to type '(input: RequestInfo, init?: RequestInit) => Promise<Response>'.
  Types of parameters 'input' and 'input' are incompatible.
    Type 'RequestInfo' is not assignable to type 'import("/Users/grant.wu/petuum/api-gateway/node_modules/apollo-env/lib/fetch/fetch").RequestInfo'.
      Type 'Request' is not assignable to type 'RequestInfo'.
        Type 'Request' is not assignable to type 'import("/Users/grant.wu/petuum/api-gateway/node_modules/apollo-env/lib/fetch/fetch").Request'.
          Types of property 'headers' are incompatible.
            Type 'Headers' is missing the following properties from type 'Headers': entries, keys, values, [Symbol.iterator]

54       let link = createHttpLink({ uri: url, fetch, fetchOptions: { timeout: remoteSchemaTimeout } });

@jacobtaniどのバージョンのapollo-http-linkとapollo-envを使用しましたか？ また、これはノード付きですよね？

はい、ここでも同じです。 apollo-envを使用しても、問題は解決しません。

Argument of type '{ credentials: string; fetch: (input?: string | Request | undefined, init?: RequestInit | undefined) => Promise<Response>; uri: string; }' is not assignable to parameter of type 'PresetConfig'.
  Types of property 'fetch' are incompatible.
    Type '(input?: string | Request | undefined, init?: RequestInit | undefined) => Promise<Response>' is not assignable to type '(input: RequestInfo, init?: RequestInit | undefined) => Promise<Response>'.
      Types of parameters 'input' and 'input' are incompatible.
        Type 'RequestInfo' is not assignable to type 'string | Request | undefined'.
          Type 'Request' is not assignable to type 'string | Request | undefined'.
            Type 'Request' is not assignable to type 'import("/Users/rahul/work/r3pi/vi-image-contours/node_modules/apollo-env/lib/fetch/fetch").Request'.
              Types of property 'headers' are incompatible.
                Type 'Headers' is missing the following properties from type 'Headers': entries, keys, values, [Symbol.iterator]

@grantwwu ：私は使用します
"apollo-client"： "^ 2.4.12"、
"apollo-env"： "^ 0.3.2"、
"apollo-link-http"： "^ 1.5.9"、

アプリの依存関係管理にyarnを使用しています

プロジェクトのgraphql-requestに切り替えました。

@jacobtani tsconfigはどのように見えますか？

apollo-envは、HttpLinkが期待するものとはまだ異なります。 入力パラメータは必要ありません

私はこのようにそれをオーバーライドすることになり、それはうまくいきました

declare module "apollo-env" {
  export function fetch(
    input: RequestInfo,
    init?: RequestInit,
  ): Promise<Response>;
}

これを使ってノードからこれを使っています

"apollo-env": "^0.3.3"
"apollo-link-http": "^1.5.11"

DOCS APOLLO TEAMにパッチを当ててください！ この問題は1年以上前のものです

@rlancer上記のように、 apollo-envにはパッチが必要なため、コメントはまだ修正されていないため、これが当てはまると思います。 これはこのリポジトリではなく、 apollo-toolingリポジトリにあります。

@JoviDeCroock機能するソリューションがあります。ドキュメントは、失敗して回避策を求めてGoogleに強制するのではなく、それらを使用するように指示する必要があります。

@JoviDeCroock apollo-envとapollo-toolingはどちらも同じフェッチ型宣言を持ち、どちらもHttpLinkが期待するGlobal ['fetch']とは異なります。 しかし、これは問題ではないようです。 apollo-envと同じ宣言でモジュールを自分で宣言しても、型については文句を言いません。 たぶん、エクスポートが機能していません

まあ、私は個人的にこれらを使用することはありません。 あなたが私に解決策を指摘することができれば私は喜んでpr

これらの2つのタイプを同じにすることでうまくいくはずだと思います。

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

declare interface GlobalFetch {
  fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;
}

@jmcaありがとうございます、あなたは私の日を救いました、問題が発生しましたjestテストを使用しているときに新しいcreateUploadLinkで自己が定義されていません。

@tafelito解決策をありがとう、それは非常に役に立ちました、しかし私は本当のエラーが発見されたと思います、そしてそれは新しいTypeScriptアップデートによるものです。 3.6バージョンでは、 GlobalFetchが削除され、代わりにWindowOrWorkerGlobalScopeが使用されるため、package.json "typescript": "3.5.1"依存関係でバージョンを閉じる必要があります。

ここにリンクがあります

上記のコメントをエコーするには、私のリポジトリはタイプスクリプトv3.5.3に固執する必要があります

これらの2つのタイプを同じにすることでうまくいくはずだと思います。

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

declare interface GlobalFetch {
  fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;
}

@tafelitoに感謝します。2番目の部分だけを使用して修正できました。

同じ問題。

"@types/node-fetch": "^2.5.0",
 "typescript": "^3.5.1"
"node-fetch": "^2.6.0",

error TS2345: Argument of type '{ uri: string; fetch: typeof fetch; }' is not assignable to parameter of type 'Options'.
  Types of property 'fetch' are incompatible.
    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("/Users/ldu020/workspace/github.com/mrdulin/apollo-graphql-tutorial/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.

8 const link = new HttpLink({ uri: 'http://localhost:3000', fetch });

私のアプリケーションでも同じ問題があります。 私は次のようにanyへのキャストを解決します。

import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-boost'
import { createHttpLink } from 'apollo-link-http'
import fetch from 'node-fetch'

const httpLink = createHttpLink({
//ISSUE: https://github.com/apollographql/apollo-link/issues/513
fetch: fetch as any,
uri: 'https://api.graph.cool/simple/v1/swapi',
})

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

export default client

最終的に問題となるのは、 node-fetchと関連する型が意図的に仕様から逸脱していることです。

// copied directly from the @types/node-fetch
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/node-fetch/index.d.ts
Request {
   ...
    // node-fetch extensions to the whatwg/fetch spec
    agent?: Agent | ((parsedUrl: URL) => Agent);
    compress: boolean;
    counter: number;
    follow: number;
    hostname: string;
    port?: number;
    protocol: string;
    size: number;
    timeout: number;

したがって、これらの追加を省略した新しい型をダウンキャストまたは作成しない場合、コンパイラエラーは避けられません。

node-fetchをダウンキャストすることを選択しました：

import nodeFetch from 'node-fetch'
import { WhatWgFetch } from '../src/interfaces' // export type WhatWgFetch = typeof fetch
const fetch = (nodeFetch as unknown) as WhatWgFetch

それは素晴らしいことではありませんが、node-fetch！= fetch、これは...不平を言う...誤解を招く恐れがあります。 node-fetch-like方が適切だった可能性があり、ノードフェッチに準拠した状態を維持するためにベースノードフェッチの実装に拡張機能を_out_残しておくと、私たちのようなものに有利になります:)

これは完全に無関係かもしれません...しかし...昨日かそこらで同じ問題がありました...「フェッチ」はブラウザで利用できるものであり、サーバー側では利用できないことを理解するためだけです。 アプリケーションがブラウザからフェッチを実行する場合、サーバー側で接続を事前にレンダリングするのは無意味です。

私の場合、NextJSを使用して、 https： //nextjs.org/docs#with -no-ssrのように、サーバー側でhttp-linkがレンダリングされないようにする必要があるコンポーネントを変更しました。

node-fetchと@types/node-fetchをインストールする代わりに、同じ問題が発生していました。 apollo-envとbamを直接使用しました。 すべてのエラーがなくなりました！

私はこれを同形フェッチで動作させることができました

package.json（appsyncで使用されるバージョンとの互換性のために選択されたすべてのバージョン）

    "apollo-link": "1.2.3",
    "apollo-link-context": "1.0.9",
    "apollo-link-http": "1.3.1",
    "aws-appsync": "^3.0.2",
    "isomorphic-fetch": "^2.2.1",
...
    "@types/isomorphic-fetch": "0.0.35",

... / types / index.d.ts

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

declare interface GlobalFetch {
  fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": [ "dom",  "es6",  "esnext.asynciterable" ]
     ...
   },
  "types": [  "node", "aws-sdk"  ],
  "include": [ "./src/**/*.ts" ],
...

コード

import * as fetch from 'isomorphic-fetch';

const client = new AWSAppSyncClient(appSyncClientOptions, {
        link: createAppSyncLink({
          ...appSyncClientOptions,
          resultsFetcherLink: ApolloLink.from([
            createHttpLink({
              fetch: fetch as GlobalFetch['fetch'],
              uri: appSyncClientOptions.url
            })
          ])
        })
      });

cross-fetch検討してください！

これは、typescriptとノード（ブラウザーではない）で機能します。

import fetch from 'cross-fetch'

const httpLink = new HttpLink({
  uri: "<your-uri>",
  fetch,
})