Nuxt GraphQL ミドルウェア

GraphQLサーバーをプライベートに保ちます。GraphQLクエリとミューテーションを完全に型付けされたAPIルートとして公開します。

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

特徴

• 各クエリとミューテーションをAPIルートとして公開します
• GraphQLリクエストはサーバー側でのみ実行されます
• クライアントバンドルにGraphQLドキュメントは含まれません
• クエリまたはミューテーションを実行するためのコンポーザブルが含まれています
• リクエストヘッダー、レスポンスの変更、エラー処理が可能です
• すべてのGraphQLファイルのHMR
• Nuxt DevTools との連携
• graphql-code-generator を使用した、スキーマ、クエリ、ミューテーション、フラグメントの完全なTypeScript統合

セットアップ

インストール

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 } = await useGraphqlQuery('films')
console.log(data.allFilms.films)

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

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

または、https://127.0.0.1:3000/api/graphql_middleware/query/films を呼び出して同じ結果を得ることもできます。

Nuxt 2

3.x リリースは Nuxt 3 とのみ互換性があります。2.x ブランチ と npm のリリースは Nuxt 2 と互換性があります。