Apollo-link-rest: weixinミニプログラムでapollo-link-restを使用すると、「ヘッダーが定義されていません」が発生します

こんにちは@ Janice1114 、私は

多くの場合、ヘッダーが使用できない場合、フェッチも使用できません。 したがって、両方で機能する可能性のあるポリフィルは次のとおりです： https ：

こんにちは@fbartho 、迅速な返信ありがとう

また、weixinでは、フェッチにwx.requestを使用していることがわかりました。これは、ウィンドウ関連の変数をサポートしていないため、ポリフィルが機能しないのではないかと心配しています。

そして、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, ...

親切な対応に感謝します。このポリフィルを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,
})

また、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を取得しました。

ここでのアイデアが大好きです。サーバー環境で実装する方法について何らかの方向性を提供できれば幸いです。 ありがとう！

独自のcustomFetchAPIを使用しながら、HeadersAPIをポリフィルできます。

そこにサンプルコードが必要な場合はお知らせください。ただし、これはそれほど面倒なことなく実行できると確信しています。 私は今、自分のコンピューターの前にいません。

@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メソッドがないことがわかりました（以下を参照）。

他に解決策はありますか？

フェッチポリフィルを使用してこの問題を解決しました。

アプリ側のポリフィルでこれを解決できると信じており、ポリフィルをこのリポジトリの依存関係にしたくないので、これを閉じます。

私はこれをポリフィルで解決することができませんでした。 isomorphic-fetch、isomorphic-unfetch、fetch-headersなどを試しましたが、 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のソリューションは、