Apollo-link-rest: "Заголовки не определены" возникает при использовании apollo-link-rest в программе weixin mini.

Привет @ Janice1114 , я не знаком с weixin, но, может быть, вы можете использовать полифил заголовков?

Часто, если заголовки недоступны, Fetch также будет недоступен. Вот полифилл, который может работать для обоих: https://github.com/bitinn/node-fetch

Привет @fbartho , спасибо за быстрый ответ. Я пытался использовать полифил, чтобы включить выборку заголовков, но все равно получаю ошибки.

И я обнаружил, что в weixin для выборки используется wx.request, который не поддерживает переменную, связанную с окном, поэтому я боюсь, что полифилл не будет работать.

И могу ли я узнать, есть ли какой-нибудь хакер или реализации, которые помогут пропустить цикл заголовков в исходном коде 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, ...

Большое спасибо за ваш любезный ответ, я постараюсь использовать этот полифилл в разработке weixin.

И когда я прочитал исходный код в RestLink.ts, он попытается получить доступ к заголовкам, которые недоступны в weixin. Он может назначать переменные в global .

Поэтому мне интересно, могут ли какие-либо пользовательские или переопределенные настройки применяться во время процесса конструктора RestLink?

Еще раз с наилучшими пожеланиями за такие замечательные советы.

Привет, @fbartho ，, чтобы исправить эту проблему в weixin и соответствующем специальном браузере, я создал PR, как показано ниже:
Исправление проблемы с заголовками

Не могли бы вы помочь и проверить, доступен ли PR кода для слияния с мастером
Большое спасибо, если это может помочь.

У меня такая же проблема в "next": "^9.0.3"

У меня также возникла эта проблема со следующей версией ^8.1.0 . Для моего графического API я использую isomorphic-unfetch , версию ^3.0.0 для полифила следующим образом:

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

Но использование того же пакета для полифила с остальной ссылкой не сработало:

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 при следующем запуске в режиме разработки.

Мне понравилась идея здесь, я был бы рад, если бы вы могли дать какое-то направление для реализации в серверных средах. Спасибо!

Вы можете полифилить Headers API, по-прежнему используя свой собственный customFetch API!

Дайте мне знать, если вам нужен какой-нибудь образец кода, но я уверен, что это можно сделать без особых хлопот. Я сейчас не сижу за компьютером.

@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 Привет! Я столкнулся с этой проблемой на ios 9.3.5. Я попытался импортировать полифилл fetch-headers но не работал.
Я обнаружил, что экземпляр заголовка из fetch-headers не имеет метода forEach (см. Ниже).

Есть ли другие решения?

@fbartho Привет! Я столкнулся с этой проблемой на ios 9.3.5. Я попытался импортировать полифилл fetch-headers но не работал.
Я обнаружил, что экземпляр заголовка из fetch-headers не имеет метода forEach (см. Ниже).

Есть ли другие решения?

Я решил эту проблему с помощью полифила fetch .

Я собираюсь закрыть это, потому что я считаю, что мы можем решить эту проблему с помощью полифила на стороне приложения, и мы не хотим делать полифил зависимостью этого репозитория.

Я не смог решить эту проблему с помощью полифилла. Я пробовал изоморфную выборку, изоморфную выборку, выборку заголовков и т. Д. И всегда сталкивался с проблемой, что 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-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",
  },
})

Решение @VinSpee сработало и для приложения Gatsby JS.