GatsbyJS で graphQL にプラグインで作ったテーブルにフィールドを追加する方法

GatsbyJS で graphQL にプラグインで作ったテーブルにフィールドを追加する方法

前回は GatsbyJS で graphQL にテーブルを追加する方法と親子関係を作る方法を書きました。

今回は既にある graphQL 上のテーブルにフィールドを追加する方法を書きます。
また graphQL のフィールドにパラメータを指定して結果を返すフィールドを作る方法も書きます。

graphQL 上のテーブルにフィールドを追加する方法

gatsby-node.js 上で createSchemaCustomization を export します。
createSchemaCustomization の中で createFieldExtension と createTypes を呼びます。

コードを例に解説します。

/**
 * pluginOptions は plugin として実装する場合に使います。
 * plugin にしない場合は該当箇所をハードコーディングして大丈夫です。
 */
exports.createSchemaCustomization = ({ actions, reporter }, pluginOptions) => {
  actions.createFieldExtension({
    name: "fuga", // 対象のテーブルにfugaフィールドを追加します。
    extend() {
      return {
        // source には登録されている Node を受け取ります。
        resolve(source, args) {
          if (
            !source.internal ||
            source.internal.type !== pluginOptions.mediaType
          ) {
            // 対象じゃない場合は処理しない。
            return;
          }

          return {
            // ここでは sourceの属性の二乗を返す piyo を fuga の子として追加します。
            piyo: source.hogeInt * source.hogeInt,
          };
        },
      };
    },
  });
  // テーブルの型情報を登録する。
  actions.createTypes(`
    type ${pluginOptions.mediaType} implements Node {
      fuga: Fuga @fuga
    }
    type fuga {
      piyo: Int!
    }
  `);
};

GatsbyJS で graphQL にパラメータを渡す方法

createFieldExtension に args を渡すと使えます。

設定例

exports.createSchemaCustomization = ({ actions, reporter }, pluginOptions) => {
  actions.createFieldExtension({
    name: 'fuga',
    args: {
      fuga1: { // fuga1 はパラメータ名です。
        type: 'int',
        defaultValue: 70 // fuga1 を指定しなかった場合 70 になります。
      },
      fuga2: { // 複数のパラメータを設定できます。
        type: 'string',
      },
    },
    extend() {
      return {
        // args に graphQL で指定した fuga1, fuga2 を取得します。
        resolve(source, args) {
          ...

          return {
            piyo: source.hogeInt * args.fuga1
          };
        },
      };
    },
  });
  actions.createTypes(`
    ...
  `);
};

Photo by Federico Respini on Unsplash