Nuxt GraphQL 中间件

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

功能

将每个查询和变异公开为 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 兼容。