Apollo-link-rest: "हेडर परिभाषित नहीं है" वेक्सिन मिनी प्रोग्राम में अपोलो-लिंक-रेस्ट का उपयोग करते समय होता है

हाय @ जेनिस 1114 , मैं

अक्सर, यदि शीर्षलेख अनुपलब्ध हैं, तो फ़ेच भी अनुपलब्ध होगा। तो एक पॉलीफिल जो दोनों के लिए काम कर सकता है वह है: https://github.com/bitinn/node-fetch

हाय @fbartho , आपके त्वरित उत्तर के लिए धन्यवाद। मैंने फ़ेच हेडर सक्षम करने के लिए पॉलीफ़िल का उपयोग करने का प्रयास किया है, लेकिन फिर भी त्रुटियां मिलती हैं।

और मैंने पाया कि वीक्सिन के तहत, यह लाने के लिए wx.request का उपयोग करता है, जो विंडो से संबंधित चर का समर्थन नहीं करता है, इसलिए मुझे डर है कि पॉलीफिल काम नहीं करेगा।

और क्या मुझे पता है कि अपोलो-लिंक-रेस्ट के स्रोत कोड में हेडर लूप को छोड़ने में मदद करने के लिए कोई हैक या कार्यान्वयन होगा? या क्या आप कृपया विभिन्न परिदृश्यों के अनुरूप कुछ कस्टम विकल्प दे सकते हैं?

आप एक रैपर फ़ंक्शन प्रदान करने के लिए अपोलोलिंकरेस्ट के लिए customFetch पैरामीटर का उपयोग कर सकते हैं, यह रैपर फ़ंक्शन पॉलीफ़िल से विंडो-आधारित-हेडर ले सकता है, और इसे पारंपरिक ऑब्जेक्ट हैश में फ़्लैट कर सकता है।

• https://www.apollographql.com/docs/link/links/rest/#custom -fetch

निम्नलिखित की तरह कुछ (अनचाहे, मेरे ब्राउज़र में लिखा गया है):

function customFetch(url, options) {
   const headers = options.headers.entries().reduce((accumulator, h) => { accumulator[h[0]] = h[1];  return accumulator;}, {})
   return fetch(url, {…options, headers});
}
// Elsewhere: new RestLink({ customFetch, ...

आपकी कृपया प्रतिक्रिया के लिए बहुत सराहना करते हैं, मैं इस पॉलीफिल का उपयोग वेक्सिन विकास में करने का प्रयास करूंगा।

और जैसा कि मैंने RestLink.ts में स्रोत कोड पढ़ा है, यह हेडर तक पहुंचने का प्रयास करेगा, जो कि वीक्सिन में उपलब्ध नहीं है। यह global में चर निर्दिष्ट कर सकता है।

तो मुझे आश्चर्य है कि क्या कोई कस्टम या ओवरराइड सेटिंग्स, रेस्टलिंक कन्स्ट्रक्टर प्रक्रिया के दौरान लागू की जा सकती हैं?

आपके इतने शानदार सुझावों के लिए फिर से शुभकामनाएँ।

हाय @fbartho इस मुद्दे को वेक्सिन और संबंधित विशेष ब्राउज़र में ठीक करने के लिए, मैंने नीचे एक पीआर बनाया है:
हेडर्स इश्यू फिक्स

क्या आप कृपया मदद कर सकते हैं और समीक्षा कर सकते हैं कि कोड पीआर मास्टर में विलय के लिए उपलब्ध है या नहीं
बहुत सराहना और बहुत बहुत धन्यवाद अगर वह मदद कर सकता है।

मुझे "next": "^9.0.3" में भी यही समस्या है

मुझे यह समस्या अगले संस्करण ^8.1.0 साथ भी आ रही है। मेरे ग्राफ एपीआई के लिए मैं isomorphic-unfetch , संस्करण ^3.0.0 का उपयोग पॉलीफिल करने के लिए करता हूं:

import fetch from 'isomorphic-unfetch'
const graphLink = createHttpLink({ uri, fetch })

लेकिन बाकी लिंक के साथ पॉलीफिल के लिए एक ही पैकेज का उपयोग करने से काम नहीं चला:

const restLink = new RestLink({
  uri,
  customFetch: fetch,
})

मैंने आपकी कस्टमफ़ेच विधि का उपयोग करके node-fetch की भी कोशिश की:

import fetch from 'node-fetch'

function customFetch(url, options) {
  const headers = options.headers.entries().reduce((accumulator, h) => {
    accumulator[h[0]] = h[1]
    return accumulator
  }, {})
  return fetch(url, { ...options, headers })
}

const restLink = new RestLink({
  uri: CONTENTFUL_CONTENT_DELIVERY_API,
  customFetch,
})

देव मोड में आगे चलने पर दोनों ही मामलों में मुझे ReferenceError: Headers is not defined मिला।

यहां विचार पसंद है, अगर आप सर्वर वातावरण में कार्यान्वित करने के लिए कुछ दिशा प्रदान कर सकते हैं तो अच्छा लगेगा। धन्यवाद!

आप अभी भी अपने स्वयं के कस्टमफ़ेच एपीआई का उपयोग करते हुए हेडर एपीआई को पॉलीफिल कर सकते हैं!

मुझे बताएं कि क्या आप वहां कुछ नमूना कोड चाहते हैं, लेकिन मुझे विश्वास है कि यह बहुत अधिक परेशानी के बिना करने योग्य है। मैं इस मिनट अपने कंप्यूटर पर नहीं हूं।

@fbartho जब आपके पास मौका हो तो कुछ नमूना कोड बहुत अच्छा होगा! मैंने उस पर वार किया, लेकिन सफल नहीं हुआ। धन्यवाद!

import * as Polyfillheaders from 'fetch-headers'
import fetch from 'isomorphic-unfetch'

// hook in the Headers polyfill for your environment!
global.Headers = global.Headers || Polyfillheaders;

function customFetch(url, options) {
  const headers = options.headers.entries().reduce((accumulator, h) => {
    accumulator[h[0]] = h[1]
    return accumulator
  }, {})
  return fetch(url, { ...options, headers })
}

const restLink = new RestLink({
  uri: CONTENTFUL_CONTENT_DELIVERY_API,
  customFetch,
})

ऊपर जैसा कुछ काम कर सकता है @ 2wheelcoder

धन्यवाद! मुझे इसे एक शॉट देने का मौका मिलने के बाद मैं यहां वापस रिपोर्ट करूंगा।

@fbartho हाय! मैं आईओएस 9.3.5 पर इस समस्या का सामना कर रहा हूं। मैंने fetch-headers पॉलीफिल आयात करने की कोशिश की लेकिन काम नहीं किया।
मैंने पाया कि fetch-headers से हेडर इंस्टेंस में forEach विधि नहीं है (नीचे देखें)।

क्या कोई और उपाय है?

@fbartho हाय! मैं आईओएस 9.3.5 पर इस समस्या का सामना कर रहा हूं। मैंने fetch-headers पॉलीफिल आयात करने की कोशिश की लेकिन काम नहीं किया।
मैंने पाया कि fetch-headers से हेडर इंस्टेंस में forEach विधि नहीं है (नीचे देखें)।

क्या कोई और उपाय है?

मैंने फ़ेच पॉलीफ़िल का उपयोग करके इस समस्या को हल किया।

मैं इसे बंद करने जा रहा हूं, क्योंकि मेरा मानना ​​है कि हम इसे ऐप-साइड पर पॉलीफ़िल के साथ हल कर सकते हैं, और हम पॉलीफ़िल को इस रिपॉजिटरी की निर्भरता नहीं बनाना चाहते हैं।

मैं इसे पॉलीफिल के साथ हल नहीं कर पाया हूं। मैंने आइसोमोर्फिक-फ़ेच, आइसोमोर्फिक-अनफ़ेच, फ़ेच-हेडर इत्यादि की कोशिश की है और हमेशा current.forEach परिभाषित नहीं किया जा रहा है या TypeError: Right-hand side of 'instanceof' is not an object बारे में एक समस्या के साथ समाप्त होता है। कोई मदद?

@VinSpee क्या आपने कभी इस फ़ेच पॉलीफ़िल की कोशिश की है।

@lintuming हाँ, लेकिन यह सर्वर पर काम नहीं करता है।

@VinSpee हो सकता है कि आप उपयोग कर सकते यह , ऐसा लगता है वे forEach विधि।

आशा है कि यह काम।

@lintuming मदद करने की कोशिश करने के लिए धन्यवाद। उस के साथ, मुझे मिलता है:

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

समस्याओं का उलझा हुआ जाल लगता है

@VinSpee क्षमा करें, मुझे नहीं पता कि ऐसा क्यों होता है। लेकिन मुझे लगता है कि यह मदद कर सकता है:
https://stackoverflow.com/questions/7042340/error-cant-set-headers-after-the-are-sent-to-the-client

यहाँ मेरे लिए काम करना समाप्त हो गया है:

import clientFetch from 'unfetch';
import serverFetch, { Headers as ServerHeaders } from 'node-fetch';

const client = typeof document !== 'undefined';
global.Headers = client ? global.Headers : ServerHeaders;
const customFetch = client ? clientFetch : serverFetch;

const acmeLink = new JsonApiLink({
  …
  credentials: 'same-origin',
  customFetch,
});

@VinSpee मुझे एक ही समस्या का सामना करना पड़ रहा है और मैंने आपके समाधान के साथ इस समस्या को ठीक करने का प्रयास किया लेकिन मैं सफल नहीं हुआ।
क्या आप कृपया अपना कामकाजी कोड साझा कर सकते हैं

धन्यवाद @VinSpee- यह वही था जो मुझे चाहिए था

मैं कस्टम भ्रूण का उपयोग करके इस समस्या को ठीक करने में सक्षम था

import fetch from "isomorphic-fetch"

const restLink = new RestLink({
  uri: "https://...",
  customFetch: fetch,
  headers: {
    "Content-Type": "application/json",
  },
})

@VinSpee के समाधान ने मेरे लिए Gatsby JS एप्लिकेशन के लिए भी काम किया।