graphql-request
nuxt-graphql-request

Nuxt との簡単で最小限の GraphQL クライアント統合
8.2K ダウンロード205 スターv8.1.1
gomahgomah

nuxt-graphql-request

📡 GraphQL リクエストモジュール

cinpm versionDependenciesnpm downloadscode style: prettierLicense: MIT

Nuxt.js との簡単で最小限の GraphQL クライアント統合。

機能

  • 最もシンプルで軽量な GraphQL クライアント。
  • PromiseベースのAPI（async / awaitに対応）。
  • Typescript サポート。
  • AST サポート。
  • GraphQL ローダーのサポート。

📖 リリースノート📄 ドキュメント

セットアップ

npx nuxi@latest module add graphql-request

Nuxt2 の場合は nuxt-graphql-request v6 を使用してください


yarn add nuxt-graphql-request@v6 graphql --dev

nuxt.config.js

module.exports = {
  modules: ['nuxt-graphql-request'],

  build: {
    transpile: ['nuxt-graphql-request'],
  },

  graphql: {
    /**
     * An Object of your GraphQL clients
     */
    clients: {
      default: {
        /**
         * The client endpoint url
         */
        endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
        /**
         * Per-client options overrides
         * See: https://github.com/prisma-labs/graphql-request#passing-more-options-to-fetch
         */
        options: {},
      },
      secondClient: {
        // ...client config
      },
      // ...your other clients
    },

    /**
     * Options
     * See: https://github.com/prisma-labs/graphql-request#passing-more-options-to-fetch
     */
    options: {
      method: 'get', // Default to `POST`
    },

    /**
     * Optional
     * default: false (this includes graphql-tag for node_modules folder)
     */
    includeNodeModules: true,
  },
};

ランタイム設定

ビルド時ではなく、実行時にエンドポイントを提供する必要がある場合は、ランタイム設定を使用して値を指定できます。

nuxt.config.js

module.exports = {
  publicRuntimeConfig: {
    graphql: {
      clients: {
        default: {
          endpoint: '<client endpoint>',
        },
        secondClient: {
          endpoint: '<client endpoint>',
        },
        // ...more clients
      },
    },
  },
};

TypeScript

型定義はすぐに機能するはずです。Typescript を設定して Nuxt の自動生成された設定を拡張する必要があります。そうでない場合は、ここから始められます。

tsconfig.json
{
  "extends": "./.nuxt/tsconfig.json"
}

使用方法

コンポーネント

useAsyncData

<script setup>
import { gql } from 'nuxt-graphql-request/utils';

const { $graphql } = useNuxtApp();

const query = gql`
  query planets {
    allPlanets {
      planets {
        id
        name
      }
    }
  }
`;

const { data: planets } = await useAsyncData('planets', async () => {
  const data = await $graphql.default.request(query);
  return data.allPlanets.planets;
});
</script>

ユーザー定義関数

<script setup>
import { gql } from 'nuxt-graphql-request/utils';

const { $graphql } = useNuxtApp();

const query = gql`
  query planets {
    allPlanets {
      planets {
        id
        name
      }
    }
  }
`;

const planets = ref([])

const fetchPlanets = () => {
  const data = await $graphql.default.request(query);
  planets.value = data.allPlanets.planets;
}
</script>

ストアアクション

import { defineStore } from 'pinia';
import { gql } from 'nuxt-graphql-request/utils';
import { useNuxtApp } from '#imports';

type Planet = { id: number; name: string };

export const useMainStore = defineStore('main', {
  state: () => ({
    planets: null as Planet[] | null,
  }),
  actions: {
    async fetchAllPlanets() {
      const query = gql`
        query planets {
          allPlanets {
            planets {
              id
              name
            }
          }
        }
      `;

      const data = await useNuxtApp().$graphql.default.request(query);
      this.planets = data.allPlanets.planets;
    },
  },
});

GraphQL リクエストクライアント

公式の graphql-request ライブラリからの例。

HTTP ヘッダーによる認証

nuxt.config.ts
export default defineNuxtConfig({
  graphql: {
    clients: {
      default: {
        endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
        options: {
          headers: {
            authorization: 'Bearer MY_TOKEN',
          },
        },
      },
    },
  },
});
ヘッダーの段階的な設定

GraphQLClient の初期化後にヘッダーを設定したい場合は、setHeader() または setHeaders() 関数を使用できます。

const { $graphql } = useNuxtApp();

// Override all existing headers
$graphql.default.setHeaders({ authorization: 'Bearer MY_TOKEN' });

// Set a single header
$graphql.default.setHeader('authorization', 'Bearer MY_TOKEN');
エンドポイントの設定

GraphQLClient の初期化後にエンドポイントを変更したい場合は、setEndpoint() 関数を使用できます。

const { $graphql } = useNuxtApp();

$graphql.default.setEndpoint(newEndpoint);
各リクエストにヘッダーを渡す

各リクエストにカスタムヘッダーを渡すことができます。request() と rawRequest() は、3番目のパラメーターとしてヘッダーオブジェクトを受け入れます。

<script setup>
import { gql } from 'nuxt-graphql-request/utils';

const { $graphql } = useNuxtApp();

const requestHeaders = {
  authorization: 'Bearer MY_TOKEN',
};

const planets = ref();

const fetchSomething = async () => {
  const query = gql`
    query planets {
      allPlanets {
        planets {
          id
          name
        }
      }
    }
  `;

  // Overrides the clients headers with the passed values
  const data = await $graphql.default.request(query, {}, requestHeaders);
  planets.value = data.allPlanets.planets;
};
</script>

fetch にさらにオプションを渡す

nuxt.config.ts
export default defineNuxtConfig({
  graphql: {
    clients: {
      default: {
        endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
        options: {
          credentials: 'include',
          mode: 'cors',
        },
      },
    },
  },
});

または setHeaders / setHeader を使用する

const { $graphql } = useNuxtApp();

// Set a single header
$graphql.default.setHeader('credentials', 'include');
$graphql.default.setHeader('mode', 'cors');

// Override all existing headers
$graphql.default.setHeaders({
  credentials: 'include',
  mode: 'cors',
});

GraphQL ドキュメント変数を使用する

<script setup>
import { gql } from 'nuxt-graphql-request/utils';

const { $graphql } = useNuxtApp();

const fetchSomething = async () => {
  const query = gql`
    query planets($first: Int) {
      allPlanets(first: $first) {
        planets {
          id
          name
        }
      }
    }
  `;

  const variables = { first: 10 };

  const planets = await this.$graphql.default.request(query, variables);
};
</script>

エラーハンドリング

<script setup>
import { gql } from 'nuxt-graphql-request/utils';

const { $graphql } = useNuxtApp();

const fetchSomething = async () => {
  const mutation = gql`
    mutation AddMovie($title: String!, $releaseDate: Int!) {
      insert_movies_one(object: { title: $title, releaseDate: $releaseDate }) {
        title
        releaseDate
      }
    }
  `;

  const variables = {
    title: 'Inception',
    releaseDate: 2010,
  };

  const data = await $graphql.default.request(mutation, variables);
};
</script>

GraphQL ミューテーション

<script setup>
import { gql } from 'nuxt-graphql-request/utils';

const { $graphql } = useNuxtApp();

const fetchSomething = async () => {
  const query = gql`
    {
      Movie(title: "Inception") {
        releaseDate
        actors {
          fullname # "Cannot query field 'fullname' on type 'Actor'. Did you mean 'name'?"
        }
      }
    }
  `;

  try {
    const data = await $graphql.default.request(query);
    console.log(JSON.stringify(data, undefined, 2));
  } catch (error) {
    console.error(JSON.stringify(error, undefined, 2));
    process.exit(1);
  }
};
</script>

生のレスポンスを受け取る

request メソッドは、レスポンスから data または errors キーを返します。extensions キーにアクセスする必要がある場合は、rawRequest メソッドを使用できます。

import { gql } from 'nuxt-graphql-request/utils';

const { $graphql } = useNuxtApp();

const query = gql`
  query planets($first: Int) {
    allPlanets(first: $first) {
      planets {
        id
        name
      }
    }
  }
`;

const variables = { first: 10 };

const { data, errors, extensions, headers, status } = await $graphql.default.rawRequest(
  endpoint,
  query,
  variables
);
console.log(JSON.stringify({ data, errors, extensions, headers, status }, undefined, 2));

バッチクエリ

<script setup>
const { $graphql } = useNuxtApp();

const fetchSomething = async () => {
  const query1 = /* GraphQL */ `
    query ($id: ID!) {
      capsule(id: $id) {
        id
        landings
      }
    }
  `;

  const variables1 = {
    id: 'C105',
  };

  const query2 = /* GraphQL */ `
    {
      rockets(limit: 10) {
        active
      }
    }
  `;

  const query3 = /* GraphQL */ `
    query ($id: ID!) {
      core(id: $id) {
        id
        block
        original_launch
      }
    }
  `;

  const variables3 = {
    id: 'B1015',
  };

  try {
    const data = await $graphql.default.batchRequests([
      { document: query1, variables: variables1 },
      { document: query2 },
      { document: query3, variables: variables3 },
    ]);

    console.log(JSON.stringify(data, undefined, 2));
  } catch (error) {
    console.error(JSON.stringify(error, undefined, 2));
    process.exit(1);
  }
};
</script>

キャンセル

AbortController シグナルを使用してリクエストをキャンセルできます。

<script setup>
import { gql } from 'nuxt-graphql-request/utils';

const { $graphql } = useNuxtApp();

const fetchSomething = async () => {
  const query = gql`
    query planets {
      allPlanets {
        planets {
          id
          name
        }
      }
    }
  `;

  const abortController = new AbortController();

  const planets = await $graphql.default.request({
    document: query,
    signal: abortController.signal,
  });

  abortController.abort();
};
</script>

Node 環境では、AbortController は v14.17.0 以降のバージョンでサポートされています。Node.js v12 の場合は、abort-controller ポリフィルを使用できます。

import 'abort-controller/polyfill';

const abortController = new AbortController();

ミドルウェア

ミドルウェアを使用して、任意のリクエストを前処理したり、生のレスポンスを処理したりすることができます。

リクエスト＆レスポンスミドルウェアの例（各リクエストに実際の認証トークンを設定し、エラーが発生した場合にリクエストトレースIDをログに記録）

function requestMiddleware(request: RequestInit) {
  const token = getToken();
  return {
    ...request,
    headers: { ...request.headers, 'x-auth-token': token },
  };
}

function responseMiddleware(response: Response<unknown>) {
  if (response.errors) {
    const traceId = response.headers.get('x-b3-traceid') || 'unknown';
    console.error(
      `[${traceId}] Request error:
        status ${response.status}
        details: ${response.errors}`
    );
  }
}

export default defineNuxtConfig({
  modules: ['nuxt-graphql-request'],

  graphql: {
    /**
     * An Object of your GraphQL clients
     */
    clients: {
      default: {
        /**
         * The client endpoint url
         */
        endpoint: 'https://swapi-graphql.netlify.com/.netlify/functions/index',
        /**
         * Per-client options overrides
         * See: https://github.com/prisma-labs/graphql-request#passing-more-options-to-fetch
         */
        options: {
          requestMiddleware: requestMiddleware,
          responseMiddleware: responseMiddleware,
        },
      },

      // ...your other clients
    },

    /**
     * Options
     * See: https://github.com/prisma-labs/graphql-request#passing-more-options-to-fetch
     */
    options: {
      method: 'get', // Default to `POST`
    },

    /**
     * Optional
     * default: false (this includes graphql-tag for node_modules folder)
     */
    includeNodeModules: true,
  },
});

FAQ

@nuxtjs/apollo の代わりに nuxt-graphql-request を使用する理由は何ですか？

誤解しないでください。Apollo Client は素晴らしく、vue / nuxt コミュニティによってよく保守されています。私は graphql-request に切り替える前に 18 ヶ月間 Apollo Client を使用していました。

しかし、私はパフォーマンスに取り憑かれているため、Apollo Client は私には全く機能しません。

  • Vue エコシステムで十分なので（Vuex と永続化されたデータ）、別の状態管理は必要ありません。
  • データを取得するために、アプリ内で余分な約 120kb の解析は必要ありません。
  • pusher.com を使用しているので、サブスクリプションは必要ありません。WS クライアントの代替手段もあります: http://github.com/lunchboxer/graphql-subscriptions-client

graphql をインストールする必要があるのはなぜですか？

graphql-request は graphql パッケージの TypeScript 型を使用しています。そのため、TypeScript を使用してプロジェクトをビルドしており、graphql-request を使用しているにもかかわらず graphql がインストールされていない場合、TypeScript のビルドは失敗します。詳細はこちらここを参照してください。JS ユーザーの場合、厳密には graphql をインストールする必要はありません。しかし、JS でも TS 型を認識する IDE（VSCode など）を使用している場合は、開発中に強化された型安全性から恩恵を受けるために graphql をインストールすることが依然として推奨されます。

graphql-request からエクスポートされた gql テンプレート内に GraphQL ドキュメントをラップする必要がありますか？

いいえ。これは、prettier のフォーマットや IDE の構文ハイライトなどのツールサポートを得るための便宜上のものです。何らかの理由で必要な場合は、graphql-tag から gql を使用することもできます。

graphql-request、Apollo、Relay の違いは何ですか？

graphql-request は、最も最小限で使いやすい GraphQL クライアントです。小さなスクリプトやシンプルなアプリに最適です。

Apollo や Relay のような GraphQL クライアントと比較して、graphql-request には組み込みのキャッシュがなく、フロントエンドフレームワークとの統合もありません。目標は、パッケージと API を可能な限り最小限に保つことです。

nuxt-graphql-request はミューテーションをサポートしていますか？

もちろん、以前と同様に任意の GraphQL クエリとミューテーションを実行できます👍

開発

  1. このリポジトリをクローンする
  2. yarn install または npm install を使用して依存関係をインストール
  3. yarn dev または npm run dev を使用して開発サーバーを起動

ロードマップ

📑 ライセンス

MITライセンス