后端数据库GraphQL【免费下载链接】prisma1 Database Tools incl. ORM, Migrations and Admin UI (Postgres, MySQL MongoDB) [deprecated]项目地址https://gitcode.com/gh_mirrors/pr/prisma1点击查看免费下载GraphQL Playground 是一款面向更好开发工作流的 GraphQL IDE原生支持 GraphQL Subscriptions、交互式文档浏览与协作分享。本指南以其在 Prisma 生态中的实际使用为主线完整讲解其核心特性、与 GraphiQL 的差异、桌面版与 Web 版的区别以及作为 React 组件、服务端中间件和 Serverless Handler 三种集成方式的安装与配置最后结合本仓库prisma playground命令的源码实现说明如何在 Prisma 服务中一键唤起 Playground 调试数据模型 API。GraphQL Playground 是什么GraphQL Playground 是一个图形化的 GraphQL IDE用于提升 GraphQL 的本地开发体验。与手写curl或使用通用 HTTP 工具如 Postman相比它针对 GraphQL 的工作方式做了专门优化能够感知当前 schema 提供自动补全、内置交互式文档、支持实时订阅等能力。在本仓库的 Prisma 文档体系中Playground 是开发者调试服务端点的默认工具。例如在 Prisma 快速入门 中明确说明Prisma 服务 API 通过 HTTP 暴露开发者既可以借助curl、Postman 等通用工具也可以直接使用 GraphQL Playground 这个交互式 IDE若本机未安装桌面版 Playgroundprisma playground命令会自动在默认浏览器中打开 Web 版。核心特性一览GraphQL Playground 针对 GraphQL 开发工作流提供了以下关键能力上下文感知的自动补全与错误高亮输入查询时根据 schema 提供字段级补全语法错误即时标红交互式多列文档支持键盘操作schema 文档以多列形式呈现类型、字段、参数层层展开无需切换窗口即可查阅支持实时 GraphQL Subscriptions可在 IDE 内建立订阅并实时查看推送数据GraphQL Config 支持配合 graphql-config 可管理多个 Project 与多个 EndpointApollo Tracing 支持可查看请求的耗时分析信息。与 GraphiQL 的区别GraphQL Playground 内部复用了 GraphiQL 的部分组件但定位是更强大的 GraphQL IDE更侧重于本地开发工作流。相比 GraphiQL它额外提供了交互式、多列显示的 schema 文档自动 schema 重载GraphQL Subscriptions 支持查询历史Query historyHTTP 请求头的配置多标签页Tabs支持。对于日常调试来说多列文档和自动 schema 重载带来的体验提升最为直观schema 变更后无需手动刷新即可看到最新字段。桌面版与 Web 版的区别GraphQL Playground 提供两种形态核心功能一致Web 版通过浏览器访问可快速体验也常用于在线分享桌面版Desktop App与 Web 版功能相同但额外包含对 graphql-config 的原生支持可配置多环境multi-environment工作流双击打开*.graphql文件方便直接在本地文件中编辑查询。GraphQL BinPlayground 协作分享GraphQL Bin 可以理解为GraphQL 查询版的 Pastebin点击 Playground 中的Share按钮即可生成分享链接链接中包含完整的上下文——endpoint、HTTP 请求头、打开的标签页等接收方打开链接即可复现你的完整调试环境。这对协作排障和问题复现非常有价值。Playground 的通用配置属性无论使用 React 组件、各类服务端中间件还是 Serverless HandlerGraphQL Playground 对外暴露的配置项保持一致属性类型说明endpointstringGraphQL endpoint 的 URLsubscriptionEndpointstringGraphQL Subscriptions endpoint 的 URLsetTitleboolean是否在页面标题中反映当前 endpoint方式一作为 React 组件集成GraphQL Playground 提供负责 UI 渲染与会话Session管理的 React 组件需要满足 3 个前置条件引入Open Sans与Source Code Pro字体引入graphql-playground/playground.css样式渲染Playground /组件。注意该 React 组件要求React 16。安装yarn add graphql-playground引入字体link hrefhttps://fonts.googleapis.com/css?familyOpenSans:300,400,600,700|SourceCodePro:400,700 relstylesheet引入样式并渲染组件import React from react import ReactDOM from react-dom import Playground from graphql-playground import graphql-playground/playground.css ReactDOM.render(Playground endpointhttps://api.graph.cool/simple/v1/swapi /, document.body)endpoint指向你的 GraphQL 服务地址组件渲染后即可直接在页面上编写并执行查询。方式二作为服务端中间件集成如果你的 GraphQL 服务运行在 Express、Hapi、Koa 或 AWS Lambda 之上可以选用对应的中间件包# 根据服务端框架选择对应的包 yarn add graphql-playground-middleware-express # 适用于 Express 或 Connect yarn add graphql-playground-middleware-hapi yarn add graphql-playground-middleware-koa yarn add graphql-playground-middleware-lambda每种框架都有对应的完整示例。Express 场景的典型用法是在挂载 GraphQL API 的同时挂载 Playground 路由浏览器访问该路由即获得调试页面。在本仓库中Prisma CLI 正是以graphql-playground-middleware-express为基础实现prisma playground命令的见 prisma-cli-core 的 package.json 依赖声明以及 playground 命令实现 中通过expressPlayground({ endpoint: /graphql, config: config.config })挂载/playground路由的代码。方式三作为 Serverless Handler 集成在 Serverless 架构下Playground 可以作为一个独立的 Lambda Handler 暴露。安装yarn add graphql-playground-middleware-lambdahandler.jsimport lambdaPlayground from graphql-playground-middleware-lambda // 或使用 require() // const lambdaPlayground require(graphql-playground-middleware-lambda).default exports.graphqlHandler function graphqlHandler(event, context, callback) { function callbackFilter(error, output) { // eslint-disable-next-line no-param-reassign output.headers[Access-Control-Allow-Origin] * callback(error, output) } const handler graphqlLambda({ schema: myGraphQLSchema }) return handler(event, context, callbackFilter) } exports.playgroundHandler lambdaPlayground({ endpoint: /dev/graphql, })serverless.ymlfunctions: graphql: handler: handler.graphqlHandler events: - http: path: graphql method: post cors: true playground: handler: handler.playgroundHandler events: - http: path: playground method: get cors: true这里将 GraphQL APIPOST与 Playground 调试页GET拆分为两个独立函数并分别开启cors: truelambdaPlayground的endpoint指向部署环境下的 GraphQL 路径使 Playground 页面可以正确代理查询请求。在 Prisma 项目中使用prisma playground命令在本仓库的 Prisma CLI 中Playground 被深度集成进工作流。prisma playground命令的作用是为当前服务打开 GraphQL Playground详见 CLI 命令参考。基本用法prisma playground [flags]默认行为打开 Playground。若本机安装了桌面版应用则打开桌面版强制使用浏览器版传入-w, --web标志。示例# 打开 Playground已安装时使用桌面版 prisma playground # 打开浏览器版 Playground prisma playground --web命令的底层实现剖析prisma playground的实现位于 cli/packages/prisma-cli-core/src/commands/playground/index.ts从源码可以看出比命令文档更完整的 flag 集合-w, --web强制打开浏览器版 Playground-e, --env-file注入环境变量的.env文件路径-p, --projectPrisma 定义文件prisma.yml的路径-s, --server-only仅启动本地服务不自动打开浏览器--portPlayground Web 版的服务端口隐式启用--web默认3000。其运行决策逻辑见 index.ts#L74-L102值得关注检查 macOS 桌面版安装路径/Applications/GraphQL Playground.app/...是否存在计算shouldStartServer serverOnly || web || !isLocalPlaygroundAvailable——即显式指定了 server-only / web或者本机没有桌面版时走本地 Web 服务方案若启动本地服务先用express-request-proxy将/graphql请求代理到真实的服务 endpoint来源为prisma.yml中的endpoint或 cluster 计算出的 API 地址见 index.ts#L84-L91再用graphql-playground-middleware-express在/playground挂载 IDE 页面index.ts#L130-L152最后通过opn打开http://localhost:port/playground若使用桌面版生成graphql-playground://?cwd...envPath...协议 URL 交给系统打开其中envPath指向一个临时写入当前进程环境变量的 JSON 文件index.ts#L97-L102。此外命令通过graphql-config与graphql-config-extension-prisma读取项目根目录的 GraphQL Config如.graphqlconfig.yml从而在 Playground 中同时呈现多个 Project / Endpointindex.ts#L105-L114。这也解释了为什么 Playground 的浏览器版需要依赖 graphql-config 的能力项目中既包含 Prisma 服务 endpoint也可能同时包含其他 GraphQL 端点如自建的应用层 GraphQL 服务器它们可以在同一个 IDE 中切换调试。在 Prisma 工作流中的典型用法完成prisma deploy后直接运行prisma playground即可对刚部署的服务进行查询、变更mutation与订阅调试。若项目同时存在应用层 GraphQL 服务例如基于 graphql-yoga 构建的服务器其 boilerplate 的dev脚本也会自动打开 Playground参见 TypeScript 快速入门此时.graphqlconfig.yml中配置的 endpoints 将决定 Playground 默认连接的目标。小结GraphQL Playground 是围绕 GraphQL 开发工作流设计的 IDE自动补全、交互式文档、Subscriptions 与协作分享覆盖了从编写到排障的完整环节。你可以按需选择 React 组件、Express/Hapi/Koa/Lambda 中间件等集成形态而在 Prisma 项目中prisma playground命令把 Playground 与服务 endpoint、graphql-config 打通一条命令即可获得与当前服务实时同步的调试环境是 Prisma 日常开发中最高频的工具之一。赞分享后端数据库GraphQL【免费下载链接】prisma1 Database Tools incl. ORM, Migrations and Admin UI (Postgres, MySQL MongoDB) [deprecated]项目地址https://gitcode.com/gh_mirrors/pr/prisma1点击查看免费下载相关推荐GraphQL Playground 实战指南在 Prisma 生态中使用交互式 GraphQL IDEGraphQL Playground 实战指南在 Prisma 生态中使用交互式 GraphQL IDE GraphQL Playground 是 Graph后端数据库GraphQLGraphQL Playground 实战指南在 Prisma 项目中打造交互式 GraphQL IDEGraphQL Playground 实战指南在 Prisma 项目中打造交互式 GraphQL IDE 导读 GraphQL Playground 是一款面后端数据库GraphQLPrisma 项目中的 GraphQL Playground 实战指南交互式 IDE、CLI 集成与自定义嵌入Prisma 项目中的 GraphQL Playground 实战指南交互式 IDE、CLI 集成与自定义嵌入 GraphQL Playground 是一款面后端数据库GraphQL创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考