Apollo Client で GraphQL クエリを叩く時、特定のフィールドを参照するのを阻止したい

問題

例えば、以下のようなフィールドがあるとする。

type Image {
  # 圧縮されていないオリジナルサイズの画像
  originalUrl: String!
  # 圧縮されている画像
  url: String!
}

originalUrl をむやみに使うとクソデカ画像がクライアントに配信されまくってしまうので、基本は url のほうを使いたい。

解決策

1. フィールドを deprecated にする

originalUrl のほうを deprecated にすれば、@graphql-eslint/eslint-plugin が怒ってくれる。ただし、今回の場合はフィールドを参照するのを今後一切禁止したいわけではなく、明確に使いたい場合は許したいので、要件に合わない。

2. カスタム lint を作る

結局以下のようなカスタム lint を作って対応した。明確に使いたい場合は eslint-disable-next-line してもらう。(rulesdir 使ってるけど、no-restricted-fieldsに定義でも別によさそう)

module.exports = {
  meta: {
    type: 'problem',
    docs: {
      description: 'Disallow usage of originalUrl in GraphQL queries',
      category: 'Best Practices',
      recommended: true,
    },
    messages: {
      noOriginalUrl:
        'originalUrl を使っていますが、原寸画像なので特別な理由が無ければ url を使ってください。',
    },
    schema: [],
  },

  create(context) {
    return {
      TaggedTemplateExpression(node) {
        // gql タグかどうかを確認
        if (node.tag.type !== 'Identifier' || node.tag.name !== 'gql') {
          return;
        }

        // テンプレートリテラルの内容をチェック
        for (const quasi of node.quasi.quasis) {
          const text = quasi.value.raw;

          // originalUrl が単語境界で含まれているかチェック
          if (/\bOriginalUrl\b/.test(text)) {
            context.report({
              node: quasi,
              messageId: 'noOriginalUrl',
            });
          }
        }
      },
    };
  },
};