Apollo-link-rest: weixin mini 프로그램에서 apollo-link-rest를 사용할 때 "헤더가 정의되지 않았습니다"가 발생합니다.

안녕하세요 @ Janice1114 , 저는

종종 헤더를 사용할 수없는 경우 가져 오기도 사용할 수 없습니다. 따라서 둘 다 작동 할 수있는 polyfill은 다음과 같습니다. https://github.com/bitinn/node-fetch

안녕하세요 @fbartho , 빠른 답장에 감사드립니다. polyfill을 사용하여 헤더 가져 오기를 활성화하려고 시도했지만 여전히 오류가 발생합니다.

그리고 weixin에서 창 관련 변수를 지원하지 않는 fetch에 wx.request를 사용하므로 polyfill이 작동하지 않을 까봐 걱정됩니다.

그리고 apollo-link-rest의 소스 코드에서 헤더 루프를 건너 뛰는 데 도움이되는 해킹이나 구현이 있는지 알 수 있습니까? 아니면 다른 시나리오에 맞게 몇 가지 사용자 지정 옵션을 제공 할 수 있습니까?

래퍼 함수를 ​​제공하기 위해 ApolloLinkRest에 customFetch 매개 변수를 사용할 수 있습니다.이 래퍼 함수는 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에서 소스 코드를 읽으면 weixin에서 사용할 수없는 헤더에 액세스하려고 시도합니다. global 변수를 할당 할 수 있습니다.

따라서 RestLink 생성자 프로세스 중에 사용자 지정 또는 재정의 된 설정을 적용 할 수 있는지 궁금합니다.

멋진 팁에 다시 한번 감사드립니다.

안녕하세요 @fbartho ,
헤더 문제 수정

코드 PR을 마스터에 병합 할 수 있는지 검토하고 도와 주시겠습니까?
도움이 될 수 있다면 대단히 감사하고 감사합니다.

"next": "^9.0.3" 에도 같은 문제가 있습니다.

다음 버전 ^8.1.0 에서도이 문제가 발생합니다. 내 그래프 API의 경우 isomorphic-unfetch , 버전 ^3.0.0 을 사용하여 다음과 같이 폴리 필합니다.

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

그러나 동일한 패키지를 사용하여 나머지 링크로 polyfill을 사용하면 작동하지 않았습니다.

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

또한 customFetch 메서드를 사용하여 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 받았습니다.

여기에서 아이디어를 사랑하고, 서버 환경에서 구현하는 방법에 대한 지침을 제공 할 수 있다면 좋아할 것입니다. 감사!

자신 만의 customFetch API를 사용하면서 Headers 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 polyfill 가져 오기를 시도했지만 작동하지 않습니다.
fetch-headers 의 헤더 인스턴스에 forEach 메서드가없는 것으로 나타났습니다 (아래 참조).

다른 해결책이 있습니까?

@fbartho 안녕하세요! ios 9.3.5에서이 문제가 발생했습니다. fetch-headers polyfill 가져 오기를 시도했지만 작동하지 않습니다.
fetch-headers 의 헤더 인스턴스에 forEach 메서드가없는 것으로 나타났습니다 (아래 참조).

다른 해결책이 있습니까?

fetch polyfill을 사용하여이 문제를 해결했습니다.

앱 측에서 폴리 필로이 문제를 해결할 수 있고 폴리 필을이 저장소의 종속성으로 만들고 싶지 않기 때문에이 문제를 닫겠습니다.

나는 이것을 polyfill로 해결할 수 없었습니다. 나는 isomorphic-fetch, isomorphic-unfetch, fetch-headers 등을 시도했고 항상 current.forEach not being defined 또는 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",
  },
})

@VinSpee 의 솔루션은 Gatsby JS 애플리케이션에서도 저에게 효과적이었습니다.