nuxt-graphql-middleware

Nuxt 3 用の GraphQL クライアント。

ドキュメント – npm – バージョン 2.x (Nuxt 2用)

機能

• 各クエリとミューテーションをAPIルートとして公開します
• GraphQLリクエストはサーバーサイドのみで行われます
• クエリまたはミューテーションを実行するためのコンポーザブルが含まれます
• クライアントバンドルにGraphQLドキュメントは含まれません
• graphql-typescript-deluxe を使用した超高速なTypeScriptコード生成
• すべてのGraphQLファイルのHMR
• クエリ操作のためのオプションのクライアントサイドキャッシュ
• リクエストヘッダーの変更、応答、エラー処理
• Nuxt DevTools との統合

セットアップ

インストール

npx nuxi@latest module add nuxt-graphql-middleware

最小限の設定で済む

export default defineNuxtConfig({
  modules: ['nuxt-graphql-middleware'],
  graphqlMiddleware: {
    graphqlEndpoint: 'https://example.com/graphql',
  },
})

すべての設定オプションを参照

使用方法

最初のクエリを作成します（例: pages/films.query.graphql）

query films {
  allFilms {
    films {
      id
    }
  }
}

クエリは useGraphqlQuery() コンポーザブル経由で利用できるようになりました

const { data, errors } = await useGraphqlQuery('films')
console.log(data.allFilms.films)

または、useAsyncData の便利なラッパーを使用します

const { data } = await useAsyncGraphqlQuery('films')
console.log(data.value.allFilms.films)

代わりに、APIルートを直接呼び出して同じ結果を得ることもできます

const response = await $fetch('/api/graphql_middleware/query/films')

または useFetch を使用します

const { data } = await useFetch('/api/graphql_middleware/query/films')

Nuxt 2

3.xリリースはNuxt 3のみに対応しています。2.xブランチとnpmでのリリースはNuxt 2に対応していますが、このバージョンはすでにメンテナンスされていません。

開発

このモジュールはデフォルトのNuxtモジュール作成セットアップを使用しており、モジュール自体は ./src にあり、プレイグラウンドは ./playground/ にあります。

セットアップ

依存関係をインストール

モジュールとプレイグラウンドの依存関係をインストールする

npm install

型を準備する

これにより、開発を開始するために必要なすべての型が生成されます。

npm run dev:prepare

Apollo Serverを開始する

プレイグラウンドは、別途構築する必要があるApolloサーバーを使用しています。

cd apollo
npm install
npm run compile
npm run start

プレイグラウンドを開始する

npm run dev

https://:3000 を開いて開発を開始できます。

テスト

Lint / コードスタイル

npm run lint
npm run prettier

ユニットテスト（Vitest）

ユニットテストはVitestを使って行われます。

npm run test:ci

E2E（Cypress）

E2EテストはCypressを使用して実行されます。テストはプレイグラウンドのビルドに対して実行されます。

npm run dev:build
npm run dev:start
npm run cypress