{"id":47802,"library":"graphiql","title":"GraphiQL - GraphQL IDE","description":"GraphiQL is an interactive in-browser GraphQL IDE, version 5.2.3. It provides a graphical interface for exploring and testing GraphQL APIs, with features like syntax highlighting, auto-completion, documentation explorer, and history. Released actively, it is the official IDE from the GraphQL Foundation. Key differentiators include full integration with GraphQL language features, extensibility via plugins, and lightweight setup compared to alternatives like GraphQL Playground. Peer dependencies include React 18 or 19 and GraphQL 15-17.","status":"active","version":"5.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/graphql/graphiql","tags":["javascript","typescript"],"install":[{"cmd":"npm install graphiql","lang":"bash","label":"npm"},{"cmd":"yarn add graphiql","lang":"bash","label":"yarn"},{"cmd":"pnpm add graphiql","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"UI rendering","package":"react","optional":false},{"reason":"UI rendering DOM-specific","package":"react-dom","optional":false},{"reason":"Core GraphQL functionality","package":"graphql","optional":false}],"imports":[{"note":"Named export since v2; default export removed in v3","wrong":"import GraphiQL from 'graphiql'","symbol":"GraphiQL","correct":"import { GraphiQL } from 'graphiql'"},{"note":"useTheme moved to @graphiql/react in v5","wrong":"import { useTheme } from 'graphiql'","symbol":"useTheme","correct":"import { useTheme } from '@graphiql/react'"},{"note":"Exact path required in v5, dist is necessary","wrong":"import { themeStyle } from 'graphiql/theme'","symbol":"themeStyle","correct":"import { themeStyle } from 'graphiql/dist/theme'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport 'graphiql/graphiql.css';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(React.createElement(GraphiQL, { fetcher: async (graphQLParams) => fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(graphQLParams) }).then(res => res.json()) }));","lang":"typescript","description":"Basic GraphiQL setup with a custom fetcher function, rendering the IDE component with CSS."},"warnings":[{"fix":"Use import { GraphiQL } from 'graphiql'","message":"Default export removed in v3; must use named export GraphiQL.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Install @graphiql/react and import from there","message":"useTheme hook moved to @graphiql/react in v5; importing from graphiql will fail.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Use import 'graphiql/graphiql.css' or 'graphiql/dist/graphiql.css'","message":"CSS import path changed; old path 'graphiql/graphiql.css' still works but 'graphiql/dist/graphiql.css' is preferred.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Ensure fetcher returns parsed JSON object with { data, errors } etc.","message":"GraphiQL fetcher must return a Promise resolving to a FetchResult object, not a raw Response.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install react, react-dom, and graphql as dependencies","message":"Peer dependencies must be installed manually; GraphiQL does not install React or GraphQL automatically.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'-17':80 '15':79 '18':74 '19':76 '5.2.3':14 'activ':39 'altern':66 'api':25 'auto':32 'auto-complet':31 'browser':10 'compar':64 'complet':33 'depend':71 'differenti':50 'document':34 'explor':21,35 'extens':58 'featur':27,57 'foundat':48 'full':52 'graphic':18 'graphiql':1,4 'graphql':2,11,24,47,55,68,78 'highlight':30 'histori':37 'ide':3,12,44 'in-brows':8 'includ':51,72 'integr':53 'interact':7 'interfac':19 'javascript':81 'key':49 'languag':56 'lightweight':62 'like':28,67 'offici':43 'peer':70 'playground':69 'plugin':60 'provid':16 'react':73 'releas':38 'setup':63 'syntax':29 'test':23 'typescript':82 'version':13 'via':59","created_at":"2026-06-07T16:53:23.326581+00:00","updated_at":"2026-06-07T16:53:23.326581+00:00","problems":[{"fix":"Use import 'graphiql/graphiql.css' (without dist).","cause":"CSS file path changed in v5.","error":"Module not found: Can't resolve 'graphiql/graphiql.css'"},{"fix":"Use import { GraphiQL } from 'graphiql'","cause":"Using default import instead of named import in v3+.","error":"Attempted import error: 'GraphiQL' is not exported from 'graphiql'."},{"fix":"Ensure app and GraphiQL use same React version. Check package.json for multiple react entries.","cause":"React version mismatch or multiple React instances.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/graphql/graphiql/tree/master/packages/graphiql#readme","github":"https://github.com/graphql/graphiql","docs":null,"changelog":null,"pypi":null,"npm":"graphiql","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}