nuxt-graphql-middleware
一个用于 Nuxt 3 的 GraphQL 客户端。
文档 – npm – 版本 2.x (适用于 Nuxt 2)
功能
- 将每个查询和变更公开为 API 路由
- GraphQL 请求 只在服务器端 完成
- 包含 可组合函数 来执行查询或变更
- 客户端包中 没有 GraphQL 文档
- 使用 graphql-typescript-deluxe 实现超快的 TypeScript 代码生成
- 所有 GraphQL 文件的 HMR (热模块替换)
- 查询操作的可选 客户端缓存
- 修改 请求头、响应并处理错误
- 与 Nuxt DevTools 集成
设置
安装
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, errors } = await useGraphqlQuery('films')
console.log(data.allFilms.films)
或者使用 useAsyncData 的便捷包装器
const { data } = await useAsyncGraphqlQuery('films')
console.log(data.value.allFilms.films)
或者，你也可以直接调用 API 路由以获得相同的结果
const response = await $fetch('/api/graphql_middleware/query/films')
或者使用 useFetch
const { data } = await useFetch('/api/graphql_middleware/query/films')
Nuxt 2
3.x 版本仅与 Nuxt 3 兼容。2.x 分支 和 npm 上的版本与 Nuxt 2 兼容。然而，该版本已不再维护。
开发
该模块使用默认的 Nuxt 模块编写设置，模块本身位于 ./src，演练场位于 ./playground/。
设置
安装依赖项
安装模块和演练场的依赖
npm install
准备类型
这将生成开发所需的所有类型
npm run dev:prepare
启动 Apollo 服务器
演练场使用一个 Apollo 服务器，该服务器需要单独构建。
cd apollo
npm install
npm run compile
npm run start
启动演练场
npm run dev
你现在可以打开 https://:3000 开始开发。
测试
Lint / 代码风格
npm run lint
npm run prettier
单元测试 (Vitest)
单元测试使用 Vitest 完成。
npm run test:ci
端到端测试 (Cypress)
我们使用 Cypress 运行一些端到端测试。测试针对演练场的 构建 执行
npm run dev:build
npm run dev:start
npm run cypress