अगर आप का उपयोग क्या होता है createHttpLink के बजाय new HttpLink ?

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

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

@dejayc createHttpLink का उपयोग करते समय यह वही त्रुटि देता है।

दरअसल, मैंने समस्या का पता लगा लिया। नोड-फ़ेच 2.x _apollo-link_ के साथ संगत नहीं है। _fetch_ का सिग्नेचर अलग है।

नोड-फ़ेच 2.x अपोलो-लिंक के साथ संगत नहीं है। लाने का हस्ताक्षर अलग है।

आह, मुझे लगता है कि आप इसे डक पंच कर सकते हैं।

मैं आज अपने आइसोमोर्फिक ऐप में इस मुद्दे पर आया था। मैं विशेष रूप से एसएसआर के इन दिनों में वैश्विक फ़ेच डिफ़ॉल्ट फ़ॉलबैक होने से पूरी तरह सहमत नहीं हूं, लेकिन कम से कम त्रुटि कुछ जानकारीपूर्ण थी:

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 जिस तरह से आपने टाइपस्क्रिप्ट के लिए सुझाव दिया था वह मेरे लिए काम करता है! धन्यवाद!!

मैं आज इस मुद्दे में भाग गया, और पता चला कि हम node-fetch v2 के साथ संगत नहीं हैं, मेरा मानना ​​है कि हमें इसे ठीक करना चाहिए।

मैं अभी cross-fetch का उपयोग करना शुरू करता हूं लेकिन यह सिर्फ fetch: any आयात करता है ...

(7 मई, 2018 का अनुसरण करें: cross-fetch अब टाइपस्क्रिप्ट प्रकार परिभाषाओं के साथ आता है)

cross-fetch को अभी तक टाइपस्क्रिप्ट प्रकार की परिभाषाओं के साथ शिप नहीं किया गया है (न ही @DefinitelyTyped)।

lquixada/cross-fetch#12 के विलय के लिए प्रतीक्षा करते हुए cross-fetch एक विकल्प है, मैंने पाया कि isomorphic-fetch अब तक टाइपस्क्रिप्ट में HttpLink साथ ठीक काम कर रहा है:

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 सर्वर साइड पर हममें से उन लोगों के लिए कोई समाधान नहीं है।

अगर कोई पीआर खोलता है जिसमें सही प्रकार की परिभाषाएं शामिल हैं जो सभी फ़ेच कार्यान्वयन के साथ काम करेगी लेकिन कुछ प्रकार की जांच को बनाए रखती है, तो कृपया मुझे @stubailo करें और मैं विलय करने का प्रयास करूंगा!

@stubailo अपोलो सर्वर पर हम इसे apollo-server-env हिस्से के रूप में उपयोग करते हैं ।

HttpLink का उपयोग करना वैकल्पिक है, यह मेरे लिए काम करता है:

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

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

इस पर कोई भी समाचार ? नोड-फ़ेच अभी भी अपोलो-लिंक और टीएस के साथ मुद्दों का कारण बनता है।

कोई खबर? अभी भी 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 प्रकार की जबरदस्ती चीज का उपयोग कर सकते हैं ...

निश्चित रूप से, लेकिन प्रकारों को स्थापित करने का क्या मतलब है, अगर आप इसे किसी और चीज़ पर डालने के लिए मजबूर कर रहे हैं?
उस मामले में भी मेरे समाधान का उपयोग कर सकते हैं।

क्षमा करें, मैंने गलत पढ़ा कि आप क्या कर रहे थे, मेरी पिछली टिप्पणी पर ध्यान न दें।

हालाँकि, इसके लिए आपको ब्राउज़र को लक्षित करने के लिए अपने tsconfig को संशोधित करने की आवश्यकता है, क्योंकि GlobalFetch केवल तभी प्रदान किया जाता है जब आपके पास "lib" फ़ील्ड में एक प्रविष्टि के रूप में "डोम" हो: https://github.com/apollographql/apollo-link/issues/ २७३#मुद्दा -३४७८७८००९

दूसरे, .d.ts को मैन्युअल रूप से संशोधित करने के बजाय, क्या आप HTTPLink कंस्ट्रक्टर को केवल GlobalFetch['fetch'] पास नहीं कर सकते? यह इसे बहुत कम छुपाता है।

1. निश्चित रूप से, लेकिन एचटीपीलिंक के टाइपिंग के अनुरूप होने के लिए आपको GlobalFetch['fetch'] का उपयोग करना होगा, इसलिए मुझे उस आवश्यकता के आसपास कोई रास्ता नहीं दिख रहा है।

2. मैं अनुसरण नहीं करता। GlobalFetch['fetch'] एक प्रकार है, चर नहीं।
   क्या आपका मतलब नोड-फ़ेच आयात करना और फिर इसे GlobalFetch['fetch'] ?
   यह मेरे लिए विकल्प पर नहीं है क्योंकि मेरे पास मेरी परियोजनाओं में noImplictAny सक्षम है इसलिए मैं कुछ भी आयात नहीं कर सकता जिसकी परिभाषा नहीं है।

यह सिर्फ एक समाधान है जो मेरे लिए काम करता है ‍♀️, लेकिन मुझे एहसास है कि यह बिल्कुल सही नहीं है (कीवर्ड: _वर्कअराउंड_)।

मुझे लगता है कि टाइपिंग को केवल GlobalFetch['fetch'] संघ में बदलना और नोड-फ़ेच के निर्यात के डिफ़ॉल्ट प्रकार को बदलना एक अच्छा समाधान होगा।
या बस अनुशंसित लाइब्रेरी को नोड फ़ेच लिब में बदलें जो GlobalFetch['fetch'] (whatwg-fetch या जो कुछ भी) के अनुरूप हो।

1. आह, मुझे नहीं पता था कि इसकी आवश्यकता थी। टीआईएल।

2. क्षमा करें, मेरे पास अभी वास्तव में छुट्टी का दिन है। आप सही हैं, यह एक प्रकार है, चर नहीं।

https://www.npmjs.com/package/whatwg-fetch स्पष्ट रूप से बताता है कि "यह प्रोजेक्ट Node.js वातावरण के तहत काम नहीं करता है। यह केवल वेब ब्राउज़र के लिए है। आपको यह सुनिश्चित करना चाहिए कि आपका एप्लिकेशन कोशिश नहीं करता है पैकेज करें और इसे सर्वर पर चलाएं।"

हां, किसी को वास्तव में प्रकारों को ठीक करके बग को ठीक से ठीक करना चाहिए।

आगे की समीक्षा करने पर, यह मुख्य रूप से node-fetch साथ एक समस्या प्रतीत होती है, इसलिए मैंने उपरोक्त मुद्दे को खोला। यह पूरी तरह से संभव है कि वे हमें केवल हमारे प्रकार बदलने के लिए कहेंगे।

ठीक है, node-fetch ऐसा लगता है कि हमें बस अपने प्रकार बदलने के लिए कह रहा है। एक हैक node-fetch के प्रकारों को आयात करना और इसे वर्कअराउंड के रूप में जोड़ना होगा?

@grantwwu क्षमा करें, ग्राफक्यूएल शिखर सम्मेलन में चीजें बहुत व्यस्त हैं, लेकिन हमने हाल ही में एक apollo-env पैकेज का उपयोग करना शुरू किया है जो सही प्रकारों के साथ node-fetch पुन: निर्यात करता है: https://github .com/apolographql/apolo-tooling/tree/master/packages/apolo-env

(हालांकि हम संभवत: वैश्विक फ़ेच निर्यात को अलग करना चाहेंगे)

मैंने अभी-अभी एक import { fetch } from 'apollo-env' और मैं _still_ को HttpLink कंस्ट्रक्टर में पास करते समय टाइपस्क्रिप्ट त्रुटियाँ प्राप्त कर रहा हूँ।

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 आपने अपोलो-http- लिंक और अपोलो-एनवी के किन संस्करणों का उपयोग किया? इसके अलावा, यह नोड के साथ है, है ना?

हाँ यहाँ भी वही। अपोलो-एनवी का उपयोग करने से मेरे लिए समस्या का समाधान नहीं होता है।

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

मैं अपने ऐप में निर्भरता प्रबंधन के लिए यार्न का उपयोग करता हूं

मैंने अपनी परियोजना के लिए ग्राफ़िकल-अनुरोध पर स्विच किया।

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

कृपया डॉक्स अपोलो टीम को पैच करें! यह मुद्दा एक साल से अधिक पुराना है

@rlancer मुझे लगता है कि यह मामला है क्योंकि जैसा कि आपकी टिप्पणी के ऊपर बताया गया है, यह अभी तक तय नहीं हुआ है क्योंकि apollo-env को पैच की आवश्यकता है। यह इस रेपो में नहीं बल्कि apollo-tooling रिपॉजिटरी में है।

@JoviDeCroock ऐसे समाधान हैं जो काम करते हैं, दस्तावेज़ों को उनका उपयोग करने के लिए इंगित करना चाहिए जो विफल रहता है और लोगों को कामकाज के लिए Google पर मजबूर करता है।

@JoviDeCroock दोनों apollo-env और apollo-tooling में समान फ़ेच प्रकार की घोषणा है और दोनों वैश्विक ['fetch'] से भिन्न हैं जो HttpLink को उम्मीद है। लेकिन यह समस्या प्रतीत नहीं होती है, अगर मैं मॉड्यूल को apollo-env के समान घोषणा के साथ घोषित करता हूं तो यह प्रकारों के बारे में शिकायत नहीं करता है। शायद निर्यात काम नहीं कर रहा

खैर, मैं व्यक्तिगत रूप से इनका कभी भी उपयोग नहीं करता। यदि आप मुझे किसी समाधान की ओर संकेत कर सकते हैं तो मुझे खुशी होगी

मुझे लगता है कि इन 2 प्रकारों को समान बनाकर काम करना चाहिए।

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

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

@jmca धन्यवाद यार, आपने मेरा दिन बचाया, हेड बैंग मिला समस्या स्वयं को नए createUploadLink में जेस्ट परीक्षण का उपयोग करते समय अपरिभाषित किया गया है।

@tafelito आपके समाधान के लिए धन्यवाद, यह बहुत मददगार था, लेकिन मुझे लगता है कि वास्तविक त्रुटि मिली थी और यह नए टाइपस्क्रिप्ट अपडेट के कारण है। इसके 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

वही मुद्दा।

"@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-like अधिक उपयुक्त हो सकता है, और नोड-फ़ेच अनुपालन को बनाए रखने के लिए बेस नोड-फ़ेच कार्यान्वयन में एक्सटेंशन _out_ को छोड़कर हम में से एक को पसंद किया जाएगा :)

यह पूरी तरह से अप्रासंगिक हो सकता है ... लेकिन ... पिछले दिन या तो एक ही समस्या थी ... केवल यह महसूस करने के लिए कि 'fetch' कुछ ऐसा है जो ब्राउज़र में उपलब्ध है, लेकिन सर्वर-साइड पर नहीं। यदि आपका एप्लिकेशन ब्राउज़र से फ़ेचिंग करने जा रहा है, तो सर्वर-साइड पर कनेक्शन को प्री-रेंडर करना व्यर्थ है।

मेरे मामले में, NextJS का उपयोग कर, मैं घटक है जो http लिंक की जरूरत के अनुसार सर्वर साइड पर रेंडर नहीं किया जा करने के लिए बदल https://nextjs.org/docs#with -no-एसएसआर

मुझे वही समस्या हो रही थी, 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",

.../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 पर विचार करें!

यह टाइपस्क्रिप्ट और नोड (ब्राउज़र नहीं) के साथ काम करता है।

import fetch from 'cross-fetch'

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