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