Nuxt GraphQL 中介層

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

文件 – npm – 2.x 版本 (適用於 Nuxt 2)

功能

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