こんにちは:
react-apollo
コードサンドボックスの基本構成でapollo-link-rest
を使い始めたところです。
テレビ番組リストを表示する代わりに、インターフェイスに次のエラーが表示されます: : Network error: Failed to execute 'fetch' on 'Window': Invalid credentials mode
。
自分のcreate-react-app
環境でそのコードを複製すると、ApolloDevToolsでリクエストを実行したときに次のエラーも発生しました。
{
"errors": [
{
"message": "forward is not a function",
"locations": [
"TypeError: forward is not a function\n at RestLink../node_modules/apollo-link-rest/bundle.umd.js.RestLink.request (http://localhost:3000/static/js/bundle.js:21028:20)\n at http://localhost:3000/static/js/bundle.js:19809:33\n at ApolloLink.request (http://localhost:3000/static/js/bundle.js:17407:12)\n at ApolloLink.request
}
]
}
このリンクでの作業に感謝します! REST APIにこだわる私たちのために、GraphQLのような機能を提供することで、RESTでの作業をはるかに管理しやすくします。
@sinisterraアプリにforward is not a function
れた場合、それは通常、ノードの1つで@client
または@rest(…)
ディレクティブを忘れたことが原因です。 それはあなたの場合ですか?
fetch
エラーに関して、どのブラウザでテストしていますか?
@fbarthoいいえ、例とまったく同じクエリを実行しています。 @rest
ディレクティブが正しく適用されています。 Google Chrome67.0.3396.62を使用しています。 Firefox 60.0.1でサンプルを実行しようとすると、失敗しましたが、別のエラーが発生しました: Network error: 'credentials' member of RequestInit 'null' is not a valid value for enumeration RequestCredentials.
壊れた例だけではありません! この問題は非常に重要だと思います。
apollo-link-restを使用して過去数か月間正常に機能していた本番環境でも、現在同じエラーが発生しています。 これはブラウザのアップデートによるものだと思いますか?
私はクロームを使用していますVersion 67.0.3396.79 (Official Build) (64-bit)
同じ問題がサファリとFirefoxで発生しています..私は完全にそれを取得していません..私のアプリケーションの同じバージョンは5月24日以来正常に動作していました。
これは、動作しているcustomFetch fnを構成しましたが、apollo-link-restで行うリクエストでのみ発生します。 ¯_(ツ)_ /¯
customFetch
削除すると、同じエラーが発生します。
私は実際に問題を見つけました。
customFetch
関数を使用しています。この関数は、オプションパラメーターcredentials: null
指定してapollo-link-rest
によって呼び出されます。 これにより、新しいバージョンのchromeを含むすべてのブラウザでこのエラーが発生します。
クレデンシャルを使用していないため、カスタムフェッチ関数の簡単な修正は次のとおりです。
export function fetchWithAuth(url, options = {}) {
// this fixes apollo-link-rest providing credentials: null options
const { credentials, ...opt } = options
return fetch(url, getOptions(opt));
}
また、「ネットワークエラー:フェッチに失敗しました」というメッセージが表示され、apollo-link-restを使用してもクエリを実行できなくなりました。 @JuHwonは正しいです。これは、RestLinkコンストラクターのcredentialsオプションに関連付けられているようです。 以前はドキュメントに従ってオプションとして機能していましたが、現在は次のようなオプションを含めた後にのみ機能させることができます。
const restLink = new RestLink({
uri: ${process.env.REACT_APP_API_URL}/,
credentials: 'same-origin', // eg. or credentials: 'omit', etc
});
v0.3.1で修正する必要があります-利用可能になりました!
最も参考になるコメント
v0.3.1で修正する必要があります-利用可能になりました!