Nuxt GraphQL 中介層

保持您的 GraphQL 伺服器私有：將 GraphQL 查詢和變異公開為完全類型化的 API 路由。

文件 – npm – Version 2.x (for Nuxt 2)

功能特色

• 將每個查詢和變異公開為 API 路由
• GraphQL 請求僅在伺服器端完成
• 用戶端套件中沒有 GraphQL 文件
• 包含用於執行查詢或變異的 composable
• 修改請求標頭、回應和處理錯誤
• 所有 GraphQL 檔案的 HMR
• 與 Nuxt DevTools 整合
• 使用 graphql-code-generator 為 schema、查詢、變異和 fragments 提供完整的 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() composable 使用

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 相容。