Apollo-link-rest: `@rest` निर्देश SSR परिवेश पर काम नहीं करता

थोड़ा और खुदाई, मैं एसएसआर आदि के बारे में चिंता किए बिना, नोडजेएस में क्वेरी निष्पादित करने की कोशिश कर रहा हूं,

और यह कोड है:

            client
                .query({query: Site, variables: {domain: "demo.example.com"}})
                .then(
                    () => console.log("Fullfilled"),
                    ({graphQLErrors, networkError, message, extraInfo}) =>
                        console.error("Rejected", graphQLErrors, networkError, message,extraInfo)
                )

इस परिणाम के साथ:

Rejected [] TypeError: current.forEach is not a function
    at /home/richard/Projects/skil/demo-component/node_modules/src/restLink.ts:671:13
    at Array.reduce (<anonymous>)
    at concatHeadersMergePolicy (/home/richard/Projects/skil/demo-component/node_modules/src/restLink.ts:664:23)
    at RestLink.request (/home/richard/Projects/skil/demo-component/node_modules/src/restLink.ts:1235:21)
    at ApolloLink.request (/home/richard/Projects/skil/demo-component/node_modules/apollo-link/src/link.ts:76:19)
    at /home/richard/Projects/skil/demo-component/node_modules/apollo-link/src/link.ts:78:26
    at ApolloLink.request (/home/richard/Projects/skil/demo-component/node_modules/src/ApolloClient.ts:139:16)
    at ApolloLink.request (/home/richard/Projects/skil/demo-component/node_modules/apollo-link/src/link.ts:76:19)
    at /home/richard/Projects/skil/demo-component/node_modules/apollo-link/src/link.ts:78:26
    at DedupLink.request (/home/richard/Projects/skil/demo-component/node_modules/apollo-link-dedup/src/dedupLink.ts:39:30) Network error: current.forEach is not a function undefined

restLink.ts:671 कोड का यह ब्लॉक है:

export const concatHeadersMergePolicy: RestLink.HeadersMergePolicy = (
  ...headerGroups: Headers[]
): Headers => {
  return headerGroups.reduce((accumulator, current) => {
    if (!current) {
      return accumulator;
    }
    if (!current.forEach) {
      current = normalizeHeaders(current);
    }
    current.forEach((value, key) => {    // <-- This line here
      accumulator.append(key, value);
    });

    return accumulator;
  }, new Headers());
};

https://github.com/apolographql/apolo-link-rest/blob/master/src/restLink.ts#L671

साथ ही, अगर मैं forEach को प्रतिस्थापित करता हूं जो इसके साथ विफल रहता है:

    Object.keys(current).forEach(key => {
      accumulator.append(key, current[key])
    })

सब कुछ फिर से काम करता है ...

चुनौती , मैं ऊपर की पंक्तियों के उद्देश्य को नहीं समझता:

    if (!current.forEach) {
      current = normalizeHeaders(current);
    }

चूंकि यह हमेशा विफल रहेगा, और हमेशा normalizeHeaders() निष्पादित करेगा?

मैं यहां एक अंग पर जा रहा हूं और अनुमान लगाता हूं कि नोड new Headers() के उपयोग से परेशान हो रहा है। एक नए शीर्षलेख उदाहरण में इसके प्रोटोटाइप पर forEach विधि है। यदि कम करने के लिए आपूर्ति की गई वस्तु में प्रत्येक विधि के लिए अनुपलब्ध है, तो हम normalizeHeaders निष्पादित करते हैं। यह निर्धारित करता है कि चर हेडर का एक उदाहरण है या नहीं। यदि नहीं, तो यह new Headers() का उपयोग करके फिर से शीर्षलेखों का एक नया सेट उत्पन्न करेगा, इस प्रकार आपको यहां दिखाई देने वाली समस्या का कारण बन जाएगा।

आपका Object.keys(current).forEach() उदाहरण काम कर रहा है क्योंकि यह एक सादे वस्तु को एक सरणी में सफलतापूर्वक परिवर्तित कर रहा है, जिससे आप उस पर .forEach() पर कॉल कर सकते हैं।

डिबगिंग के अनुसार अगला चरण...आपके SSR एप्लिकेशन में normalizeHeaders() का परिणाम क्या है? एक नज़र डालें कि यह क्या आउटपुट करता है और मुझे लगता है कि आप पाएंगे कि यह हेडर के उदाहरण के बजाय एक सादा वस्तु है।

जहां तक ​​मुझे पता है, मुझे विश्वास नहीं है कि एसएसआर का पूरी तरह से परीक्षण किया गया है (देखें #155) लेकिन @fbartho शायद इस पर अधिक प्रकाश डाल सकता है।

SSR इस समय सीधे तौर पर परीक्षित या समर्थित सुविधा नहीं है। तर्क: यदि आपके पास SSR है, तो आप अपना स्वयं का Apollo GraphQL सर्वर परिनियोजित कर सकते हैं, और आपको लिंक-रेस्ट की आवश्यकता नहीं है

हालांकि कुछ लोगों ने इसका पता लगा लिया है। और मैं उन पीआर पर आपत्ति नहीं कर रहा हूं जो वहां की दुनिया की स्थिति में सुधार करते हैं। मुझे ऐसा लगता है कि हमें शायद केवल एक SSR ट्यूटोरियल की आवश्यकता है।

इसके अतिरिक्त, आपके रनटाइम वातावरण के आधार पर हेडर को पॉलीफ़िल करने की आवश्यकता अपेक्षाकृत सामान्य है। क्या आपने अभी तक इसकी कोशिश की है? @ रिचर्ड87

@ टॉमबार्टन की प्रतिक्रिया सही है: उस कोड का उद्देश्य हेडर हैश को उपयुक्त शीर्षलेख वर्ग में परिवर्तित करना है।

नमस्ते!

मेरी समस्या पर ध्यान देने के लिए धन्यवाद;)

मेरे index.js का निचला भाग यह है:

if (global.Headers == null) {
    global.Headers = require("fetch-headers");
}

// Set up babel to do its thing... env for the latest toys, react-app for CRA
// Notice three plugins: the first two allow us to use import rather than require, the third is for code splitting
// Polyfill is required for Babel 7, polyfill includes a custom regenerator runtime and core-js
require('@babel/polyfill');
require('@babel/register')({
    ignore: [/\/(build|node_modules)\//],
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-transform-instanceof',
    ]
});

// Now that the nonsense is over... load up the server entry point
require('./server');

तो मुझे पूरा यकीन है कि मेरे पास हैडर पॉलीफिल है ( global.Headers के बिना भी मुझे अन्य मुद्दों का एक गुच्छा मिला है) ...

मेरे पास पहले से ही एक ग्राफ़क्यूएल सर्वर है जो मेरे PHP एप्लिकेशन (एपीआई-प्लेटफ़ॉर्म + https://webonyx.github.io/graphql-php/) में कसकर एकीकृत चल रहा है, इसलिए मैं एक अतिरिक्त अपोलो ग्राफक्यूएल सर्वर स्थापित नहीं करना चाहता, मैं बस चाहता हूं रिएक्ट ऐप को तेजी से लोड करने के लिए :D

मेरे पास RestLink.ts को डिबग करने में कठिन समय है, लेकिन मैंने कुछ रणनीतिक console.log में डाल दिया है लेकिन यह current _seems_ एक योजना वस्तु है, लेकिन console.log कुछ जानकारी याद कर सकता है ...

संपादित करें...

export const concatHeadersMergePolicy: RestLink.HeadersMergePolicy = (
  ...headerGroups: Headers[]
): Headers => {
  return headerGroups.reduce((accumulator, current) => {
    if (!current) {
      return accumulator;
    }

    console.log(current.constructor.name)
    if (!current.forEach) {
      current = normalizeHeaders(current);
    }
    console.log(current.constructor.name)

    Object.keys(current).forEach(key => {
      accumulator.append(key, current[key])
    })

    return accumulator;
  }, new Headers());
};

दो बार "हेडर" प्रिंट करता है ...

console.log(current.forEach) प्रिंट आउट अपरिभाषित कोई बात नहीं, ऐसा लगता है कि मेरे हेडर पॉलीफिल में forEach संपत्ति नहीं है?

मेरा PHPStorm मुझे बताता है कि headers में प्रत्येक विधि के लिए है, लेकिन इस कोड को नोड में चलाने पर मुझे headers.forEach is not a function मिलता है:

const Headers = require("fetch-headers");
const headers = new Headers();

console.log(headers)
console.log(headers.forEach)
console.log(!headers.forEach)

headers.forEach(h => console.log(h))

आउटपुट:

node /home/richard/Projects/demo-component/src/test.js 
Headers {}
undefined
true
/home/richard/Projects/demo-component/src/test.js:10
headers.forEach(h => console.log(h))
        ^

TypeError: headers.forEach is not a function
    at Object.<anonymous> (/home/richard/Projects/demo-component/src/test.js:10:9)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)

इसे मेरी बूटस्ट्रैप फ़ाइल में जोड़ने से मेरी सभी समस्याएं हल हो गईं: D

if (global.Headers == null) {
    const fetch = require('node-fetch');
    global.Headers = fetch.Headers;
}

fetch-headers के बजाय fetch-headers node-fetch का उपयोग करके नोटिस ने इस मुद्दे को हल किया!

इसे अपोलो-लिंक-रेस्ट के डॉक्स में जोड़ा जाना चाहिए। मुझे किस फाइल में पीआर बढ़ाना चाहिए? https://github.com/apollographql/apollo-link-rest/blob/master/README.md , https://github.com/apollographql/apolo-link-rest/blob/master/docs/rest.md या https://github.com/apolographql/apolo-link/blob/master/docs/source/links/rest.md ?