https://graphql.org/_next/static/chunks/pages/blog/2020-04-03-graphiql-graphql-playground-11d3f330f17bafb5.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6722],{30273:function(e,r,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/2020-04-03-graphiql-graphql-playground",function(){return n(73302)}])},73302:function(e,r,n){"use strict";n.r(r),n.d(r,{default:function(){return h},useTOC:function(){return l}});var t=n(52676),a=n(92937),i=n(45043),o=n(79428),s={src:"/_next/static/media/playground-transition-banner.2458871d.png",height:500,width:1600,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAMAAACZFr56AAAADFBMVEUaHiYuLiwxGTRiJU4sjDnfAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAE0lEQVR4nGNggANmRkZGJiYEHwAAowALFOGsxQAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:3};function l(e){let r={code:"code",...(0,o.a)()};return[{value:"GraphiQL’s beginnings",id:"graphiqls-beginnings",depth:2},{value:"Enter Playground",id:"enter-playground",depth:2},{value:"Prisma Donates Playground to GraphQL Foundation",id:"prisma-donates-playground-to-graphql-foundation",depth:2},{value:"The Playground Features you love",id:"the-playground-features-you-love",depth:2},{value:"New Features",id:"new-features",depth:2},{value:"How will it be re-implemented?",id:"how-will-it-be-re-implemented",depth:2},{value:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.code,{children:"graphql-playground"})," repository next steps"]}),id:"graphql-playground-repository-next-steps",depth:2},{value:"Call for Contributors",id:"call-for-contributors",depth:2}]}var h=(0,a.c)(function(e){let{toc:r=l(e)}=e,n={a:"a",code:"code",em:"em",h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Banner showing the Prisma and GraphQL Foundation logos with a :handshake: emoji between them",placeholder:"blur",src:s})}),"\n",(0,t.jsx)(n.h2,{id:r[0].id,children:r[0].value}),"\n",(0,t.jsx)(n.p,{children:"The initial public commit to GraphiQL was in 2014."}),"\n",(0,t.jsxs)(n.p,{children:["When ",(0,t.jsx)(n.a,{href:"https://github.com/leebyron",children:"Lee Byron"}),", ",(0,t.jsx)(n.a,{href:"https://github.com/asiandrummer",children:"Hyo Jeong"})," and ",(0,t.jsx)(n.a,{href:"https://github.com/AGS-",children:"Angel Gomez"})," first published it, the intention was to create a minimal reference IDE development ecosystem for GraphQL. ",(0,t.jsx)(n.a,{href:"https://github.com/wincent",children:"Greg Hurrell"})," created the streaming ",(0,t.jsx)(n.code,{children:"graphql-language-service-parser"}),", designed to empower the ",(0,t.jsx)(n.code,{children:"codemirror-graphql"})," mode."]}),"\n",(0,t.jsx)(n.p,{children:"The goal was to give people the utility packages they needed to build their own web based or desktop IDE tool, and at its core, a relatively simple tool for folks to start learning and applying the language, and for exploring schemas. At the time, LSP was not yet a commonly accepted standard, and VSCode had yet to become the incredibly popular development tool it is today."}),"\n",(0,t.jsxs)(n.p,{children:["Last year, these original engineers handed over to the graphql foundation three repositories: GraphiQL, ",(0,t.jsx)(n.code,{children:"codemirror-graphql"})," and the ",(0,t.jsx)(n.code,{children:"graphql-language-service"})," packages."]}),"\n",(0,t.jsx)(n.p,{children:"Fast forward to now, and GraphiQL is now used by GraphQL implementations in dozens of languages, as well as hundreds of frameworks and runtimes. It’s used for everything from HTTP operations, to querying local schemas, data science tools, and even for data transmission for IOT platforms. You’ll find it in the AWS dashboard, GitHub developer tools, and many more places we are honored to see this library used."}),"\n",(0,t.jsx)(n.h2,{id:r[1].id,children:r[1].value}),"\n",(0,t.jsxs)(n.p,{children:["Alongside GraphiQL, many of us are familiar with its sibling - the handsome & feature-full ",(0,t.jsx)(n.a,{href:"https://github.com/prisma-labs/graphql-playground",children:"GraphQL Playground"}),". Following GraphiQL’s lead, it uses our ",(0,t.jsx)(n.code,{children:"codemirror-graphql"})," (",(0,t.jsx)(n.a,{href:"https://insomnia.rest/graphql/",children:"Insomnia"}),", ",(0,t.jsx)(n.a,{href:"https://altair.sirmuel.design/",children:"Altair"})," and many others are also in this club!). This is why there are so many similarities between the direct editing experience of these tools."]}),"\n",(0,t.jsxs)(n.p,{children:["Playground is ",(0,t.jsx)(n.em,{children:"exactly"})," what we wanted to happen. It helped drive the development of our language ecosystem, and gave users an easier option than the more customization-oriented GraphiQL. It provided a ton of excellent features - ",(0,t.jsx)(n.code,{children:"graphql-config"})," support, multiple tabs, i18n, and http server middlewares."]}),"\n",(0,t.jsx)(n.h2,{id:r[2].id,children:r[2].value}),"\n",(0,t.jsxs)(n.p,{children:["As many have successfully guessed, ",(0,t.jsxs)(n.strong,{children:["Prisma ",(0,t.jsx)(n.em,{children:"is"})," donating Playground to the GraphQL Foundation."]})," Entering 2019 Prisma envisioned an eventual Playground 2.0 but then the advent of a modular GraphiQL 2 project showed an opportunity for great synergy, made all the more natural by Prisma’s pivot toward modular database tooling for developers."]}),"\n",(0,t.jsxs)(n.p,{children:["Playground 1.x has been a community effort of ",(0,t.jsx)(n.a,{href:"https://github.com/prisma-labs/graphql-playground/graphs/contributors",children:"dozens of contributors"}),". Prisma thanks all contributors who helped out along the way. Prisma remains deeply committed to supporting the future of the GraphQL language. For example the ",(0,t.jsx)(n.a,{href:"https://github.com/prisma-labs",children:"Prisma Labs team"})," continues to focus on GraphQL API layer and ",(0,t.jsx)(n.a,{href:"https://github.com/prisma-labs/nexus/issues/373",children:"recently announced"})," the transition of ",(0,t.jsx)(n.a,{href:"https://nexus.js.org/",children:"Nexus"})," from a schema building library into a full ",(0,t.jsx)(n.a,{href:"https://www.nexusjs.org",children:"fledged GraphQL API framework"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:r[3].id,children:r[3].value}),"\n",(0,t.jsx)(n.p,{children:"In the interest of parity, we will keep a lot of the same features, whether by introducing them to the core or proving plugins that will ship with the playground preset."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"multiple tabs (GraphiQL Core)"}),"\n",(0,t.jsx)(n.li,{children:"headers tab per operation tab (plugin)"}),"\n",(0,t.jsx)(n.li,{children:"tracing tab (plugin)"}),"\n",(0,t.jsx)(n.li,{children:"playground doc explorer (plugin)"}),"\n",(0,t.jsx)(n.li,{children:"internationalization (GraphiQL Core)"}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"graphql-config"})," support, with new features thanks to our fantastic colleagues at the ",(0,t.jsx)(n.a,{href:"https://github.com/orgs/the-guild-org/people",children:"Guild Dev"}),", who Prisma has entrusted with many other projects."]}),"\n",(0,t.jsx)(n.li,{children:"easy to use middlewares"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:r[4].id,children:r[4].value}),"\n",(0,t.jsxs)(n.p,{children:["These new features will come with the new ",(0,t.jsx)(n.code,{children:"[email protected]"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["vscode style command palette (via ",(0,t.jsx)(n.code,{children:"monaco-editor"}),")"]}),"\n",(0,t.jsx)(n.li,{children:"jump to fragment or other type definitions"}),"\n",(0,t.jsx)(n.li,{children:"generate a collection of operations from your project’s source files"}),"\n",(0,t.jsx)(n.li,{children:"more customizable network options - default headers per project, as well as headers per-operation"}),"\n",(0,t.jsx)(n.li,{children:"helpers for integrating custom authentication flows"}),"\n",(0,t.jsx)(n.li,{children:"extensive theme, layout, and component customization abilities (you can start with the playground theme preset and work from there!)"}),"\n",(0,t.jsx)(n.li,{children:"custom tabs and panels"}),"\n",(0,t.jsxs)(n.li,{children:["a first-class ",(0,t.jsx)(n.code,{children:"graphiql-ex

1plorer"})," plugin in partnership with the original creators, our colleagues at ",(0,t.jsx)(n.a,{href:"https://www.onegraph.com/",children:"OneGraph"})]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:r[5].id,children:r[5].value}),"\n",(0,t.jsxs)(n.p,{children:["Playground 2.0 will be a GraphiQL preset that includes the custom theme as well as the custom playground doc explorer plugin (as an alternative to the new doc explorer proposed by @orta and other users), HTTP headers and tracing tab plugins. You can find more technical detail, ongoing discussion and things to work on the ",(0,t.jsx)(n.a,{href:"https://github.com/graphql/graphiql/issues/983",children:"GraphiQL Plugin API Meta Issue"})," or in ",(0,t.jsx)(n.a,{href:"https://github.com/graphql/graphiql/issues?q=label%3Agraphql-playground-preset",children:"other playground related discussion issues"})," in the GraphiQL monorepo."]}),"\n",(0,t.jsxs)(n.p,{children:["While the Playground team’s baseline goal will be relative parity with Playground 1.0, the team will be accepting proposals for new features and plugins that build on the existing GraphQL Playground experience. The ",(0,t.jsx)(n.a,{href:"https://github.com/graphql/graphiql/projects/10",children:"Features Roundup"})," project is a great place to see what we have planned already for plugins that Playground’s preset can use, or you can also create a proposal if you don’t see what you’re looking for."]}),"\n",(0,t.jsx)(n.h2,{id:r[6].id,children:r[6].value}),"\n",(0,t.jsxs)(n.p,{children:["The existing ",(0,t.jsx)(n.code,{children:"graphql-playground"}

1)," repository will get one or two more maintenance/bugfix releases before it will be archived. You can still fork it of course. You can learn more about this in ",(0,t.jsx)(n.a,{href:"https://github.com/prisma-labs/graphql-playground/issues/1143",children:"the graphql-playground issue"})," we created for this migration."]}),"\n",(0,t.jsx)(n.h2,{id:r[7].id,children:r[7].value}),"\n",(0,t.jsxs)(n.p,{children:["We’re also looking for contributors to form a team to develop, support and maintain a playground preset. The goal would be for them to help iterate on and stabilize the plugin API effort, as well as work towards the effort of contributing to and maintaining the playground preset and its associated plugins. If you are interested leave comment in the ",(0,t.jsx)(n.a,{href:"https://github.com/graphql/graphiql/issues/1443",children:"Call for Contributors Github issue"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["You can also follow the ",(0,t.jsx)(n.a,{href:"https://github.com/graphql/graphiql/issues/983",children:"Plugin API Proposal discussion issue"})," for updates, and get involved in our ",(0,t.jsx)(n.a,{href:"https://discord.gg/EXUYPaY",children:"discord channel"})," we’ve created just for the playground initiative."]})]})},"/blog/2020-04-03-graphiql-graphql-playground",{filePath:"src/pages/blog/2020-04-03-graphiql-graphql-playground.mdx",timestamp:1789481543e3,pageMap:i.v,frontMatter:{title:"Web-based GraphQL IDEs for the win: How & Why Playground & GraphiQL are joining forces",tags:["announcements"],date:"2020-04-03",byline:"Rikki Schulte, Jason Kuhrt"},title:"Web-based GraphQL IDEs for the win: How & Why Playground & GraphiQL are joining forces"},"undefined"==typeof RemoteContent?l:RemoteContent.useTOC)}},function(e){e.O(0,[3556,5043,2888,9774,179],function(){return e(e.s=30273)}),_N_E=e.O()}]);