Apollo-link-rest: "Los encabezados no están definidos" ocurren cuando se usa apollo-link-rest en el mini programa weixin

Hola @ Janice1114 , no estoy familiarizado con weixin, pero tal vez puedas usar un Polyfill de encabezados.

A menudo, si los encabezados no están disponibles, Fetch tampoco estará disponible. Entonces, un polyfill que podría funcionar para ambos es este: https://github.com/bitinn/node-fetch

Hola @fbartho , gracias por tu rápida respuesta. Intenté usar polyfill para habilitar la búsqueda de encabezados, pero aún obtengo los errores.

Y descubrí que en weixin, usa wx.request para la recuperación, que no admite la variable relacionada con la ventana, así que me temo que el polyfill no funcionará.

¿Y puedo saber si habría algún truco o implementaciones para ayudar a omitir el bucle de encabezados en el código fuente de apollo-link-rest? ¿O podría dar algunas opciones personalizadas para adaptarse a diferentes escenarios?

Puede usar el parámetro customFetch para ApolloLinkRest para proporcionar una función contenedora, esta función contenedora puede tomar los encabezados basados ​​en ventanas del Polyfill y aplanarlos en un objeto tradicional Hash.

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

Algo como lo siguiente (no probado, escrito en mi navegador):

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

Agradezco mucho su amable respuesta, intentaré utilizar este polyfill en el desarrollo de Weixin.

Y mientras leo el código fuente en RestLink.ts, intentará acceder a los encabezados, que no están disponibles en weixin. Podría asignar las variables en global .

Entonces, me pregunto si se podría aplicar alguna configuración personalizada o anulada durante el proceso de construcción de RestLink.

Saludos cordiales de nuevo por tus maravillosos consejos.

Hola @fbartho , para solucionar este problema en weixin y el navegador especial relacionado, he creado un PR como se muestra a continuación:
Corrección de problemas de encabezados

¿Podría ayudarnos y revisar si el código PR está disponible para fusionarse con el maestro?
Mucho aprecio y muchas gracias si eso pudiera ayudar.

Tengo el mismo problema en "next": "^9.0.3"

También tengo este problema con la próxima versión ^8.1.0 . Para mi API gráfica, uso isomorphic-unfetch , versión ^3.0.0 para polyfill así:

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

Pero usar el mismo paquete para polyfill con el resto del enlace no funcionó:

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

También probé node-fetch usando su método 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,
})

En ambos casos obtuve ReferenceError: Headers is not defined al ejecutar el siguiente en modo dev.

Me encanta la idea aquí, me encantaría si pudiera proporcionar alguna dirección sobre cómo implementar en entornos de servidor. ¡Gracias!

¡Puede rellenar la API de encabezados sin dejar de usar su propia API customFetch!

Avíseme si desea algún código de muestra allí, pero estoy seguro de que esto es factible sin demasiada molestia. No estoy en mi computadora en este momento.

@fbartho ¡ Un código de muestra sería genial cuando tengas la oportunidad! Intenté hacerlo, pero no tuve éxito. ¡Gracias!

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

Algo como lo anterior podría hacer el truco @ 2wheelcoder

¡Gracias! Informaré aquí después de que tenga la oportunidad de intentarlo.

@fbartho ¡Hola! Estoy enfrentando este problema en ios 9.3.5. Intenté importar el polyfill fetch-headers pero no funcionó.
Descubrí que la instancia de encabezado de fetch-headers no tiene el método forEach (ver más abajo).

¿Hay otras soluciones?

@fbartho ¡Hola! Estoy enfrentando este problema en ios 9.3.5. Intenté importar el polyfill fetch-headers pero no funcionó.
Descubrí que la instancia de encabezado de fetch-headers no tiene el método forEach (ver más abajo).

¿Hay otras soluciones?

Resolví este problema usando fetch polyfill.

Voy a cerrar esto, porque creo que podemos resolver esto con un polyfill en el lado de la aplicación, y no queremos hacer que el polyfill sea una dependencia de este repositorio.

No he podido resolver esto con un polyfill. He probado isomorphic-fetch, isomorphic-unfetch, fetch-headers, etc. y siempre termino con un problema sobre current.forEach no definido o TypeError: Right-hand side of 'instanceof' is not an object . ¿Alguna ayuda?

@VinSpee ¿Alguna vez has probado este polyfill de recuperación ?

@lintuming sí pero no funciona en el servidor.

@VinSpee Tal vez puedas usar esto , parece que tienen el método forEach .

Espero que esto funcione.

@lintuming gracias por intentar ayudar. Con ese, obtengo:

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

parece ser una maraña de problemas 🤣

@VinSpee Lo siento, no tengo idea de por qué sucede esto, pero creo que esto podría ayudar:
https://stackoverflow.com/questions/7042340/error-cant-set-headers-after-they-are-sent-to-the-client

Esto es lo que terminó funcionando para mí:

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 Estoy enfrentando el mismo problema e intenté solucionar este problema con su solución, pero no lo logré.
¿Puedes compartir tu código de trabajo?

Gracias @VinSpee, esto era exactamente lo que necesitaba

Pude solucionar este problema utilizando la recuperación personalizada

import fetch from "isomorphic-fetch"

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

La solución de @VinSpee también me funcionó para una aplicación Gatsby JS.