<p>apollo-link-httpはGETメソッドのオーバーライドを尊重しません</p>

作成日 2017年11月12日  ·  20コメント  ·  ソース: apollographql/apollo-link

ドキュメントによると、 fetchOptionsオプションを使用すると、リクエストのメソッドをGETに設定できます。 そうすると、クエリはリクエストの本文ではなくクエリ文字列パラメータとして含まれると思います。 本文を使用してGETリクエストを行おうとすると、Chromeはエラーをスローします。

意図した結果:
リクエストメソッドがGETの場合は、クエリ文字列を作成する必要があります。

実際の結果:
リクエスト本文が使用されます。

問題を再現する方法:

client.query({
  context: {
    fetchOptions: {
      method: 'GET',
    },
  },
  query: QUERY,
  variables: { query },
})
enhancement

最も参考になるコメント

@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
});

全てのコメント20件

@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

https://github.com/Cyber​​lane/object-to-querystring

@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が機能していないようです。

特にこの行にはバグがあるようです:

https://github.com/apollographql/apollo-link/blob/f94b1c6b984619ec1ef68cca3224be788ea140e4/packages/apollo-link-http/src/httpLink.ts#L41

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の仕組み。 もう一度試してみることをお勧めします!

このページは役に立ちましたか?
0 / 5 - 0 評価