당신이 사용하는 경우 어떤 일이 발생 createHttpLink 대신 new HttpLink ?

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

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

@dejayc createHttpLink를 사용할 때도 동일한 오류가 발생합니다.

사실, 나는 문제를 알아 냈습니다. node-fetch 2.x 는 _apollo-link_와 호환되지 않습니다. _fetch_의 서명이 다릅니다.

node-fetch 2.x는 apollo-link와 호환되지 않습니다. fetch의 서명이 다릅니다.

아, 당신이 그것을 펀치 할 수 있다고 생각합니다.

오늘 내 동형 앱에서 이 문제를 발견했습니다. 나는 특히 요즘 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 가 대안이지만, 현재 isomorphic-fetch HttpLink 가 TypeScript에서

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

const link = new HttpLink({
  fetch
})

npmjs.com 문서는 사용자가 node-fetch를 사용하도록 권장하지만 어떤 버전을 지정하지는 않습니다. 해당 문서를 어떻게 업데이트할 수 있습니까?

참고: whatwg-fetch 를 사용하는 것이 실행 가능한 해결 방법입니다.

이에 대한 움직임이 있었습니까?

사용 cross-fetch 그냥 사용하기 때문에 이상한 해결 방법처럼 보인다 node-fetch . 사실 그게 문제가 아닌가요?

whatwg-fetch 는 서버 측에서 해결 방법이 아닙니다.

누군가가 모든 가져오기 구현에서 작동하지만 일부 유형 검사를 유지하는 올바른 유형 정의가 포함된 PR을 열면 @stubailo 저에게 연락해 주세요. 병합을 시도하겠습니다!

@stubailo Apollo Server에서 이것을 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 유형의 강제를 사용할 수 있습니다 ...

물론입니다. 그러나 어쨌든 다른 것으로 강제 캐스팅하려는 경우 유형을 설치하는 요점은 무엇입니까?
이 경우 내 솔루션을 사용할 수도 있습니다.

죄송합니다. 당신이 한 일을 잘못 읽었습니다. 이전 의견을 무시하십시오.

그러나 "lib" 필드에 "dom"이 있는 경우에만 GlobalFetch가 제공되므로 브라우저를 대상으로 하도록 tsconfig를 수정해야 합니다. https://github.com/apollographql/apollo-link/issues/ 273#이슈 댓글 -347878009

둘째, .d.ts 수동으로 수정하는 대신 GlobalFetch['fetch'] 를 HTTPLink 생성자에 전달할 수 없습니까? 그러면 훨씬 덜 숨겨집니다.

1. 물론, 하지만 HttpLink의 입력 을 따르려면 GlobalFetch['fetch'] 관계없이 사용해야 하므로 해당 요구 사항을 해결할 방법이 없습니다.

2. 나는 따르지 않는다. GlobalFetch['fetch'] 는 변수가 아닌 유형입니다.
   node-fetch를 가져온 다음 GlobalFetch['fetch'] 로 캐스팅하는 것을 의미합니까?
   내 프로젝트에서 noImplictAny 활성화되어 있으므로 정의가 없는 항목을 가져올 수 없기 때문에 옵션이 아닙니다.

저에게 맞는 해결 방법일 뿐 🤷‍♀️, 하지만 완벽하지 않다는 것을 깨달았습니다(키워드: _workaround_).

좋은 해결책은 타이핑을 GlobalFetch['fetch'] 의 합집합과 노드 가져오기 내보내기의 기본 유형으로 변경하는 것입니다.
또는 권장 라이브러리를 GlobalFetch['fetch'] (whatwg-fetch 또는 기타)를 준수하는 노드 가져오기 라이브러리로 변경하십시오.

1. 아, 그게 필요한지 몰랐습니다. TIL.

2. 죄송합니다. 그냥 쉬는 날이에요. 맞습니다. 그것은 변수가 아니라 유형입니다.

https://www.npmjs.com/package/whatwg-fetch 는 "이 프로젝트는 Node.js 환경에서 작동하지 않습니다. 웹 브라우저 전용입니다. 애플리케이션이 패키지를 만들고 서버에서 실행하십시오."

예, 누군가 유형을 수정하여 버그를 올바르게 수정해야 합니다.

자세히 살펴보니 주로 node-fetch 의 문제인 것 같아서 위의 문제를 열어봤습니다. 그러나 그들이 우리에게 우리의 유형을 변경하라고 말할 수도 있습니다.

좋아요, node-fetch 는 우리에게 유형을 변경하라고 말하는 것 같습니다. 한 가지 해킹은 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 : 나는 사용
"아폴로 클라이언트": "^2.4.12",
"아폴로 환경": "^0.3.2",
"아폴로 링크-http": "^1.5.9",

내 앱에서 종속성 관리를 위해 원사를 사용합니다.

내 프로젝트에 대해 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"

문서 아폴로 팀을 패치하십시오! 이 문제는 1년이 넘었습니다.

@rlancer 위에서 언급했듯이 apollo-env 에 패치가 필요하기 때문에 아직 수정되지 않았기 때문에 이 경우라고 가정합니다. 이것은 이 저장소가 아니라 apollo-tooling 저장소에 있습니다.

@JoviDeCroock 작동하는 솔루션이 있습니다. 문서는 실패하고 해결 방법을 위해 사람들을 Google에 강제로

@JoviDeCroock apollo-env 및 apollo-tooling 모두 동일한 가져오기 유형 선언을 가지며 둘 다 HttpLink가 예상하는 Global['fetch']와 다릅니다. 그러나 이것은 문제가 아닌 것 같습니다. apollo-env 와 동일한 선언으로 모듈을 직접 선언하면 유형에 대해 불평하지 않습니다. 내보내기가 작동하지 않을 수 있습니다.

글쎄, 나는 개인적으로 이것을 사용하지 않습니다. 당신이 나에게 해결책을 알려줄 수 있다면 기꺼이 홍보할 것입니다.

이 2가지 유형을 동일하게 만들어서 작동해야 한다고 생각합니다.

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

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

@jmca 고마워요, 당신은 제 하루를 구했습니다.

@tafelito 해결해 주셔서 감사합니다. 매우 도움이 되었지만 실제 오류가 발견되었으며 새로운 TypeScript 업데이트로 인한 것 같습니다. 3.6 버전에서는 GlobalFetch 가 제거되고 대신 WindowOrWorkerGlobalScope 가 사용되므로 package.json "typescript": "3.5.1" 종속성에서 버전을 닫아야 합니다.

여기 링크가 있습니다

위의 의견을 반영하기 위해 내 저장소는 v3.5.3 typescript를 고수해야 합니다.

이 2가지 유형을 동일하게 만들어서 작동해야 한다고 생각합니다.

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

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

두 번째 부분만 사용하여 고칠 수 있었습니다. @tafelito 감사합니다.

같은 문제.

"@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, which ...grumbles...는 오해의 소지가 있습니다. node-fetch-like 가 더 적절했을 수 있으며 기본 노드 가져오기 구현에 확장자를 _out_ 남겨두어 노드 가져오기를 준수하도록 했다면 우리에게 호의를 보였을 것입니다. :)

이것은 완전히 관련이 없을 수도 있습니다 ...하지만 ... 마지막 날 정도에 같은 문제가있었습니다 ... '가져오기'가 브라우저에서 사용할 수 있지만 서버 측에서는 사용할 수 없다는 것을 깨달았습니다. 애플리케이션이 브라우저에서 가져오기를 수행하려는 경우 서버 측에서 연결을 미리 렌더링하는 것은 무의미합니다.

제 경우에는 NextJS를 사용하여 https://nextjs.org/docs#with -no-ssr에 따라 http-link가 서버 측에서 렌더링 되지 않도록 해야 하는 구성 요소를 변경했습니다.

node-fetch 및 @types/node-fetch 를 설치하는 대신 apollo-env 및 bam으로 바로 이동했습니다! 모든 오류가 사라졌습니다!

나는 이것을 isomorphic-fetch로 작업하도록 관리했습니다.

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",

.../typings/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 및 node(브라우저가 아님)에서 작동합니다.

import fetch from 'cross-fetch'

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