nuxt-graphql-middleware
一个适用于 Nuxt 3 的 GraphQL 客户端。
文档 – npm – 版本 2.x (适用于 Nuxt 2)
功能
- 将每个查询和变更公开为 API 路由
- GraphQL 请求仅在服务器端完成
- 包含用于执行查询或变更的 composables
- 客户端包中没有 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() composable 使用
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 位于 ./playground/。
设置
安装依赖项
安装模块和 playground 的依赖项
npm install
准备类型
这将生成开始开发所需的所有类型
npm run dev:prepare
启动 Apollo Server
playground 使用的 Apollo 服务器需要单独构建。
cd apollo
npm install
npm run compile
npm run start
启动 Playground
npm run dev
您现在可以打开 https://:3000 开始开发。
测试
Lint / 代码风格
npm run lint
npm run prettier
单元测试 (Vitest)
单元测试使用 Vitest 完成。
npm run test:ci
端到端测试 (Cypress)
我们使用 Cypress 运行一些端到端测试。测试是针对 playground 构建版本执行的。
npm run dev:build
npm run dev:start
npm run cypress