尧图网页设计 
在 Next.js App Router 中集成 GraphiQLgraphiql-nextjs 示例全解析【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql导读本文围绕仓库 examples/graphiql-nextjs 示例完整讲解如何在 Next.jsApp Router 架构应用中嵌入 GraphiQL 交互式 GraphQL IDE。通过本文你可以掌握用create-next-app搭建项目、将graphiqlv5 组件挂载到路由页面、编写自定义 fetcher 对接远端 GraphQL 服务、按需引入 worker 与样式文件以及处理客户端组件 全屏布局等关键细节最终得到一个可直接运行的 GraphQL 调试工具页面。示例概览一个最小的 GraphiQL Next.js 项目examples/graphiql-nextjs是 GraphiQL 官方仓库中展示如何在 Next.js 中集成 GraphiQL的最小可运行示例。它基于 App Router 目录结构整体布局如下以仓库根目录为基准examples/graphiql-nextjs/ ├── package.json # 项目依赖与 npm 脚本 ├── next.config.ts # Next.js 配置 ├── next-env.d.ts # Next.js 自动生成的类型引用 ├── tsconfig.json # TypeScript 配置 └── src/ └── app/ ├── favicon.ico ├── globals.css # 全局样式GraphiQL 全屏高度声明 ├── graphiql.tsx # GraphiQL 客户端组件与自定义 fetcher核心 ├── layout.tsx # 根布局App Router 必需 └── page.ts # 首页路由导出 GraphiQLPage 为默认页面从依赖清单package.json可以看到该示例的核心技术栈依赖版本约束作用graphiql^5GraphiQL v5 组件库本仓库packages/graphiql的发布包next^15Next.js 15App Router 路由框架react/react-dom^19React 19 运行时typescript等^5类型检查与构建工具链对应可用的 npm 脚本dev/build/start/lint/types:check分别用于启动开发服务器、生产构建、生产启动、代码检查和 TypeScript 类型校验。运行示例参照 README 的指引安装依赖后启动开发服务器npm run dev # 或 yarn dev # 或 pnpm dev # 或 bun dev浏览器访问 http://localhost:3000 即可看到嵌入的 GraphiQL 界面。README 还指出编辑 src/app/graphiql.tsx 时页面会热更新auto-updates。需要生成生产版本时使用npm run build # 生产构建 npm run start # 生产模式启动核心技术剖析页面组件与自定义 fetcher1. 首页路由将 GraphiQL 组件设为默认页面App Router 中src/app/page.ts是根路由/的页面入口。示例通过命名导出再转发的方式把 GraphiQL 页面的实现放在独立文件graphiql.tsx中路由文件只负责导出并声明页面元数据// src/app/page.ts import type { Metadata } from next; export { GraphiQLPage as default } from ./graphiql; export const metadata: Metadata { title: GraphiQL Next.js Example, };这种拆分让路由声明与组件实现解耦metadata可为页面提供标题等 SEO/浏览器标签信息。2. 核心组件use client 与自定义 fetchersrc/app/graphiql.tsx 是整个示例的关键文件完整内容如下use client; import type { FC } from react; import { GraphiQL } from graphiql; import graphiql/setup-workers/webpack; import graphiql/style.css; async function fetcher(graphQLParams: Recordstring, unknown) { const response await fetch(https://graphql.earthdata.nasa.gov/api, { method: POST, headers: { Accept: application/json, Content-Type: application/json, }, body: JSON.stringify(graphQLParams), }); return response.json(); } export const GraphiQLPage: FC () { return GraphiQL fetcher{fetcher} /; };这里包含三个关键点1use client指令。GraphiQL 是纯浏览器端交互组件编辑器、文档浏览器、执行请求等都在客户端完成因此组件文件顶部必须声明use client将其标记为 Next.js 客户端组件避免在服务端渲染时执行浏览器 API。2自定义 fetcher 对接远端服务。fetcher函数接收 GraphQL 参数对象含query、variables、operationName等字段类型为Recordstring, unknown通过fetch以POST方式发送到目标 GraphQL 端点并返回解析后的 JSON。这是 GraphiQL v5 最常用的数据接入方式——执行按钮点击后GraphiQL 内部会把graphQLParams交给 fetcher因此你可以自由对接任意支持 HTTP POST 的 GraphQL 服务或在此基础上追加鉴权 Header、错误处理等逻辑。示例对接的是公开的 NASA EOSDIS 地球科学数据 GraphQL APIhttps://graphql.earthdata.nasa.gov/api。3GraphiQL fetcher{fetcher} /极简挂载。GraphiQL 顶层组件接收fetcher后即可呈现完整的 IDE 界面。从源码看GraphiQLProps 由GraphiQLInterfaceProps、GraphiQLProvider的 props 以及HistoryStore的 props 合并而来因此除了fetcher你还可以传入defaultEditorToolsVisibility、isHeadersEditorEnabled、forcedTheme、plugins、maxHistoryLength等配置见 GraphiQL.tsx 的 props 解构清单。3. 样式与 Worker两行关键导入import graphiql/setup-workers/webpack; import graphiql/style.css;graphiql/style.cssGraphiQL 的默认主题样式必须引入否则界面会失去布局与外观。graphiql/setup-workers/webpackGraphiQL 的代码补全、诊断等语言服务能力依赖 Web Worker 运行。该入口根据打包器选择对应实现。在packages/graphiql中setup-workers/webpack.ts 的内容是转发graphiql/react/setup-workers/webpack即由graphiql/react包统一提供按打包器webpack/vite/esm.sh区分的 Worker 初始化逻辑。如果你使用 Vite应改为graphiql/setup-workers/vite使用 esm.sh 场景则用graphiql/setup-workers/esm.sh——具体可对照 packages/graphiql/src/setup-workers 目录下的三个入口文件。布局与全局样式让 GraphiQL 撑满视口示例通过 src/app/globals.css 处理两个布局要点body { margin: 0; } .graphiql-container { height: 100dvh !important; }重置body外边距消除浏览器默认间距将.graphiql-container高度强制设为100dvh动态视口高度使 GraphiQL 界面在移动端地址栏伸缩时也能铺满整个可视区域。同时在 layout.tsx 中声明了根布局的元数据描述Example of using GraphiQL with the Next.js App Router和空的openGraph: {}用于生成 Open Graph / Twitter 标签并引入globals.cssimport type { FC, ReactNode } from react; import type { Metadata } from next; import ./globals.css; export const metadata: Metadata { description: Example of using GraphiQL with the Next.js App Router, // Empty object adds open graph and twitter meta-tags openGraph: {}, }; const RootLayout: FCReadonly{ children: ReactNode } ({ children }) { return ( html langen body{children}/body /html ); }; export default RootLayout;配置与类型检查示例的 next.config.ts 保持默认空配置/* config options here */说明在不做任何额外设置的情况下 GraphiQL 即可正常工作如果你的部署场景需要自定义输出模式、镜像或代理可在此文件扩展。tsconfig.json 采用严格模式strict: true并启用next插件、jsx: preserve、moduleResolution: node等典型 Next.js 配置其中include覆盖next-env.d.ts、**/*.ts、**/*.tsx与.next/types/**/*.ts。可通过npm run types:checktsc --noEmit进行类型校验。常见问题与排查要点页面空白或样式错乱确认已引入graphiql/style.css且.graphiql-container高度已设置参考上面 globals.css 的做法。补全/诊断不生效确认已按打包器引入对应的 setup-workers 入口webpack 场景为graphiql/setup-workers/webpack。报只能在客户端使用类错误确认承载 GraphiQL 的组件文件顶部带有use client指令。修改端点直接修改 graphiql.tsx 中fetcher里的 URL或通过环境变量注入 GraphQL 端点地址如需携带认证在headers中追加Authorization字段即可。类型检查报错在package.json中新增的types:check脚本基于tsc --noEmit配合严格模式可及早发现 props 传参问题。小结examples/graphiql-nextjs用最小代码量演示了 GraphiQL v5 在 Next.js App Router 中的标准集成路径客户端组件声明 → 自定义 fetcher → worker 与样式导入 → 路由转发 → 全屏布局样式。以此为模板你可以快速在任意 Next.js 项目中搭建一个面向内部或公开 API 的 GraphQL 调试页面并进一步扩展多端点切换、鉴权 Header、主题定制等能力。【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 Next.js App Router 中集成 GraphiQL：graphiql-nextjs 示例全解析
在 Next.js App Router 中集成 GraphiQLgraphiql-nextjs 示例全解析【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql导读本文围绕仓库 examples/graphiql-nextjs 示例完整讲解如何在 Next.jsApp Router 架构应用中嵌入 GraphiQL 交互式 GraphQL IDE。通过本文你可以掌握用create-next-app搭建项目、将graphiqlv5 组件挂载到路由页面、编写自定义 fetcher 对接远端 GraphQL 服务、按需引入 worker 与样式文件以及处理客户端组件 全屏布局等关键细节最终得到一个可直接运行的 GraphQL 调试工具页面。示例概览一个最小的 GraphiQL Next.js 项目examples/graphiql-nextjs是 GraphiQL 官方仓库中展示如何在 Next.js 中集成 GraphiQL的最小可运行示例。它基于 App Router 目录结构整体布局如下以仓库根目录为基准examples/graphiql-nextjs/ ├── package.json # 项目依赖与 npm 脚本 ├── next.config.ts # Next.js 配置 ├── next-env.d.ts # Next.js 自动生成的类型引用 ├── tsconfig.json # TypeScript 配置 └── src/ └── app/ ├── favicon.ico ├── globals.css # 全局样式GraphiQL 全屏高度声明 ├── graphiql.tsx # GraphiQL 客户端组件与自定义 fetcher核心 ├── layout.tsx # 根布局App Router 必需 └── page.ts # 首页路由导出 GraphiQLPage 为默认页面从依赖清单package.json可以看到该示例的核心技术栈依赖版本约束作用graphiql^5GraphiQL v5 组件库本仓库packages/graphiql的发布包next^15Next.js 15App Router 路由框架react/react-dom^19React 19 运行时typescript等^5类型检查与构建工具链对应可用的 npm 脚本dev/build/start/lint/types:check分别用于启动开发服务器、生产构建、生产启动、代码检查和 TypeScript 类型校验。运行示例参照 README 的指引安装依赖后启动开发服务器npm run dev # 或 yarn dev # 或 pnpm dev # 或 bun dev浏览器访问 http://localhost:3000 即可看到嵌入的 GraphiQL 界面。README 还指出编辑 src/app/graphiql.tsx 时页面会热更新auto-updates。需要生成生产版本时使用npm run build # 生产构建 npm run start # 生产模式启动核心技术剖析页面组件与自定义 fetcher1. 首页路由将 GraphiQL 组件设为默认页面App Router 中src/app/page.ts是根路由/的页面入口。示例通过命名导出再转发的方式把 GraphiQL 页面的实现放在独立文件graphiql.tsx中路由文件只负责导出并声明页面元数据// src/app/page.ts import type { Metadata } from next; export { GraphiQLPage as default } from ./graphiql; export const metadata: Metadata { title: GraphiQL Next.js Example, };这种拆分让路由声明与组件实现解耦metadata可为页面提供标题等 SEO/浏览器标签信息。2. 核心组件use client 与自定义 fetchersrc/app/graphiql.tsx 是整个示例的关键文件完整内容如下use client; import type { FC } from react; import { GraphiQL } from graphiql; import graphiql/setup-workers/webpack; import graphiql/style.css; async function fetcher(graphQLParams: Recordstring, unknown) { const response await fetch(https://graphql.earthdata.nasa.gov/api, { method: POST, headers: { Accept: application/json, Content-Type: application/json, }, body: JSON.stringify(graphQLParams), }); return response.json(); } export const GraphiQLPage: FC () { return GraphiQL fetcher{fetcher} /; };这里包含三个关键点1use client指令。GraphiQL 是纯浏览器端交互组件编辑器、文档浏览器、执行请求等都在客户端完成因此组件文件顶部必须声明use client将其标记为 Next.js 客户端组件避免在服务端渲染时执行浏览器 API。2自定义 fetcher 对接远端服务。fetcher函数接收 GraphQL 参数对象含query、variables、operationName等字段类型为Recordstring, unknown通过fetch以POST方式发送到目标 GraphQL 端点并返回解析后的 JSON。这是 GraphiQL v5 最常用的数据接入方式——执行按钮点击后GraphiQL 内部会把graphQLParams交给 fetcher因此你可以自由对接任意支持 HTTP POST 的 GraphQL 服务或在此基础上追加鉴权 Header、错误处理等逻辑。示例对接的是公开的 NASA EOSDIS 地球科学数据 GraphQL APIhttps://graphql.earthdata.nasa.gov/api。3GraphiQL fetcher{fetcher} /极简挂载。GraphiQL 顶层组件接收fetcher后即可呈现完整的 IDE 界面。从源码看GraphiQLProps 由GraphiQLInterfaceProps、GraphiQLProvider的 props 以及HistoryStore的 props 合并而来因此除了fetcher你还可以传入defaultEditorToolsVisibility、isHeadersEditorEnabled、forcedTheme、plugins、maxHistoryLength等配置见 GraphiQL.tsx 的 props 解构清单。3. 样式与 Worker两行关键导入import graphiql/setup-workers/webpack; import graphiql/style.css;graphiql/style.cssGraphiQL 的默认主题样式必须引入否则界面会失去布局与外观。graphiql/setup-workers/webpackGraphiQL 的代码补全、诊断等语言服务能力依赖 Web Worker 运行。该入口根据打包器选择对应实现。在packages/graphiql中setup-workers/webpack.ts 的内容是转发graphiql/react/setup-workers/webpack即由graphiql/react包统一提供按打包器webpack/vite/esm.sh区分的 Worker 初始化逻辑。如果你使用 Vite应改为graphiql/setup-workers/vite使用 esm.sh 场景则用graphiql/setup-workers/esm.sh——具体可对照 packages/graphiql/src/setup-workers 目录下的三个入口文件。布局与全局样式让 GraphiQL 撑满视口示例通过 src/app/globals.css 处理两个布局要点body { margin: 0; } .graphiql-container { height: 100dvh !important; }重置body外边距消除浏览器默认间距将.graphiql-container高度强制设为100dvh动态视口高度使 GraphiQL 界面在移动端地址栏伸缩时也能铺满整个可视区域。同时在 layout.tsx 中声明了根布局的元数据描述Example of using GraphiQL with the Next.js App Router和空的openGraph: {}用于生成 Open Graph / Twitter 标签并引入globals.cssimport type { FC, ReactNode } from react; import type { Metadata } from next; import ./globals.css; export const metadata: Metadata { description: Example of using GraphiQL with the Next.js App Router, // Empty object adds open graph and twitter meta-tags openGraph: {}, }; const RootLayout: FCReadonly{ children: ReactNode } ({ children }) { return ( html langen body{children}/body /html ); }; export default RootLayout;配置与类型检查示例的 next.config.ts 保持默认空配置/* config options here */说明在不做任何额外设置的情况下 GraphiQL 即可正常工作如果你的部署场景需要自定义输出模式、镜像或代理可在此文件扩展。tsconfig.json 采用严格模式strict: true并启用next插件、jsx: preserve、moduleResolution: node等典型 Next.js 配置其中include覆盖next-env.d.ts、**/*.ts、**/*.tsx与.next/types/**/*.ts。可通过npm run types:checktsc --noEmit进行类型校验。常见问题与排查要点页面空白或样式错乱确认已引入graphiql/style.css且.graphiql-container高度已设置参考上面 globals.css 的做法。补全/诊断不生效确认已按打包器引入对应的 setup-workers 入口webpack 场景为graphiql/setup-workers/webpack。报只能在客户端使用类错误确认承载 GraphiQL 的组件文件顶部带有use client指令。修改端点直接修改 graphiql.tsx 中fetcher里的 URL或通过环境变量注入 GraphQL 端点地址如需携带认证在headers中追加Authorization字段即可。类型检查报错在package.json中新增的types:check脚本基于tsc --noEmit配合严格模式可及早发现 props 传参问题。小结examples/graphiql-nextjs用最小代码量演示了 GraphiQL v5 在 Next.js App Router 中的标准集成路径客户端组件声明 → 自定义 fetcher → worker 与样式导入 → 路由转发 → 全屏布局样式。以此为模板你可以快速在任意 Next.js 项目中搭建一个面向内部或公开 API 的 GraphQL 调试页面并进一步扩展多端点切换、鉴权 Header、主题定制等能力。【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考