Nuxt GraphQL 中间件

保持您的 GraphQL 服务器私有：将 GraphQL 查询和 mutation 公开为完全类型化的 API 路由。

文档 – npm – 2.x 版本 (适用于 Nuxt 2)

特性

• 将每个查询和 mutation 公开为一个 API 路由
• GraphQL 请求仅在服务器端完成
• 客户端包中没有 GraphQL 文档
• 包含用于执行查询或 mutation 的组合式函数
• 修改请求头、响应和处理错误
• 所有 GraphQL 文件的 HMR
• 与 Nuxt DevTools 集成
• 使用 graphql-code-generator 为 schema、查询、mutation 和片段提供完整的 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 兼容。