Apollo-link-rest: تحدث "الرؤوس غير معرّفة" عند استخدام apollo-link-rest في برنامج weixin mini

مرحبًا @ Janice1114 ، لست على دراية بـ weixin ، ولكن ربما يمكنك استخدام Headers Polyfill؟

في كثير من الأحيان ، إذا كانت الرؤوس غير متاحة ، فلن يكون الجلب متاحًا أيضًا. إذن ، polyfill الذي قد يعمل لكليهما هو هذا: https://github.com/bitinn/node-fetch

مرحبًا fbartho ، شكرًا على ردك السريع. لقد حاولت استخدام polyfill لتمكين جلب الرؤوس ، ولكن ما زلت أحصل على الأخطاء.

ووجدت أنه تحت weixin ، فإنه يستخدم wx.request للجلب ، والذي لا يدعم المتغير المرتبط بالنافذة ، لذلك أخشى أن polyfill لن يعمل.

وهل لي أن أعرف هل سيكون هناك أي اختراق أو تطبيقات للمساعدة في تخطي حلقة الرؤوس في الكود المصدري لـ apollo-link-rest؟ أو هل يمكنك من فضلك إعطاء بعض الخيارات المخصصة لتناسب سيناريو مختلف؟

يمكنك استخدام المعلمة customFetch لـ ApolloLinkRest من أجل توفير وظيفة غلاف ، يمكن أن تأخذ وظيفة الغلاف هذه الرؤوس المستندة إلى النافذة من Polyfill ، وتسويتها إلى تجزئة كائن تقليدية.

• 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, ...

نقدر كثيرًا لردك اللطيف ، سأحاول استخدام هذا polyfill في تطوير weixin.

وأثناء قراءتي للكود المصدري في RestLink.ts ، سيحاول الوصول إلى الرؤوس ، وهو غير متوفر في ويكسين. يمكن تعيين المتغيرات في global .

لذلك أتساءل عما إذا كان يمكن تطبيق أي إعدادات مخصصة أو متجاوزة أثناء عملية مُنشئ RestLink؟

مع أطيب التحيات مرة أخرى على نصائحك الرائعة.

مرحبًا fbartho ， لإصلاح هذه المشكلة في weixin والمتصفح الخاص ذي الصلة ، لقد قمت بإنشاء علاقات عامة على النحو التالي:
إصلاح مشكلة الرؤوس

هل يمكنك المساعدة ومراجعة ما إذا كان كود العلاقات العامة متاحًا للدمج في Master？
نقدر كثيرا وشكرا جزيلا إذا كان ذلك يمكن أن يساعد.

لدي نفس المشكلة في "next": "^9.0.3"

أواجه هذه المشكلة أيضًا مع الإصدار التالي ^8.1.0 . بالنسبة لواجهة برمجة تطبيقات الرسم البياني الخاصة بي ، أستخدم الإصدار ^3.0.0 isomorphic-unfetch ، الإصدار ^3.0.0 لتعويض الملء كما يلي:

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

لكن استخدام نفس الحزمة مع polyfill مع رابط الباقي لم ينجح:

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

لقد جربت أيضًا node-fetch باستخدام طريقة customFetch الخاصة بك:

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 عند التشغيل التالي في وضع dev.

أحب الفكرة هنا ، وسأحب إذا كان بإمكانك تقديم بعض التوجيهات لكيفية التنفيذ في بيئات الخادم. شكرا!

يمكنك ملء واجهة برمجة تطبيقات الرؤوس بينما لا تزال تستخدم واجهة برمجة تطبيقات مخصصة للجلب!

اسمحوا لي أن أعرف ما إذا كنت ترغب في الحصول على بعض التعليمات البرمجية هناك ، لكنني على ثقة من أن هذا ممكن دون الكثير من المتاعب. أنا لست على جهاز الكمبيوتر الخاص بي في هذه اللحظة فقط.

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

شكرا! سأقوم بالإبلاغ هنا بعد أن تسنح لي الفرصة لإعطاء هذه الفرصة.

تضمين التغريدة أواجه هذه المشكلة على نظام التشغيل iOS 9.3.5 لقد حاولت استيراد بوليفيل fetch-headers لكن لم يعمل.
لقد اكتشفت أن مثيل الرأس من fetch-headers لا يحتوي على طريقة forEach (انظر أدناه).

هل هناك حلول أخرى؟

تضمين التغريدة أواجه هذه المشكلة على نظام التشغيل iOS 9.3.5 لقد حاولت استيراد بوليفيل fetch-headers لكن لم يعمل.
لقد اكتشفت أن مثيل الرأس من fetch-headers لا يحتوي على طريقة forEach (انظر أدناه).

هل هناك حلول أخرى؟

لقد قمت بحل هذه المشكلة باستخدام إحضار polyfill.

سأغلق هذا ، لأنني أعتقد أنه يمكننا حل هذا مع polyfill على جانب التطبيق ، ولا نريد أن نجعل polyfill تبعية لهذا المستودع.

لم أتمكن من حل هذا باستخدام polyfill. لقد جربت إحضارًا متشابهًا ، وغير متماثل ، وإحضار رؤوس ، وما إلى ذلك ، ودائمًا ما انتهى بي الأمر بمشكلة لم يتم تعريفها حول current.forEach أو TypeError: Right-hand side of 'instanceof' is not an object . أي مساعدة؟

VinSpee هل حاولت من أي وقت مضى هذا جلب polyfill.

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-they-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",
  },
})

نجح حل