ドキュメントによると、 fetchOptions
オプションを使用すると、リクエストのメソッドをGET
に設定できます。 そうすると、クエリはリクエストの本文ではなくクエリ文字列パラメータとして含まれると思います。 本文を使用してGETリクエストを行おうとすると、Chromeはエラーをスローします。
意図した結果:
リクエストメソッドがGETの場合は、クエリ文字列を作成する必要があります。
実際の結果:
リクエスト本文が使用されます。
問題を再現する方法:
client.query({
context: {
fetchOptions: {
method: 'GET',
},
},
query: QUERY,
variables: { query },
})
@szdcうんこれは間違いなく機能しません! あなたはそれを追加することを受け入れますか? https://github.com/apollographql/apollo-link/issues/257のようなものは、送信される前にリクエストを変換するための良い解決策かもしれませんか?
cc @arackaf @ outlaw11a @puttymanみんなこれに興味がある! 追加するのはかなり小さな変更であるはずです!
誰も追加したくない場合は追加します。
@szdc @arackafなので、これはすでに可能であることが
@szdc @ Outlaw11A @arackafは、その方法です。
const customFetch = (uri, options) => {
const { body, ...newOptions } = options;
const queryString = objectToQuery(JSON.parse(body));
requestedString = uri + queryString;
return fetch(requestedString, newOptions);
};
const link = createHttpLink({
uri: "data",
fetchOptions: { method: "GET" },
fetch: customFetch
});
@jbaxleyiiiすごいですね! objectToQueryがどこから来ているのか興味がありますか? そのためのnpmにutilはありますか? 必要に応じて自分でロールするのはかなり簡単だと思います-基本的にObject.keysをにマップします
escapeUriComponnt(`${k}=${obj[k]}`).join("&");
または同様のもの
https://www.apollographql.com/docs/link/links/http.html#Sending -GET-requests-custom-fetching
@arackafコメントを参照してください:
// turn the object into a query string, try object-to-querystring package
@jbaxleyiiiそれは動作します! すごい!
私はただ問題があります。
作成されたクエリ文字列:
http://localhost/graphql?operationName=AllPlayersQuery&variables=%5Bobject%20Object%5D&query=query%20All...
これが含まれています:問題であるvariables=%5Bobject%20Object%5D
。
これを修正する方法は?
これは標準のURIシリアル化のように見えます-それを回避できるとは思わない-なぜそれが問題なのですか?
標準URI? これ: %5Bobject%20Object%5D
?
encodeURIComponent( 'books(title: "Hello World"){Book {title}}')
books(title%3A%22Hello%20World%22)%7BBook%7Btitle%7D%7D
Apolloでの私の質問は次のとおりです。
query AllPlayers {
players {
id
name
surname
}
そのため、@ jbaxleyiiiによって投稿されたコードで、 [Object object]
変数が空になるという問題があります。
これは、GETを介してフェッチして機能する最低限の反応アプリ(create-react-appを使用して作成)です- index.js
参照してください: https :
@johnunclesamは明らかにvariables
はエンコード前にシリアル化されていません。 条件付きのJSON.stringify
追加して、カスタムフェッチメソッド(リポジトリの例から取得)を調整しただけです。
const customFetch = (uri, options) => {
const {body, ...newOptions} = options;
const parsedBody = JSON.parse(body);
const command = omitBy(parsedBody, isEmpty);
if (command.variables) {
command.variables = JSON.stringify(command.variables);
}
const requestedString = uri + '?' + queryString.stringify(command);
return fetch(requestedString, newOptions);
};
では、 useGETForQueries
は何に使用されますか? useGETForQueries=true
ときにカスタムフェッチが組み込まれていないのはなぜですか?
クエリとミューテーションを区別するにはどうすればよいですか? クエリ(DNSキャッシュ)にはGETのみを使用したい。
これはuseGETForQueriesより前の古い問題であり、 https://github.com/apollographql/apollo-link/pull/510によって修正された後に少し追加されました
うーん、useGETForQueriesが機能していないようです。
特にこの行にはバグがあるようです:
let {
uri = '/graphql',
// use default global fetch if nothing passed in
fetch: fetcher,
includeExtensions,
useGETForQueries,
...requestOptions
} = linkOptions;
次のようになります。
let {
uri = '/graphql',
// use default global fetch if nothing passed in
fetch: fetcher,
includeExtensions,
fetchOptions,
...requestOptions
} = linkOptions;
let {
useGETForQueries
} = fetchOptions;
どうしてそんなことを言うの? createHttpLink
どのように呼んでいますか?
上記の私の観察は、デバッガーを使用してコードをステップ実行したことによるものですが、再現するにはもう一度やり直す必要があります。
私たちが決めたコードは次のとおりです。
import omitBy from 'lodash.omitby';
import isEmpty from 'lodash.isempty';
const graphQLUrl = 'http://the.server.com/graphql';
const customFetch = (uri, options) => {
const { body, credentials, headers, ...newOptions } = options;
let fetchUri = uri;
if (body) {
const parsedBody = JSON.parse(body);
const command = omitBy(parsedBody, isEmpty);
fetchUri = uri + "?" + queryString.stringify(command);
}
return fetch(fetchUri, newOptions);
};
const link = createHttpLink({
uri: graphQLUrl,
fetchOptions: { method: "GET" },
fetch: customFetch
});
あなたが渡した場合、私は、私の質問があると思いますuseGETForQueries
の内部でfetchOptions
ではなく、直接内部のcreateHttpLink
、そしてそれはあなたが観察しまう行動することだろうが、それはまた、ではないでしょうAPIの仕組み。 もう一度試してみることをお勧めします!
最も参考になるコメント
@szdc @ Outlaw11A @arackafは、その方法です。