Apollo-link: [機能] apollo-link-httpGETメソッドは無視された文字を削除します

作成日 2019年06月10日  ·  3コメント  ·  ソース: apollographql/apollo-link

私が取り組んでいるプロジェクトでは、GETメソッドを使用してHTTPキャッシングの呼び出しを活用しています。 これは正常に機能していますが、クエリパラメータにクエリの実行に必要のない文字が含まれていることがわかります。


以下の例では、 graphql-tagを使用してクエリを解析しています。 クエリを読みやすくするために改行が含まれています。

import gql from 'graphql-tag';

const HERO_QUERY = gql`
  query HERO_QUERY {
    hero {
      name
      friends {
        name
      }
    }
  }
`;

実際の動作により、次のHTTPリクエストが発生します。

GET /graphql?query=query%20HERO_QUERY%20%7B%0A%20%20hero%20%7B%0A%20%20%20%20name%0A%20%20%20%20friends%20%7B%0A%20%20%20%20%20%20name%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D%0A&operationName=HERO_QUERY&variables=%7B%7D HTTP/1.1
Host: localhost:3000
Connection: keep-alive
content-type: application/json

予想される動作は、不要な文字を含まないGETクエリです。

GET /graphql?query=query%20HERO_QUERY%7Bhero%7Bname%20friends%7Bname%7D%7D%7D&operationName=HERO_QUERY&variables=%7B%7D HTTP/1.1
Host: localhost:3000
Connection: keep-alive
content-type: application/json

私は現在、同じ結果を達成するための回避策を実装する方法/能力を直接見ていません。 このリクエストが理にかなっている場合は、必要な変更を行うためのPRを提供できます。

https://github.com/apollographql/apollo-link/blob/951217bad34c91f89c1f167cc809bd0cc18fd922/packages/apollo-link-http/src/httpLink.ts#L198 -L203

rewriteURIForGETの本体は、 encodeURIComponentを通過する前に削除できます。

利用可能なユーティリティメソッドstripIgnoredCharactersがある場合、 graphqlパッケージで使用されるロジックを再利用することが可能です

パッケージgraphqlはすでにapollo-link-http参照されており、再利用したり、カスタムロジックを直接含めてクエリをサニタイズしたりできます。

最も参考になるコメント

プリンターが使用された直後にstripIgnoredCharactersを使用するために、 https ://www.npmjs.com/package/patch-packageを介してapollo-link-http-commonにパッチを適用することになりました。

パッチ/apollo-link-http-common+0.2.13.patch

diff --git a/node_modules/apollo-link-http-common/lib/index.js b/node_modules/apollo-link-http-common/lib/index.js
index 05cd095..c79da1b 100644
--- a/node_modules/apollo-link-http-common/lib/index.js
+++ b/node_modules/apollo-link-http-common/lib/index.js
@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var printer_1 = require("graphql/language/printer");
+var utilities_1 = require("graphql/utilities/stripIgnoredCharacters");
 var ts_invariant_1 = require("ts-invariant");
 var defaultHttpOptions = {
     includeQuery: true,
@@ -91,6 +92,7 @@ exports.selectHttpOptionsAndBody = function (operation, fallbackConfig) {
         body.extensions = extensions;
     if (http.includeQuery)
         body.query = printer_1.print(query);
+        body.query = utilities_1.stripIgnoredCharacters(body.query);
     return {
         options: options,
         body: body,

全てのコメント3件

createHttpLink渡される前にクエリを削除するカスタムApolloLink拡張機能を作成して、 apollo-link-httpライブラリの外部で変更を試みましたが、残念ながら運がありませんcreateHttpLinkた。

import { ApolloLink } from 'apollo-link';
import gql from 'graphql-tag';
import { print } from 'graphql/language/printer';
import { stripIgnoredCharacters } from 'graphql/utilities/stripIgnoredCharacters';

class CreateShortQueryLink extends ApolloLink {
  request(operation, forward) {
    const strippedQuery = stripIgnoredCharacters(print(operation.query));

    const request = {
      ...operation,
      getContext: operation.getContext,
      setContext: operation.setContext,
      query: gql(strippedQuery),
    };

    return forward(request);
  }
}

const link = ApolloLink.from([
  new CreateShortQueryLink(),
  createHttpLink({ uri: 'http://localhost:3000/graphql' }),
]);

graphql/language/printerprintが不要な文字を再び追加しているようです。

print(gql('query Posts{posts(orderBy:id_DESC){id title __typename}}'))

// outputs
query Posts{posts(orderBy:id_DESC){id title __typename}} query Posts {
  posts(orderBy: id_DESC) {
    id
    title
    __typename
  }
}

この同じメソッドprintメソッドは、GETクエリを作成するためにapollo-link-http使用されるapollo-link-http-commonでも使用されているようです。

https://github.com/apollographql/apollo-link/blob/c32e170b72ae1a94cea1c633f977d2dbfcada0e1/packages/apollo-link-http-common/src/index.ts#L239

また、次のようなもので上記を試しました:

export const createMinifyLink = () => {
  return new ApolloLink((operation: Operation, forward: NextLink) => {
    const stripped = stripIgnoredCharacters(operation.query.loc!.source);
    return forward({
      ...operation,
      getContext: operation.getContext,
      setContext: operation.setContext,
      query: gql(stripped),
    });
  });
};

ただし、フラグメント名の再利用やストアへの書き込みの問題については、大量の警告が表示されます。

HTTPインターセプターを使用しますが、APQを使用するとハッシュが異なるという問題が発生します。 44kbで%20%20%20いっぱいのクエリがあります。 無視された文字を取り除くことができれば、おそらく半分のサイズになると思います。

ApolloClientは全体に__typenameを追加し、それを再プリテッティングするだけなので、前処理することさえできません。

export function stripIgnoredCharactersGql(literals: string[], ...placeholders: any[]) {
  const strippedLiterals = literals.map(str => stripIgnoredCharacters(str));
  return gql(strippedLiterals, ...placeholders);
}

export const configQuery = stripIgnoredCharactersGql`
  query {
    hello {
      world
    }
  }
`;

プリンターが使用された直後にstripIgnoredCharactersを使用するために、 https ://www.npmjs.com/package/patch-packageを介してapollo-link-http-commonにパッチを適用することになりました。

パッチ/apollo-link-http-common+0.2.13.patch

diff --git a/node_modules/apollo-link-http-common/lib/index.js b/node_modules/apollo-link-http-common/lib/index.js
index 05cd095..c79da1b 100644
--- a/node_modules/apollo-link-http-common/lib/index.js
+++ b/node_modules/apollo-link-http-common/lib/index.js
@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var printer_1 = require("graphql/language/printer");
+var utilities_1 = require("graphql/utilities/stripIgnoredCharacters");
 var ts_invariant_1 = require("ts-invariant");
 var defaultHttpOptions = {
     includeQuery: true,
@@ -91,6 +92,7 @@ exports.selectHttpOptionsAndBody = function (operation, fallbackConfig) {
         body.extensions = extensions;
     if (http.includeQuery)
         body.query = printer_1.print(query);
+        body.query = utilities_1.stripIgnoredCharacters(body.query);
     return {
         options: options,
         body: body,
このページは役に立ちましたか?
0 / 5 - 0 評価