├── .nvmrc ├── working-group ├── proposals │ └── .gitkeep └── minutes │ ├── 2019-06-18.md │ ├── 2019-08-21.md │ └── 2022-01-11.md ├── .npmrc ├── examples ├── cm6-graphql-legacy-parcel │ ├── .gitignore │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ ├── index.ts │ │ └── index.html │ └── package.json ├── cm6-graphql-parcel │ ├── .gitignore │ ├── README.md │ ├── tsconfig.json │ └── src │ │ └── index.html ├── monaco-graphql-react-vite │ ├── src │ │ ├── editor.tsx │ │ ├── constants.ts │ │ ├── globals.css │ │ └── env.d.ts │ ├── README.md │ ├── tsconfig.json │ ├── package.json │ └── index.html ├── graphiql-webpack │ ├── babel.config.js │ ├── index.html.ejs │ └── README.md ├── graphiql-vite-react-router │ ├── public │ │ └── robots.txt │ ├── app │ │ ├── routes.ts │ │ ├── routes │ │ │ └── _index │ │ │ │ ├── globals.css │ │ │ │ ├── create-fetcher.ts │ │ │ │ └── route.ts │ │ └── root.tsx │ ├── vite.config.ts │ ├── react-router.config.ts │ └── package.json ├── graphiql-nextjs │ ├── src │ │ └── app │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── page.ts │ │ │ ├── layout.tsx │ │ │ └── graphiql.tsx │ ├── next.config.ts │ ├── next-env.d.ts │ ├── README.md │ ├── package.json │ └── tsconfig.json ├── monaco-graphql-nextjs │ ├── src │ │ └── app │ │ │ ├── favicon.ico │ │ │ ├── env.d.ts │ │ │ ├── globals.css │ │ │ └── layout.tsx │ ├── next.config.ts │ ├── next-env.d.ts │ ├── package.json │ ├── tsconfig.json │ └── README.md ├── graphiql-vite │ ├── src │ │ ├── index.jsx │ │ └── App.jsx │ ├── README.md │ ├── package.json │ ├── vite.config.mjs │ └── index.html ├── graphiql-cdn │ ├── package.json │ └── README.md ├── graphiql-parcel │ └── README.md ├── graphiql-create-react-app │ └── README.md └── monaco-graphql-webpack │ ├── babel.config.js │ ├── README.md │ ├── tsconfig.json │ └── src │ └── index.html.ejs ├── packages ├── graphql-language-service │ ├── src │ │ ├── utils │ │ │ ├── __tests__ │ │ │ │ ├── __fixtures__ │ │ │ │ │ ├── noextension │ │ │ │ │ ├── invalid.fake │ │ │ │ │ ├── package.json │ │ │ │ │ └── file.js │ │ │ │ └── __schema__ │ │ │ │ │ └── RecursiveSchema.graphql │ │ │ └── index.ts │ │ ├── interface │ │ │ ├── __tests__ │ │ │ │ ├── queries │ │ │ │ │ ├── testQuery.graphql │ │ │ │ │ └── definitionQuery.graphql │ │ │ │ ├── __queries__ │ │ │ │ │ └── testQuery.graphql │ │ │ │ └── __schema__ │ │ │ │ │ └── HoverTestSchema.graphql │ │ │ └── index.ts │ │ ├── parser │ │ │ └── index.ts │ │ └── temp-bin.ts │ ├── vitest.config.mts │ ├── tsconfig.esm.json │ └── tsconfig.json ├── graphql-language-service-server │ ├── src │ │ ├── __tests__ │ │ │ ├── __queries__ │ │ │ │ ├── test2.graphql │ │ │ │ ├── test.graphql │ │ │ │ ├── test3.graphql │ │ │ │ └── testFragment.graphql │ │ │ └── __utils__ │ │ │ │ ├── runServer.js │ │ │ │ └── utils.ts │ │ ├── parsers │ │ │ ├── types.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ └── stringToHash.ts │ ├── .npmignore │ ├── jest.config.js │ ├── tsconfig.esm.json │ └── tsconfig.json ├── graphiql-plugin-history │ ├── __mocks__ │ │ ├── zustand.ts │ │ └── monaco-editor.ts │ ├── tsconfig.json │ ├── README.md │ ├── setup-files.ts │ ├── src │ │ ├── deprecated.ts │ │ └── index.ts │ └── vitest.config.mts ├── graphql-language-service-cli │ ├── .npmignore │ ├── vitest.config.mts │ ├── bin │ │ └── graphql.js │ ├── tsconfig.esm.json │ ├── tsconfig.json │ └── src │ │ └── __tests__ │ │ └── index.test.ts ├── graphiql-plugin-doc-explorer │ ├── __mocks__ │ │ ├── zustand.ts │ │ └── monaco-editor.ts │ ├── tsconfig.json │ ├── src │ │ ├── components │ │ │ ├── directive.css │ │ │ ├── default-value.css │ │ │ ├── schema-documentation.css │ │ │ ├── __tests__ │ │ │ │ └── test-utils.ts │ │ │ ├── field-link.css │ │ │ ├── type-link.css │ │ │ ├── type-documentation.css │ │ │ ├── deprecation-reason.css │ │ │ ├── directive.tsx │ │ │ ├── section.css │ │ │ ├── utils.tsx │ │ │ ├── index.ts │ │ │ ├── argument.css │ │ │ ├── field-link.tsx │ │ │ ├── type-link.tsx │ │ │ ├── deprecation-reason.tsx │ │ │ └── default-value.tsx │ │ ├── index.ts │ │ └── deprecated.ts │ ├── setup-files.ts │ ├── README.md │ └── vitest.config.mts ├── graphiql-plugin-explorer │ ├── example │ │ └── index.html │ ├── tsconfig.json │ ├── src │ │ ├── vite-env.d.ts │ │ └── icons │ │ │ ├── checkbox-unchecked.svg │ │ │ ├── checkbox-checked.svg │ │ │ ├── arrow.svg │ │ │ └── folder-plus.svg │ └── vite.config.mts ├── graphiql-react │ ├── __mocks__ │ │ └── monaco-editor.ts │ ├── setup-files.ts │ ├── src │ │ ├── vite-env.d.ts │ │ ├── icons │ │ │ ├── stop.svg │ │ │ ├── chevron-down.svg │ │ │ ├── chevron-up.svg │ │ │ ├── close.svg │ │ │ ├── chevron-left.svg │ │ │ ├── plus.svg │ │ │ ├── field.svg │ │ │ ├── type.svg │ │ │ ├── magnifying-glass.svg │ │ │ ├── implements.svg │ │ │ ├── play.svg │ │ │ ├── deprecated-field.svg │ │ │ ├── root-type.svg │ │ │ ├── argument.svg │ │ │ ├── copy.svg │ │ │ ├── enum-value.svg │ │ │ ├── deprecated-argument.svg │ │ │ ├── docs.svg │ │ │ ├── deprecated-enum-value.svg │ │ │ ├── merge.svg │ │ │ ├── trash.svg │ │ │ ├── directive.svg │ │ │ ├── star.svg │ │ │ ├── star-filled.svg │ │ │ ├── docs-filled.svg │ │ │ ├── history.svg │ │ │ └── reload.svg │ │ ├── utility │ │ │ ├── cleanup-disposables.ts │ │ │ ├── markdown.ts │ │ │ ├── whitespace.spec.ts │ │ │ ├── pick.ts │ │ │ ├── monaco-ssr.ts │ │ │ ├── whitespace.ts │ │ │ ├── debounce.ts │ │ │ ├── create-bounded-use-store.ts │ │ │ └── index.ts │ │ ├── components │ │ │ ├── toolbar-button │ │ │ │ └── index.css │ │ │ ├── tooltip │ │ │ │ ├── index.css │ │ │ │ └── index.tsx │ │ │ ├── spinner │ │ │ │ ├── index.tsx │ │ │ │ └── index.css │ │ │ ├── button-group │ │ │ │ ├── index.tsx │ │ │ │ └── index.css │ │ │ ├── execute-button │ │ │ │ └── index.css │ │ │ ├── toolbar-menu │ │ │ │ └── index.tsx │ │ │ ├── markdown-content │ │ │ │ └── index.tsx │ │ │ ├── index.ts │ │ │ ├── button │ │ │ │ └── index.tsx │ │ │ ├── dialog │ │ │ │ └── index.css │ │ │ └── dropdown-menu │ │ │ │ └── index.css │ │ ├── style │ │ │ └── auto-insertion.css │ │ ├── index.ts │ │ ├── stores │ │ │ ├── storage.ts │ │ │ └── index.ts │ │ ├── setup-workers │ │ │ ├── esm.sh.ts │ │ │ ├── webpack.ts │ │ │ └── vite.ts │ │ └── env.d.ts │ ├── vitest.config.mts │ ├── tsconfig.json │ └── LICENSE ├── graphiql │ ├── src │ │ ├── setup-workers │ │ │ ├── vite.ts │ │ │ ├── esm.sh.ts │ │ │ └── webpack.ts │ │ ├── ui │ │ │ ├── index.ts │ │ │ ├── footer.tsx │ │ │ └── logo.tsx │ │ ├── style.css │ │ └── index.ts │ ├── resources │ │ └── graphiql.png │ ├── cypress │ │ ├── plugins │ │ │ └── index.ts │ │ ├── env.d.ts │ │ ├── fixtures │ │ │ ├── example.json │ │ │ └── fixtures.ts │ │ ├── tsconfig.json │ │ ├── e2e │ │ │ ├── headers.cy.ts │ │ │ └── graphql-ws.cy.ts │ │ └── support │ │ │ └── e2e.ts │ ├── tsconfig.json │ ├── test │ │ ├── package.json │ │ ├── README.md │ │ └── execute.js │ ├── cypress.config.ts │ ├── setup-files.ts │ ├── setup-window.ts │ ├── vitest.config.mts │ └── LICENSE ├── vscode-graphql-syntax │ ├── .vscodeignore │ ├── tests │ │ ├── __fixtures__ │ │ │ ├── query.graphql │ │ │ ├── test.scala │ │ │ ├── test.svelte │ │ │ ├── test.re │ │ │ ├── test-sfc.vue │ │ │ ├── test-sfc-comp.vue │ │ │ ├── test.md │ │ │ ├── test.php │ │ │ ├── test.astro │ │ │ ├── test.py │ │ │ ├── test-py.md │ │ │ ├── test-js.md │ │ │ └── test.ts │ │ ├── php-grammar.spec.ts │ │ ├── python-grammar.spec.ts │ │ ├── reason-grammar.spec.ts │ │ ├── scala-grammar.spec.ts │ │ ├── __utilities__ │ │ │ └── serializer.ts │ │ ├── markdown-grammar.spec.ts │ │ └── graphql-grammar.spec.ts │ ├── assets │ │ └── images │ │ │ └── logo.png │ ├── vitest.config.mts │ ├── language │ │ └── language-configuration.json │ └── grammars │ │ ├── graphql.rescript.json │ │ └── graphql.re.json ├── codemirror-graphql │ ├── .npmignore │ ├── babel.config.js │ ├── resources │ │ ├── example.gif │ │ └── checkgit.sh │ ├── setup-files.ts │ ├── src │ │ ├── cm6-legacy │ │ │ └── mode.ts │ │ ├── index.d.ts │ │ ├── mode.ts │ │ └── utils │ │ │ ├── forEachState.ts │ │ │ └── runParser.ts │ ├── vitest.config.mts │ ├── tsconfig.esm.json │ ├── tsconfig.json │ └── LICENSE ├── monaco-graphql │ ├── src │ │ ├── typings │ │ │ ├── picomatch-browser.d.ts │ │ │ └── monaco-editor.d.ts │ │ ├── initializeMode.ts │ │ ├── lite.ts │ │ ├── full.ts │ │ ├── graphql.worker.ts │ │ ├── monaco.contribution.ts │ │ └── schemaLoader.ts │ ├── vitest.config.mts │ ├── tsconfig.json │ └── tsconfig.esm.json ├── cm6-graphql │ ├── .npmignore │ ├── .gitignore │ ├── src │ │ ├── syntax.grammar.d.ts │ │ ├── index.ts │ │ ├── graphql.ts │ │ ├── interfaces.ts │ │ └── jump.ts │ ├── tsconfig.esm.json │ ├── tsconfig.json │ ├── __tests__ │ │ └── test.spec.ts │ └── LICENSE ├── graphiql-plugin-code-exporter │ ├── tsconfig.json │ └── vite.config.mts ├── vscode-graphql │ ├── assets │ │ ├── images │ │ │ └── logo.png │ │ └── graphql-fonts.woff │ ├── tsconfig.json │ ├── src │ │ ├── serverIpc │ │ │ └── index.ts │ │ └── serverStdio │ │ │ └── index.ts │ ├── .vscodeignore │ └── snippets │ │ └── graphql.json ├── graphiql-toolkit │ ├── src │ │ ├── graphql-helpers │ │ │ └── index.ts │ │ ├── storage │ │ │ └── index.ts │ │ ├── create-fetcher │ │ │ └── index.ts │ │ ├── index.ts │ │ └── format │ │ │ └── index.ts │ ├── vitest.config.mts │ ├── tsconfig.json │ ├── tsup.config.ts │ └── README.md └── vscode-graphql-execution │ ├── assets │ ├── images │ │ └── logo.png │ └── graphql-fonts.woff │ ├── .vscodeignore │ ├── tsconfig.json │ └── src │ └── helpers │ └── extensions.ts ├── .browserslistrc ├── jest.config.js ├── .vscode ├── extensions.json ├── settings.json └── tasks.json ├── resources ├── images │ └── graphiql-logo.png ├── README.md ├── tsconfig.base.esm.json ├── babel.config.js ├── patch-monaco-editor-type.mjs ├── tsconfig.build.esm.json ├── tsconfig.build.cjs.json └── tsconfig.base.cjs.json ├── RELEASING.md ├── .yarnrc.yml ├── js-green-licenses.json ├── .prettierignore ├── functions └── package.json ├── .github ├── ISSUE_TEMPLATE.md └── ISSUE_TEMPLATE │ └── language-server-feature.md ├── .editorconfig ├── SECURITY.md ├── .mailmap ├── .npmignore ├── tsconfig.json ├── netlify.toml ├── .eslintignore ├── .gitattributes ├── .prettierrc ├── .changeset ├── README.md └── config.json ├── .codecov.yml ├── typedoc.json ├── cspell.json ├── turbo.json ├── scripts ├── set-resolution.js └── prepublish.sh ├── .gitignore ├── wg.config.js └── LICENSE /.nvmrc: -------------------------------------------------------------------------------- 1 | 20 2 | -------------------------------------------------------------------------------- /working-group/proposals/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | access=public 3 | -------------------------------------------------------------------------------- /examples/cm6-graphql-legacy-parcel/.gitignore: -------------------------------------------------------------------------------- 1 | .cache/ 2 | -------------------------------------------------------------------------------- /examples/cm6-graphql-parcel/.gitignore: -------------------------------------------------------------------------------- 1 | .cache/ 2 | .parcel-cache/ 3 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/utils/__tests__/__fixtures__/noextension: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /working-group/minutes/2019-06-18.md: -------------------------------------------------------------------------------- 1 | ## 2nd GraphiQL Working Group Minutes 2 | -------------------------------------------------------------------------------- /working-group/minutes/2019-08-21.md: -------------------------------------------------------------------------------- 1 | ## 3rd GraphiQL Working Group Minutes 2 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/__tests__/__queries__/test2.graphql: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/interface/__tests__/queries/testQuery.graphql: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/utils/__tests__/__fixtures__/invalid.fake: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-history/__mocks__/zustand.ts: -------------------------------------------------------------------------------- 1 | ../../graphiql/__mocks__/zustand.ts -------------------------------------------------------------------------------- /packages/graphql-language-service-cli/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | src 3 | yarn.lock 4 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/interface/__tests__/__queries__/testQuery.graphql: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 2 versions 2 | Firefox ESR 3 | not dead 4 | not IE 11 5 | not ios 10 6 | -------------------------------------------------------------------------------- /examples/monaco-graphql-react-vite/src/editor.tsx: -------------------------------------------------------------------------------- 1 | ../../monaco-graphql-nextjs/src/editor.tsx -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/__mocks__/zustand.ts: -------------------------------------------------------------------------------- 1 | ../../graphiql/__mocks__/zustand.ts -------------------------------------------------------------------------------- /packages/graphiql-plugin-explorer/example/index.html: -------------------------------------------------------------------------------- 1 | ../../../examples/graphiql-cdn/index.html -------------------------------------------------------------------------------- /packages/graphiql-react/__mocks__/monaco-editor.ts: -------------------------------------------------------------------------------- 1 | ../../graphiql/__mocks__/monaco-editor.ts -------------------------------------------------------------------------------- /packages/graphiql/src/setup-workers/vite.ts: -------------------------------------------------------------------------------- 1 | import '@graphiql/react/setup-workers/vite'; 2 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | src 3 | yarn.lock 4 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/.vscodeignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **/.browserslistrc/** 3 | tests -------------------------------------------------------------------------------- /examples/monaco-graphql-react-vite/src/constants.ts: -------------------------------------------------------------------------------- 1 | ../../monaco-graphql-nextjs/src/constants.ts -------------------------------------------------------------------------------- /examples/monaco-graphql-react-vite/src/globals.css: -------------------------------------------------------------------------------- 1 | ../../monaco-graphql-nextjs/src/app/globals.css -------------------------------------------------------------------------------- /packages/codemirror-graphql/.npmignore: -------------------------------------------------------------------------------- 1 | babel.config.js 2 | .gitignore 3 | resources 4 | src 5 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../../babel.config'); 2 | -------------------------------------------------------------------------------- /packages/graphiql/src/setup-workers/esm.sh.ts: -------------------------------------------------------------------------------- 1 | import '@graphiql/react/setup-workers/esm.sh'; 2 | -------------------------------------------------------------------------------- /packages/graphiql/src/setup-workers/webpack.ts: -------------------------------------------------------------------------------- 1 | import '@graphiql/react/setup-workers/webpack'; 2 | -------------------------------------------------------------------------------- /packages/monaco-graphql/src/typings/picomatch-browser.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'picomatch-browser'; 2 | -------------------------------------------------------------------------------- /examples/graphiql-webpack/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../../resources/babel.config'); 2 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | projects: ['/packages/*/jest.config.js'], 3 | }; 4 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-history/__mocks__/monaco-editor.ts: -------------------------------------------------------------------------------- 1 | ../../graphiql/__mocks__/monaco-editor.ts -------------------------------------------------------------------------------- /packages/cm6-graphql/.npmignore: -------------------------------------------------------------------------------- 1 | /src 2 | /test 3 | /node_modules 4 | rollup.config.js 5 | tsconfig.json 6 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/__mocks__/monaco-editor.ts: -------------------------------------------------------------------------------- 1 | ../../graphiql/__mocks__/monaco-editor.ts -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-explorer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../graphiql-react/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-history/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../graphiql-react/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-code-exporter/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../graphiql-react/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../graphiql-react/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/utils/__tests__/__fixtures__/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example" 3 | } 4 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../../jest.config.base')(__dirname); 2 | -------------------------------------------------------------------------------- /resources/images/graphiql-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/resources/images/graphiql-logo.png -------------------------------------------------------------------------------- /RELEASING.md: -------------------------------------------------------------------------------- 1 | # Cutting New Releases 2 | 3 | TODO: Redo for `changesets`. See [`Changesets Readme`](./.changeset/README.md) 4 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/utils/__tests__/__fixtures__/file.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | example: true, 3 | }; 4 | -------------------------------------------------------------------------------- /packages/graphiql/resources/graphiql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql/resources/graphiql.png -------------------------------------------------------------------------------- /examples/graphiql-vite-react-router/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: / 4 | -------------------------------------------------------------------------------- /packages/cm6-graphql/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | package-lock.json 3 | /dist 4 | /src/*.js 5 | /src/*.d.ts 6 | !syntax.grammar.d.ts 7 | -------------------------------------------------------------------------------- /packages/cm6-graphql/src/syntax.grammar.d.ts: -------------------------------------------------------------------------------- 1 | import { LRParser } from '@lezer/lr'; 2 | 3 | export declare const parser: LRParser; 4 | -------------------------------------------------------------------------------- /packages/graphiql-react/setup-files.ts: -------------------------------------------------------------------------------- 1 | // to make it works like Jest (auto-mocking) 2 | vi.mock('monaco-editor'); 3 | 4 | export {}; 5 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /packages/monaco-graphql/src/initializeMode.ts: -------------------------------------------------------------------------------- 1 | import './full'; 2 | 3 | export { initializeMode, LANGUAGE_ID } from './initialize'; 4 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/examples/graphiql-nextjs/src/app/favicon.ico -------------------------------------------------------------------------------- /packages/graphiql/cypress/plugins/index.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error -- fixme 2 | export default (on, config) => { 3 | return config; 4 | }; 5 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/query.graphql: -------------------------------------------------------------------------------- 1 | query simple { 2 | stuff(id: "1") { 3 | id 4 | name 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/src/app/globals.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | .graphiql-container { 6 | height: 100dvh !important; 7 | } 8 | -------------------------------------------------------------------------------- /examples/graphiql-vite-react-router/app/routes.ts: -------------------------------------------------------------------------------- 1 | import { flatRoutes } from '@react-router/fs-routes'; 2 | 3 | export default flatRoutes(); 4 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-explorer/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /packages/vscode-graphql/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/vscode-graphql/assets/images/logo.png -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: 0 2 | 3 | enableGlobalCache: false 4 | 5 | nodeLinker: node-modules 6 | 7 | yarnPath: .yarn/releases/yarn-4.9.1.cjs 8 | -------------------------------------------------------------------------------- /examples/monaco-graphql-nextjs/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/examples/monaco-graphql-nextjs/src/app/favicon.ico -------------------------------------------------------------------------------- /packages/codemirror-graphql/resources/example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/codemirror-graphql/resources/example.gif -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/directive.css: -------------------------------------------------------------------------------- 1 | .graphiql-doc-explorer-directive { 2 | color: hsl(var(--color-secondary)); 3 | } 4 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/__tests__/__utils__/runServer.js: -------------------------------------------------------------------------------- 1 | exports.default = require('../../../../graphiql/test/e2e-server.js'); 2 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/interface/__tests__/queries/definitionQuery.graphql: -------------------------------------------------------------------------------- 1 | type Query { 2 | hero(episode: Episode): Character 3 | } 4 | -------------------------------------------------------------------------------- /packages/vscode-graphql/assets/graphql-fonts.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/vscode-graphql/assets/graphql-fonts.woff -------------------------------------------------------------------------------- /examples/graphiql-vite-react-router/app/routes/_index/globals.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | .graphiql-container { 6 | height: 100dvh; 7 | } 8 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/__tests__/__queries__/test.graphql: -------------------------------------------------------------------------------- 1 | { 2 | hero(episode: NEWHOPE) { 3 | secretBackstory 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/__tests__/__queries__/test3.graphql: -------------------------------------------------------------------------------- 1 | { 2 | hero(episode: EMPIRE) { 3 | ...testFragment 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/monaco-graphql/src/lite.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * monaco-graphql/lite with no exports 3 | */ 4 | export { initializeMode, LANGUAGE_ID } from './initialize'; 5 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/vscode-graphql-syntax/assets/images/logo.png -------------------------------------------------------------------------------- /resources/README.md: -------------------------------------------------------------------------------- 1 | # Typescript Configs 2 | 3 | `.build.*` - used for project references `.base.*` - used for extends for 4 | downstream tsconfig files 5 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/default-value.css: -------------------------------------------------------------------------------- 1 | .graphiql-doc-explorer-default-value { 2 | color: hsl(var(--color-success)); 3 | } 4 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/schema-documentation.css: -------------------------------------------------------------------------------- 1 | .graphiql-doc-explorer-root-type { 2 | color: hsl(var(--color-info)); 3 | } 4 | -------------------------------------------------------------------------------- /packages/graphiql-toolkit/src/graphql-helpers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './auto-complete'; 2 | export * from './merge-ast'; 3 | export * from './operation-name'; 4 | -------------------------------------------------------------------------------- /packages/graphiql-toolkit/src/storage/index.ts: -------------------------------------------------------------------------------- 1 | export * from './base'; 2 | export * from './history'; 3 | export * from './query'; 4 | export * from './custom'; 5 | -------------------------------------------------------------------------------- /packages/vscode-graphql-execution/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/vscode-graphql-execution/assets/images/logo.png -------------------------------------------------------------------------------- /examples/monaco-graphql-nextjs/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from 'next'; 2 | 3 | const nextConfig: NextConfig = {}; 4 | 5 | export default nextConfig; 6 | -------------------------------------------------------------------------------- /packages/vscode-graphql-execution/assets/graphql-fonts.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/vscode-graphql-execution/assets/graphql-fonts.woff -------------------------------------------------------------------------------- /js-green-licenses.json: -------------------------------------------------------------------------------- 1 | { 2 | "packageAllowlist": [ 3 | // MIT, just lacking SPDX in manifest 4 | "valid-url", 5 | "argparse" 6 | ], 7 | "dev": false 8 | } 9 | -------------------------------------------------------------------------------- /packages/vscode-graphql-execution/.vscodeignore: -------------------------------------------------------------------------------- 1 | src/ 2 | tsconfig.json 3 | yarn-error.log 4 | **/*.tsbuildinfo 5 | **/*.d.ts 6 | node_modules 7 | !**/node_modules/ts-node 8 | -------------------------------------------------------------------------------- /resources/tsconfig.base.esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.cjs.json", 3 | "compilerOptions": { 4 | "module": "ESNext", 5 | "target": "es6" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/graphiql/cypress/env.d.ts: -------------------------------------------------------------------------------- 1 | import type * as monaco from 'monaco-editor'; 2 | 3 | declare global { 4 | interface Window { 5 | __MONACO: typeof monaco; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # removing this will break tests b/c of whitespace changes + format on save/commit, etc 2 | packages/graphql-language-service-server/src/__tests__/parseDocument.test.ts 3 | -------------------------------------------------------------------------------- /functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "netlify-function", 3 | "private": true, 4 | "dependencies": { 5 | "graphql": "^16.11.0", 6 | "graphql-http": "^1.22.4" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/monaco-graphql/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | test: { 5 | globals: true, 6 | }, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/graphql-language-service-cli/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | test: { 5 | globals: true, 6 | }, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/__tests__/__queries__/testFragment.graphql: -------------------------------------------------------------------------------- 1 | fragment testFragment on Character { 2 | name 3 | appearsIn 4 | friends { 5 | name 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/graphql-language-service/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | test: { 5 | globals: true, 6 | }, 7 | }); 8 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from 'next'; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /examples/monaco-graphql-nextjs/src/app/env.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace globalThis { 2 | import type { Environment } from 'monaco-editor/esm/monaco-editor'; 3 | var MonacoEnvironment: Environment; 4 | } 5 | -------------------------------------------------------------------------------- /examples/monaco-graphql-react-vite/src/env.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace globalThis { 2 | import type { Environment } from 'monaco-editor/esm/monaco-editor'; 3 | var MonacoEnvironment: Environment; 4 | } 5 | -------------------------------------------------------------------------------- /examples/graphiql-vite/src/index.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | import App from './App'; 3 | 4 | const root = createRoot(document.getElementById('graphiql')); 5 | root.render(); 6 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-history/README.md: -------------------------------------------------------------------------------- 1 | # `@graphiql/plugin-history` 2 | 3 | ## API 4 | 5 | - `useHistory`: Persists executed requests in storage 6 | - `useHistoryActions`: Actions related to the history 7 | -------------------------------------------------------------------------------- /packages/graphiql-toolkit/src/create-fetcher/index.ts: -------------------------------------------------------------------------------- 1 | export * from './types'; 2 | export { createGraphiQLFetcher } from './createFetcher'; 3 | 4 | // TODO: move the most useful utilities from graphiql to here 5 | -------------------------------------------------------------------------------- /packages/graphiql-toolkit/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | test: { 5 | globals: true, 6 | environment: 'jsdom', 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-history/setup-files.ts: -------------------------------------------------------------------------------- 1 | 'use no memo'; 2 | 3 | import '@testing-library/jest-dom'; 4 | 5 | // to make it works like Jest (auto-mocking) 6 | vi.mock('zustand'); 7 | vi.mock('monaco-editor'); 8 | -------------------------------------------------------------------------------- /packages/graphiql/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/__tests__/__utils__/utils.ts: -------------------------------------------------------------------------------- 1 | import { Range } from 'vscode-languageserver'; 2 | 3 | export const serializeRange = (range: Range) => 4 | JSON.parse(JSON.stringify(range)); 5 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/setup-files.ts: -------------------------------------------------------------------------------- 1 | 'use no memo'; 2 | 3 | import '@testing-library/jest-dom'; 4 | 5 | // to make it works like Jest (auto-mocking) 6 | vi.mock('zustand'); 7 | vi.mock('monaco-editor'); 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /examples/graphiql-vite-react-router/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { reactRouter } from '@react-router/dev/vite'; 2 | 3 | import { defineConfig } from 'vite'; 4 | 5 | export default defineConfig({ 6 | plugins: [reactRouter()], 7 | }); 8 | -------------------------------------------------------------------------------- /packages/graphiql/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../graphiql-react/tsconfig.json", 3 | // https://github.com/testing-library/jest-dom/issues/546#issuecomment-2558621842 4 | "exclude": ["cypress", "cypress.config.ts"] 5 | } 6 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/src/app/page.ts: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next'; 2 | 3 | export { GraphiQLPage as default } from './graphiql'; 4 | 5 | export const metadata: Metadata = { 6 | title: 'GraphiQL Next.js Example', 7 | }; 8 | -------------------------------------------------------------------------------- /examples/graphiql-vite-react-router/react-router.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from '@react-router/dev/config'; 2 | 3 | const config: Config = { 4 | ssr: true, 5 | buildDirectory: 'dist', 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/README.md: -------------------------------------------------------------------------------- 1 | # `@graphiql/plugin-doc-explorer` 2 | 3 | ## API 4 | 5 | - `useDocExplorer`: Handles the state for the doc explorer 6 | - `useDocExplorerActions`: Actions related to the doc explorer 7 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/stop.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/chevron-up.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /packages/graphiql/src/ui/index.ts: -------------------------------------------------------------------------------- 1 | export { GraphiQLFooter } from './footer'; 2 | export { GraphiQLLogo } from './logo'; 3 | export { ShortKeys } from './short-keys'; 4 | export { Sidebar } from './sidebar'; 5 | export { GraphiQLToolbar } from './toolbar'; 6 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test.scala: -------------------------------------------------------------------------------- 1 | val query = graphql""" 2 | { id } 3 | """ 4 | val query2 = gql""" 5 | { id } 6 | """ 7 | val query3 = schema""" 8 | { id } 9 | """ 10 | 11 | val query = """#graphql 12 | { id } 13 | """ 14 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

Hello {name}!

12 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. 6 | -------------------------------------------------------------------------------- /examples/monaco-graphql-nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. 6 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # GraphiQL Ecosystem Security Advisories 2 | 3 | Security Advisories for packages in this repository will be listed here 4 | 5 | ## GraphiQL 6 | 7 | ### 2021 8 | 9 | - [Introspection Schema XSS Attack](./docs/security/2021-introspection-schema-xss.md) 10 | -------------------------------------------------------------------------------- /examples/monaco-graphql-nextjs/src/app/globals.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | height: 100vh; 4 | } 5 | 6 | #root { 7 | display: flex; 8 | height: inherit; 9 | } 10 | 11 | .pane { 12 | width: 50%; 13 | } 14 | 15 | .left-editor { 16 | height: 50%; 17 | } 18 | -------------------------------------------------------------------------------- /packages/cm6-graphql/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './commands'; 2 | export * from './completions'; 3 | export * from './graphql'; 4 | export * from './helpers'; 5 | export * from './jump'; 6 | export * from './language'; 7 | export * from './lint'; 8 | export * from './state'; 9 | -------------------------------------------------------------------------------- /packages/graphiql-toolkit/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './async-helpers'; 2 | export * from './create-fetcher'; 3 | export * from './format'; 4 | export * from './graphql-helpers'; 5 | export * from './storage'; 6 | // TODO: move the most useful utilities from graphiql to here 7 | -------------------------------------------------------------------------------- /packages/graphiql/cypress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["es2021", "dom"], 5 | "types": ["cypress", "node"], 6 | "strictNullChecks": true, 7 | "strict": true 8 | }, 9 | "include": ["**/*.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/graphiql-vite/README.md: -------------------------------------------------------------------------------- 1 | # GraphiQL Vite Example 2 | 3 | This example demonstrates how to use GraphiQL with Vite. 4 | 5 | ## Setup 6 | 7 | 1. `yarn dev` to start Vite dev server. 8 | 1. `yarn build` to build production ready transpiled files. Find the output in `dist` folder. 9 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/close.svg: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | test: { 5 | globals: true, 6 | setupFiles: ['./tests/__utilities__/serializer.ts'], 7 | include: ['**/*.spec.ts'], 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /.mailmap: -------------------------------------------------------------------------------- 1 | Angel Gomez Salazar 2 | Angel Gomez Salazar Angel Gomez 3 | Angel Gomez Salazar angel.gomez 4 | Hyohyeon Jeong Hyo Jeong 5 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/__tests__/test-utils.ts: -------------------------------------------------------------------------------- 1 | 'use no memo'; 2 | import type { GraphQLNamedType, GraphQLType } from 'graphql'; 3 | 4 | export function unwrapType(type: GraphQLType): GraphQLNamedType { 5 | return 'ofType' in type ? unwrapType(type.ofType) : type; 6 | } 7 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-explorer/src/icons/checkbox-unchecked.svg: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .* 2 | *.swp 3 | *~ 4 | *.iml 5 | .*.haste_cache.* 6 | .DS_Store 7 | .idea 8 | npm-debug.log 9 | 10 | .babelrc 11 | CONTRIBUTING.md 12 | node_modules 13 | coverage 14 | resources 15 | src 16 | packages 17 | packages/graphiql/*.html 18 | cypress.json 19 | babel.config.js 20 | **/*.tsbuildinfo 21 | -------------------------------------------------------------------------------- /examples/graphiql-cdn/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-graphiql-cdn", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "description": "An example using GraphiQL", 7 | "scripts": { 8 | "build-demo": "copy index.html ../../packages/graphiql/cdn/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/chevron-left.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /packages/graphiql/src/ui/footer.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactNode } from 'react'; 2 | 3 | // Configure the UI by providing this Component as a child of GraphiQL. 4 | export const GraphiQLFooter: FC<{ children: ReactNode }> = ({ children }) => { 5 | return
{children}
; 6 | }; 7 | -------------------------------------------------------------------------------- /packages/graphiql/test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module", 3 | "name": "test-server", 4 | "private": true, 5 | "dependencies": { 6 | "express": "^4.20.0", 7 | "graphql": "^17.0.0-alpha.8", 8 | "graphql-helix": "^1.13.0", 9 | "graphql-ws": "^6.0.5", 10 | "ws": "8.17.1" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/graphql-language-service/tsconfig.esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.esm.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./esm", 6 | "composite": true 7 | }, 8 | "include": ["src"], 9 | "exclude": ["**/__tests__/**", "**/*.spec.*"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/field-link.css: -------------------------------------------------------------------------------- 1 | a.graphiql-doc-explorer-field-name { 2 | color: hsl(var(--color-info)); 3 | text-decoration: none; 4 | 5 | &:hover { 6 | text-decoration: underline; 7 | } 8 | 9 | &:focus { 10 | outline: hsl(var(--color-info)) auto 1px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test.re: -------------------------------------------------------------------------------- 1 | module VideoGames = [%graphql 2 | {| 3 | query VideoGames { 4 | videoGames { 5 | id 6 | title 7 | developer 8 | completed 9 | } 10 | } 11 | |} 12 | ]; 13 | 14 | module VideoGamesQuery = ReasonApollo.CreateQuery(VideoGames); 15 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/type-link.css: -------------------------------------------------------------------------------- 1 | a.graphiql-doc-explorer-type-name { 2 | color: hsl(var(--color-warning)); 3 | text-decoration: none; 4 | 5 | &:hover { 6 | text-decoration: underline; 7 | } 8 | 9 | &:focus { 10 | outline: hsl(var(--color-warning)) auto 1px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/graphiql/cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress'; 2 | 3 | const PORT = process.env.CI === 'true' ? 8080 : 5173; 4 | 5 | export default defineConfig({ 6 | e2e: { 7 | baseUrl: `http://localhost:${PORT}`, 8 | }, 9 | video: true, 10 | viewportWidth: 1920, 11 | viewportHeight: 1080, 12 | }); 13 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/utility/cleanup-disposables.ts: -------------------------------------------------------------------------------- 1 | import type * as monaco from 'monaco-editor'; 2 | 3 | export function cleanupDisposables(disposables: monaco.IDisposable[]) { 4 | return () => { 5 | for (const disposable of disposables) { 6 | disposable.dispose(); // remove the listener 7 | } 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /packages/graphql-language-service/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.cjs.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./src", 6 | "outDir": "./dist", 7 | "baseUrl": "." 8 | }, 9 | "include": ["src"], 10 | "exclude": ["**/__tests__/**", "**/*.spec.*"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/type-documentation.css: -------------------------------------------------------------------------------- 1 | .graphiql-doc-explorer-item > :not(:first-child) { 2 | margin-top: var(--px-12); 3 | } 4 | 5 | .graphiql-doc-explorer-argument-multiple { 6 | margin-left: var(--px-8); 7 | } 8 | 9 | .graphiql-doc-explorer-enum-value { 10 | color: hsl(var(--color-info)); 11 | } 12 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./resources/tsconfig.base.cjs.json", 3 | "compilerOptions": { 4 | "composite": true 5 | }, 6 | "files": [], 7 | "references": [ 8 | { 9 | "path": "resources/tsconfig.build.esm.json" 10 | }, 11 | { 12 | "path": "resources/tsconfig.build.cjs.json" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/cm6-graphql/tsconfig.esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.esm.json", 3 | "compilerOptions": { 4 | "strict": true, 5 | "newLine": "lf", 6 | "outDir": "dist" 7 | }, 8 | "include": ["src/*.ts"], 9 | "references": [ 10 | { 11 | "path": "../graphql-language-service" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/cm6-graphql-parcel/README.md: -------------------------------------------------------------------------------- 1 | ## Codemirror 6 Parcel Example 2 | 3 | This example demonstrates how to transpile your own custom ES6 Codemirror 6 4 | GraphQL implementation with parcel bundler. 5 | 6 | ### Setup 7 | 8 | 1. `yarn` and `yarn start` from this folder to start parcel dev mode. 9 | 1. `yarn build` to find production ready files. 10 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/plus.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /examples/cm6-graphql-legacy-parcel/README.md: -------------------------------------------------------------------------------- 1 | ## Codemirror 6 Parcel Example 2 | 3 | This example demonstrates how to transpile your own custom ES6 Codemirror 6 4 | GraphQL implementation with parcel bundler. 5 | 6 | ### Setup 7 | 8 | 1. `yarn` and `yarn start` from this folder to start parcel dev mode. 9 | 1. `yarn build` to find production ready files. 10 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/setup-files.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error 2 | document.createRange = function () { 3 | return { 4 | setEnd() {}, 5 | setStart() {}, 6 | getClientRects() { 7 | return { top: 0, bottom: 0, left: 0, right: 0 }; 8 | }, 9 | getBoundingClientRect() { 10 | return { right: 0 }; 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/toolbar-button/index.css: -------------------------------------------------------------------------------- 1 | button.graphiql-toolbar-button { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | height: var(--toolbar-width); 6 | width: var(--toolbar-width); 7 | 8 | &.error { 9 | background: hsla(var(--color-error), var(--alpha-background-heavy)); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /resources/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | sourceMaps: true, 3 | presets: [ 4 | [require.resolve('@babel/preset-env')], 5 | require.resolve('@babel/preset-react'), 6 | ], 7 | plugins: [ 8 | require.resolve('@babel/plugin-proposal-class-properties'), 9 | require.resolve('@babel/plugin-transform-class-static-block'), 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-history/src/deprecated.ts: -------------------------------------------------------------------------------- 1 | import { useHistory, useHistoryActions } from './context'; 2 | 3 | /** 4 | * @deprecated Use `useHistoryActions` and `useHistory` hooks instead. 5 | */ 6 | export function useHistoryContext() { 7 | const actions = useHistoryActions(); 8 | const items = useHistory(); 9 | return { ...actions, items }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/utility/markdown.ts: -------------------------------------------------------------------------------- 1 | 'use no memo'; 2 | 3 | import MarkdownIt from 'markdown-it'; 4 | 5 | export const markdown = new MarkdownIt({ 6 | // we don't want to convert \n to
because in Markdown a single newline is not a line break 7 | // https://github.com/graphql/graphiql/issues/3155 8 | breaks: false, 9 | linkify: true, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc-comp.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/utility/whitespace.spec.ts: -------------------------------------------------------------------------------- 1 | import { invalidCharacters, normalizeWhitespace } from './whitespace'; 2 | 3 | describe('normalizeWhitespace', () => { 4 | it('removes unicode characters', () => { 5 | const result = normalizeWhitespace(invalidCharacters.join('')); 6 | expect(result).toEqual(' '.repeat(invalidCharacters.length)); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /examples/graphiql-parcel/README.md: -------------------------------------------------------------------------------- 1 | # GraphiQL Parcel Example 2 | 3 | > [!WARNING] 4 | > 5 | > This example has been removed. You can find its last version [here](https://github.com/graphql/graphiql/tree/3b93d27f7568d93db5cd146157220b127eeea737/examples/graphiql-parcel). 6 | > We recommend using the [GraphiQL Vite](../graphiql-vite) or [GraphiQL Next.js](../graphiql-nextjs) examples instead. 7 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | # Settings in the [build] context are global and are applied to 2 | # all contexts unless otherwise overridden by more specific contexts. 3 | [build] 4 | publish = "packages/graphiql" 5 | 6 | # Default build command. 7 | command = "yarn build && yarn build-bundles && yarn build-docs && yarn build-demo" 8 | environment = { YARN_FLAGS = "--frozen-lockfile --immutable"} 9 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .changeset/*.md 2 | 3 | # ignore working-group dir markdown so it's easier for people to edit from the UI 4 | working-group/ 5 | packages/codemirror-graphql/src/__tests__/schema-kitchen-sink.graphql 6 | CHANGELOG.md 7 | **/CHANGELOG.md 8 | packages/vscode-graphql-syntax/tests/__fixtures__/ 9 | packages/graphql-language-service-server/src/__tests__/parseDocument.test.ts 10 | -------------------------------------------------------------------------------- /packages/graphiql/test/README.md: -------------------------------------------------------------------------------- 1 | # Test GraphiQL Application 2 | 3 | This test folder serves as a basis for testing in-development changes and offers 4 | watching/compiling of the `src` folder. To utilize this, simply: 5 | 6 | 1. Run `npm install` 7 | 2. Run `npm run dev` 8 | 3. Open your browser to the address listed in your console. e.g. 9 | `Started on http://localhost:49811/` 10 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-explorer/src/icons/checkbox-checked.svg: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/utility/pick.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * `pick`-like utility that extracts specific keys from an object. 3 | */ 4 | export function pick(...keys: K[]) { 5 | return (obj: T): Pick => { 6 | const result = Object.create(null); 7 | for (const key of keys) { 8 | result[key] = obj[key]; 9 | } 10 | return result; 11 | }; 12 | } 13 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components'; 2 | 3 | export { 4 | DocExplorerStore, 5 | useDocExplorer, 6 | useDocExplorerActions, 7 | DOC_EXPLORER_PLUGIN, 8 | } from './context'; 9 | 10 | export type { 11 | DocExplorerFieldDef, 12 | DocExplorerNavStack, 13 | DocExplorerNavStackItem, 14 | } from './context'; 15 | export * from './deprecated'; 16 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/tooltip/index.css: -------------------------------------------------------------------------------- 1 | .graphiql-tooltip { 2 | background: hsl(var(--color-base)); 3 | border: var(--popover-border); 4 | border-radius: var(--border-radius-4); 5 | box-shadow: var(--popover-box-shadow); 6 | color: hsl(var(--color-neutral)); 7 | font-size: inherit; 8 | padding: var(--px-4) var(--px-6); 9 | font-family: var(--font-family); 10 | } 11 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text=auto 3 | 4 | *.js text eol=lf 5 | *.jsx text eol=lf 6 | *.ts text eol=lf 7 | *.tsx text eol=lf 8 | *.json text eol=lf 9 | *.md text eol=lf 10 | *.html text eol=lf 11 | *.css text eol=lf 12 | *.sh text eol=lf 13 | *.yml text eol=lf 14 | 15 | .yarn/releases/*.cjs export-ignore binary linguist-generated 16 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/php-grammar.spec.ts: -------------------------------------------------------------------------------- 1 | import { tokenizeFile } from './__utilities__/utilities'; 2 | 3 | describe('inline.graphql.php grammar', () => { 4 | const scope = 'inline.graphql.php'; 5 | 6 | it('should tokenize a simple php file', async () => { 7 | const result = await tokenizeFile('__fixtures__/test.php', scope); 8 | expect(result).toMatchSnapshot(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /examples/graphiql-create-react-app/README.md: -------------------------------------------------------------------------------- 1 | # GraphiQL `create-react-app` Example 2 | 3 | > [!WARNING] 4 | > 5 | > This example has been removed. You can find its last version [here](https://github.com/graphql/graphiql/tree/3b93d27f7568d93db5cd146157220b127eeea737/examples/graphiql-create-react-app). 6 | > We recommend using the [GraphiQL Vite](../graphiql-vite) or [GraphiQL Next.js](../graphiql-nextjs) examples instead. 7 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/field.svg: -------------------------------------------------------------------------------- 1 | 7 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/graphiql/setup-files.ts: -------------------------------------------------------------------------------- 1 | 'use no memo'; 2 | 3 | import '@testing-library/jest-dom'; 4 | import { configure } from '@testing-library/react'; 5 | 6 | // to make it works like Jest (auto-mocking) 7 | vi.mock('zustand'); 8 | vi.mock('monaco-editor'); 9 | 10 | // Since we load `monaco-editor` dynamically, we need to allow more time for tests that assert editor values 11 | configure({ asyncUtilTimeout: 9_000 }); 12 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/python-grammar.spec.ts: -------------------------------------------------------------------------------- 1 | import { tokenizeFile } from './__utilities__/utilities'; 2 | 3 | describe('inline.graphql.python grammar', () => { 4 | const scope = 'inline.graphql.python'; 5 | 6 | it('should tokenize a simple python file', async () => { 7 | const result = await tokenizeFile('__fixtures__/test.py', scope); 8 | expect(result).toMatchSnapshot(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/reason-grammar.spec.ts: -------------------------------------------------------------------------------- 1 | import { tokenizeFile } from './__utilities__/utilities'; 2 | 3 | describe('inline.graphql.reason grammar', () => { 4 | const scope = 'inline.graphql.re'; 5 | 6 | it('should tokenize a simple reasonML file', async () => { 7 | const result = await tokenizeFile('__fixtures__/test.re', scope); 8 | expect(result).toMatchSnapshot(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/scala-grammar.spec.ts: -------------------------------------------------------------------------------- 1 | import { tokenizeFile } from './__utilities__/utilities'; 2 | 3 | describe('inline.graphql.scala grammar', () => { 4 | const scope = 'inline.graphql.scala'; 5 | 6 | it('should tokenize a simple scala file', async () => { 7 | const result = await tokenizeFile('__fixtures__/test.scala', scope); 8 | expect(result).toMatchSnapshot(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-explorer/src/icons/arrow.svg: -------------------------------------------------------------------------------- 1 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/type.svg: -------------------------------------------------------------------------------- 1 | 7 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/magnifying-glass.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | 17 | -------------------------------------------------------------------------------- /packages/monaco-graphql/src/typings/monaco-editor.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-restricted-imports -- 2 | * in this file is allowed to import monaco-editor 3 | */ 4 | declare module 'monaco-editor/esm/vs/editor/edcore.main.js' { 5 | export * from 'monaco-editor'; 6 | } 7 | 8 | declare module 'monaco-editor/esm/vs/editor/common/standalone/standaloneEnums.js' { 9 | export { MarkerSeverity } from 'monaco-editor'; 10 | } 11 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "arrowParens": "avoid", 5 | "proseWrap": "never", 6 | "overrides": [ 7 | { 8 | "files": ["*.md", "*.mdx"], 9 | "options": { 10 | "printWidth": 80, 11 | "proseWrap": "preserve" 12 | } 13 | }, 14 | { 15 | "files": "*.svg", 16 | "options": { 17 | "parser": "html" 18 | } 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/deprecated.ts: -------------------------------------------------------------------------------- 1 | import { useDocExplorer, useDocExplorerActions } from './context'; 2 | 3 | /** 4 | * @deprecated Use `useDocExplorerActions` and `useDocExplorer` hooks instead. 5 | */ 6 | export function useExplorerContext() { 7 | const actions = useDocExplorerActions(); 8 | const explorerNavStack = useDocExplorer(); 9 | return { 10 | ...actions, 11 | explorerNavStack, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/implements.svg: -------------------------------------------------------------------------------- 1 | 7 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/tsconfig.esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.esm.json", 3 | "compilerOptions": { 4 | "target": "ES2018", 5 | "composite": true, 6 | "rootDir": "./src", 7 | "outDir": "./esm" 8 | }, 9 | "references": [ 10 | { 11 | "path": "../graphql-language-service" 12 | } 13 | ], 14 | "include": ["src"], 15 | "exclude": ["**/__tests__/**", "**/*.spec.*"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.cjs.json", 3 | "compilerOptions": { 4 | "target": "ES2018", 5 | "composite": true, 6 | "rootDir": "./src", 7 | "outDir": "./dist" 8 | }, 9 | "references": [ 10 | { 11 | "path": "../graphql-language-service" 12 | } 13 | ], 14 | "include": ["src"], 15 | "exclude": ["**/__tests__/**", "**/*.spec.*"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/utils/__tests__/__schema__/RecursiveSchema.graphql: -------------------------------------------------------------------------------- 1 | schema { 2 | query: query_root 3 | } 4 | 5 | input string_options { 6 | _eq: String 7 | _ilike: String 8 | } 9 | 10 | type issues { 11 | name: String 12 | } 13 | 14 | input issues_where_input { 15 | _and: [issues_where_input!] 16 | name: string_options 17 | } 18 | 19 | type query_root { 20 | issues(where: issues_where_input): [issues!]! 21 | } 22 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/src/cm6-legacy/mode.ts: -------------------------------------------------------------------------------- 1 | import type { StreamParser } from '@codemirror/language'; 2 | import graphqlModeFactory from '../utils/mode-factory'; 3 | 4 | // Types of property 'token' are incompatible. 5 | // Type '((stream: StringStream, state: any) => string | null) | undefined' is not comparable to type '(stream: StringStream, state: any) => string | null'. 6 | export const graphql = graphqlModeFactory({}) as unknown as StreamParser; 7 | -------------------------------------------------------------------------------- /packages/graphql-language-service-cli/bin/graphql.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* 3 | * Copyright (c) 2021 GraphQL Contributors 4 | * All rights reserved. 5 | * 6 | * This source code is licensed under the license found in the LICENSE file in 7 | * the root directory of this source tree. 8 | */ 9 | 10 | if (process?.env) { 11 | process.env.GRAPHQL_NO_NAME_WARNING = true; 12 | } 13 | 14 | require('@babel/polyfill'); 15 | require('../dist/cli'); 16 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/play.svg: -------------------------------------------------------------------------------- 1 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/style/auto-insertion.css: -------------------------------------------------------------------------------- 1 | .auto-inserted-leaf { 2 | animation-duration: 6s; 3 | animation-name: insertionFade; 4 | border-radius: var(--border-radius-4); 5 | padding: var(--px-2); 6 | } 7 | 8 | @keyframes insertionFade { 9 | from, 10 | to { 11 | background-color: transparent; 12 | } 13 | 14 | 15%, 15 | 85% { 16 | background-color: hsla(var(--color-warning), var(--alpha-background-light)); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/graphiql-toolkit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "module": "ESNext", 5 | "declaration": true, 6 | "noEmit": true, 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "skipLibCheck": true, 10 | "allowJs": true, 11 | "lib": ["es2022", "dom"], 12 | "moduleResolution": "node", 13 | "types": ["vitest/globals"] 14 | }, 15 | "include": ["src", "tsup.config.ts"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-history/src/index.ts: -------------------------------------------------------------------------------- 1 | import { GraphiQLPlugin, HistoryIcon } from '@graphiql/react'; 2 | import './style.css'; 3 | 4 | import { History } from './components'; 5 | 6 | export const HISTORY_PLUGIN: GraphiQLPlugin = { 7 | title: 'History', 8 | icon: HistoryIcon, 9 | content: History, 10 | }; 11 | 12 | export { History }; 13 | 14 | export { HistoryStore, useHistory, useHistoryActions } from './context'; 15 | export * from './deprecated'; 16 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/spinner/index.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentPropsWithoutRef, forwardRef } from 'react'; 2 | import { cn } from '../../utility'; 3 | import './index.css'; 4 | 5 | export const Spinner = forwardRef< 6 | HTMLDivElement, 7 | ComponentPropsWithoutRef<'div'> 8 | >((props, ref) => ( 9 |
14 | )); 15 | Spinner.displayName = 'Spinner'; 16 | -------------------------------------------------------------------------------- /examples/monaco-graphql-nextjs/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactNode } from 'react'; 2 | import type { Metadata } from 'next'; 3 | import './globals.css'; 4 | 5 | export const metadata: Metadata = { 6 | title: 'Monaco Next.js Example', 7 | }; 8 | 9 | const RootLayout: FC> = ({ children }) => { 10 | return ( 11 | 12 | {children} 13 | 14 | ); 15 | }; 16 | 17 | export default RootLayout; 18 | -------------------------------------------------------------------------------- /examples/monaco-graphql-webpack/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | require.resolve('@babel/preset-env'), 4 | require.resolve('@babel/preset-typescript'), 5 | require.resolve('@babel/preset-react'), 6 | ], 7 | plugins: [ 8 | require.resolve('@babel/plugin-proposal-class-properties'), 9 | require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), 10 | require.resolve('@babel/plugin-transform-class-static-block'), 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/src/index.d.ts: -------------------------------------------------------------------------------- 1 | import 'codemirror/addon/hint/show-hint'; 2 | 3 | declare module 'codemirror' { 4 | let Init: any; 5 | 6 | interface Editor { 7 | doc: CodeMirror.Doc; 8 | getHelper(pos: { line: number; ch: number }, type: string): any; 9 | getHelpers(pos: { line: number; ch: number }, type: string): any[]; 10 | } 11 | 12 | interface ShowHintOptions { 13 | hint?: ShowHintOptions['hint']; 14 | } 15 | 16 | const hint: object; 17 | } 18 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/deprecated-field.svg: -------------------------------------------------------------------------------- 1 | 7 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /resources/patch-monaco-editor-type.mjs: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs'; 2 | import path from 'node:path'; 3 | 4 | const filePath = path.resolve( 5 | './packages/monaco-graphql/esm/monaco-editor.d.ts', 6 | ); 7 | 8 | const newContent = fs 9 | .readFileSync(filePath, 'utf8') 10 | .replace('/esm/vs/editor/edcore.main.js', ''); 11 | 12 | fs.writeFileSync(filePath, newContent); 13 | 14 | console.log( 15 | `[patch-monaco-editor-type] Updated "${path.relative(process.cwd(), filePath)}"`, 16 | ); 17 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.css: -------------------------------------------------------------------------------- 1 | .graphiql-doc-explorer-deprecation { 2 | background-color: hsla(var(--color-warning), var(--alpha-background-light)); 3 | border: 1px solid hsl(var(--color-warning)); 4 | border-radius: var(--px-4); 5 | color: hsl(var(--color-warning)); 6 | padding: var(--px-8); 7 | } 8 | 9 | .graphiql-doc-explorer-deprecation-label { 10 | font-size: var(--font-size-hint); 11 | font-weight: var(--font-weight-medium); 12 | } 13 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/button-group/index.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentPropsWithoutRef, forwardRef } from 'react'; 2 | import { cn } from '../../utility'; 3 | import './index.css'; 4 | 5 | export const ButtonGroup = forwardRef< 6 | HTMLDivElement, 7 | ComponentPropsWithoutRef<'div'> 8 | >((props, ref) => ( 9 |
14 | )); 15 | ButtonGroup.displayName = 'ButtonGroup'; 16 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/root-type.svg: -------------------------------------------------------------------------------- 1 | 7 | 16 | 21 | 22 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "npm.packageManager": "yarn", 3 | "editor.formatOnSave": true, 4 | "files.insertFinalNewline": true, 5 | "editor.trimAutoWhitespace": false, 6 | "coverage-gutters.showLineCoverage": true, 7 | "coverage-gutters.coverageBaseDir": "coverage", 8 | "coverage-gutters.coverageFileNames": [ 9 | "lcov.info", 10 | "cov.xml", 11 | "coverage.xml", 12 | "jacoco.xml", 13 | "coverage.cobertura.xml" 14 | ], 15 | "typescript.tsdk": "node_modules/typescript/lib" 16 | } 17 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/parsers/types.ts: -------------------------------------------------------------------------------- 1 | import type { Range } from 'graphql-language-service'; 2 | import type { NoopLogger, Logger } from '../Logger'; 3 | 4 | export type RangeMapper = (range: Range) => Range; 5 | 6 | export type SourceParserResult = null | { 7 | asts: any[]; 8 | rangeMapper?: RangeMapper; 9 | }; 10 | 11 | export type SourceParser = ( 12 | text: string, 13 | uri: string, 14 | logger: Logger | NoopLogger, 15 | ) => Promise | SourceParserResult; 16 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/utility/monaco-ssr.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Re‑export Monaco Editor exports. 3 | * Importing directly from 'monaco-editor' causes a “window is not defined” error during SSR. 4 | */ 5 | export { KeyCode } from 'monaco-editor/esm/vs/editor/common/standalone/standaloneEnums.js'; 6 | export { KeyMod } from 'monaco-editor/esm/vs/editor/common/services/editorBaseApi.js'; 7 | export { URI as Uri } from 'monaco-editor/esm/vs/base/common/uri.js'; 8 | export { Range } from 'monaco-editor/esm/vs/editor/common/core/range.js'; 9 | -------------------------------------------------------------------------------- /packages/cm6-graphql/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.cjs.json", 3 | "compilerOptions": { 4 | "strict": true, 5 | "target": "es6", 6 | "module": "es2020", 7 | "newLine": "lf", 8 | "declaration": true, 9 | "moduleResolution": "node", 10 | "outDir": "dist" 11 | }, 12 | "include": ["src", "__tests__"], 13 | "exclude": ["**/__tests__/**", "**/dist/**.*"], 14 | "references": [ 15 | { 16 | "path": "../graphql-language-service" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/graphql-language-service-cli/tsconfig.esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.esm.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./esm", 6 | "composite": true, 7 | "target": "ES2018" 8 | }, 9 | "references": [ 10 | { 11 | "path": "../graphql-language-service" 12 | }, 13 | { 14 | "path": "../graphql-language-service-server" 15 | } 16 | ], 17 | "include": ["src"], 18 | "exclude": ["**/__tests__/**", "**/*.spec.*"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/src/mode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | import CodeMirror from 'codemirror'; 11 | import modeFactory from './utils/mode-factory'; 12 | 13 | CodeMirror.defineMode('graphql', modeFactory); 14 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | import { createRequire } from 'node:module'; 3 | 4 | const require = createRequire(import.meta.url); 5 | 6 | export default defineConfig({ 7 | test: { 8 | globals: true, 9 | environment: 'jsdom', 10 | setupFiles: ['./setup-files.ts'], 11 | alias: { 12 | // fixes Duplicate "graphql" modules cannot be used at the same time since different 13 | graphql: require.resolve('graphql'), 14 | }, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/directive.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from 'react'; 2 | import type { DirectiveNode } from 'graphql'; 3 | import './directive.css'; 4 | 5 | type DirectiveProps = { 6 | /** 7 | * The directive that should be rendered. 8 | */ 9 | directive: DirectiveNode; 10 | }; 11 | 12 | export const Directive: FC = ({ directive }) => { 13 | return ( 14 | 15 | @{directive.name.value} 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/utility/whitespace.ts: -------------------------------------------------------------------------------- 1 | 'use no memo'; 2 | 3 | // Unicode whitespace characters that break the interface. 4 | export const invalidCharacters = Array.from({ length: 11 }, (_, i) => { 5 | // \u2000 -> \u200a 6 | return String.fromCharCode(0x2000 + i); 7 | }).concat(['\u2028', '\u2029', '\u202f', '\u00a0']); 8 | 9 | const sanitizeRegex = new RegExp('[' + invalidCharacters.join('') + ']', 'g'); 10 | 11 | export function normalizeWhitespace(line: string) { 12 | return line.replace(sanitizeRegex, ' '); 13 | } 14 | -------------------------------------------------------------------------------- /packages/vscode-graphql/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.esm.json", 3 | "compilerOptions": { 4 | "target": "ES2018", 5 | "module": "CommonJS", 6 | "composite": true, 7 | "rootDir": "./src", 8 | "outDir": "./dist" 9 | }, 10 | "references": [ 11 | { 12 | "path": "../graphql-language-service" 13 | }, 14 | { 15 | "path": "../graphql-language-service-server" 16 | } 17 | ], 18 | "include": ["src"], 19 | "exclude": ["**/__tests__/**", "**/*.spec.*"] 20 | } 21 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /packages/vscode-graphql-execution/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.esm.json", 3 | "compilerOptions": { 4 | "target": "ES2018", 5 | "module": "CommonJS", 6 | "composite": true, 7 | "rootDir": "./src", 8 | "outDir": "./dist" 9 | }, 10 | "references": [ 11 | { 12 | "path": "../graphql-language-service" 13 | }, 14 | { 15 | "path": "../graphql-language-service-server" 16 | } 17 | ], 18 | "include": ["src"], 19 | "exclude": ["**/__tests__/**", "**/*.spec.*"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/graphiql-vite-react-router/app/routes/_index/create-fetcher.ts: -------------------------------------------------------------------------------- 1 | import type { GraphiQLProps } from 'graphiql'; 2 | 3 | export function createFetcher(apiUrl: string): GraphiQLProps['fetcher'] { 4 | return async function (graphQLParams, opts) { 5 | const response = await fetch(apiUrl, { 6 | method: 'POST', 7 | headers: { 8 | ...opts?.headers, 9 | 'Content-Type': 'application/json', 10 | }, 11 | body: JSON.stringify(graphQLParams), 12 | }); 13 | 14 | return response.json(); 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /examples/graphiql-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-graphiql-vite", 3 | "version": "0.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "graphiql": "^5.2.2", 7 | "graphql": "^16.11.0", 8 | "react": "^19.1.0", 9 | "react-dom": "^19.1.0" 10 | }, 11 | "devDependencies": { 12 | "@vitejs/plugin-react": "^4.4.1", 13 | "vite": "^6.3.4", 14 | "vite-plugin-monaco-editor": "^1.1.0" 15 | }, 16 | "scripts": { 17 | "dev": "vite", 18 | "build": "vite build", 19 | "start": "vite preview" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/graphiql-webpack/index.html.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 12 | 13 | GraphiQL Webpack Example! 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/graphiql/src/style.css: -------------------------------------------------------------------------------- 1 | /* Monaco import is only needed for CDN bundle */ 2 | @import 'monaco-editor/min/vs/editor/editor.main.css'; 3 | 4 | @import '@graphiql/react/font/roboto.css'; 5 | @import '@graphiql/react/font/fira-code.css'; 6 | @import '@graphiql/react/style.css'; 7 | @import '@graphiql/plugin-history/style.css'; 8 | @import '@graphiql/plugin-doc-explorer/style.css'; 9 | 10 | /** 11 | * Separate CSS without importing fonts/etc 12 | * 13 | * @see https://github.com/graphql/graphiql/issues/4058 14 | */ 15 | @import './graphiql.css'; 16 | -------------------------------------------------------------------------------- /packages/graphql-language-service-cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.cjs.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./src", 6 | "outDir": "./dist", 7 | "target": "ES2018", 8 | "types": ["vitest/globals"] 9 | }, 10 | "references": [ 11 | { 12 | "path": "../graphql-language-service" 13 | }, 14 | { 15 | "path": "../graphql-language-service-server" 16 | } 17 | ], 18 | "include": ["src"], 19 | "exclude": ["**/__tests__/**", "**/*.spec.*"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the license found in the 6 | * LICENSE file in the root directory of this source tree. 7 | * 8 | */ 9 | 10 | export { MessageProcessor } from './MessageProcessor'; 11 | 12 | export { default as startServer } from './startServer'; 13 | 14 | export * from './GraphQLCache'; 15 | export * from './parseDocument'; 16 | export * from './findGraphQLTags'; 17 | export * from './types'; 18 | -------------------------------------------------------------------------------- /examples/graphiql-vite/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { GraphiQL } from 'graphiql'; 2 | import 'graphiql/style.css'; 3 | 4 | async function fetcher(graphQLParams) { 5 | const response = await fetch('https://graphql.earthdata.nasa.gov/api', { 6 | method: 'POST', 7 | headers: { 8 | Accept: 'application/json', 9 | 'Content-Type': 'application/json', 10 | }, 11 | body: JSON.stringify(graphQLParams), 12 | }); 13 | return response.json(); 14 | } 15 | 16 | function App() { 17 | return ; 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/index.ts: -------------------------------------------------------------------------------- 1 | import './style/root.css'; 2 | 3 | export { useMonaco } from './stores'; 4 | export * from './utility'; 5 | export type { TabsState } from './utility/tabs'; 6 | export * from './icons'; 7 | export * from './components'; 8 | 9 | export type { 10 | EditorProps, 11 | SchemaReference, 12 | SlicesWithActions, 13 | MonacoEditor, 14 | Theme, 15 | } from './types'; 16 | export type { GraphiQLPlugin } from './stores/plugin'; 17 | export { KEY_MAP, formatShortcutForOS, isMacOs } from './constants'; 18 | export * from './deprecated'; 19 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/section.css: -------------------------------------------------------------------------------- 1 | .graphiql-doc-explorer-section-title { 2 | align-items: center; 3 | display: flex; 4 | font-size: var(--font-size-hint); 5 | font-weight: var(--font-weight-medium); 6 | line-height: 1; 7 | 8 | & > svg { 9 | height: var(--px-16); 10 | margin-right: var(--px-8); 11 | width: var(--px-16); 12 | } 13 | } 14 | 15 | .graphiql-doc-explorer-section-content { 16 | margin-left: var(--px-8); 17 | margin-top: var(--px-16); 18 | 19 | & > * + * { 20 | margin-top: var(--px-16); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/graphiql/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use no memo'; 2 | 3 | /** 4 | * Copyright (c) 2025 GraphQL Contributors. 5 | * 6 | * This source code is licensed under the MIT license found in the 7 | * LICENSE file in the root directory of this source tree. 8 | */ 9 | import './graphiql.css'; 10 | import './style.css'; 11 | 12 | export { 13 | GraphiQL, 14 | // https://github.com/graphql/graphiql/issues/4057 15 | GraphiQLInterface, 16 | type GraphiQLProps, 17 | type GraphiQLInterfaceProps, 18 | } from './GraphiQL'; 19 | 20 | export { HISTORY_PLUGIN } from '@graphiql/plugin-history'; 21 | -------------------------------------------------------------------------------- /examples/monaco-graphql-react-vite/README.md: -------------------------------------------------------------------------------- 1 | # Monaco-GraphQL React Vite Example 2 | 3 | ## Getting Started 4 | 5 | This is an extremely naive & minimalist implementation of `monaco-graphql` with 6 | `react` using `vite` as a bundler. 7 | 8 | This workspace could be used to help us prototype components & hooks for 9 | `@graphiql/react` 10 | 11 | [Here is a StackBlitz demo of this example](https://stackblitz.com/edit/monaco-graphql-react-vite?file=src/App.tsx) 12 | 13 | ## Setup 14 | 15 | 1. In monorepo root directory run `yarn` and `yarn build`. 16 | 1. In this directory run `yarn dev`. 17 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactNode } from 'react'; 2 | import type { Metadata } from 'next'; 3 | import './globals.css'; 4 | 5 | export const metadata: Metadata = { 6 | description: 'Example of using GraphiQL with the Next.js App Router', 7 | // Empty object adds open graph and twitter meta-tags 8 | openGraph: {}, 9 | }; 10 | 11 | const RootLayout: FC> = ({ children }) => { 12 | return ( 13 | 14 | {children} 15 | 16 | ); 17 | }; 18 | 19 | export default RootLayout; 20 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/argument.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/language/language-configuration.json: -------------------------------------------------------------------------------- 1 | { 2 | "comments": { 3 | "lineComment": "#", 4 | "blockComment": ["\"\"\"", "\"\"\""] 5 | }, 6 | "brackets": [ 7 | ["{", "}"], 8 | ["[", "]"], 9 | ["(", ")"] 10 | ], 11 | "autoClosingPairs": [ 12 | ["{", "}"], 13 | ["[", "]"], 14 | ["(", ")"], 15 | { "open": "\"", "close": "\"", "notIn": ["string", "comment"] }, 16 | ["'", "'"] 17 | ], 18 | "surroundingPairs": [ 19 | ["{", "}"], 20 | ["[", "]"], 21 | ["(", ")"], 22 | ["\"", "\""], 23 | ["'", "'"] 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /.codecov.yml: -------------------------------------------------------------------------------- 1 | codecov: 2 | notify: 3 | require_ci_to_pass: yes 4 | 5 | coverage: 6 | precision: 2 7 | round: down 8 | range: '30...100' 9 | 10 | status: 11 | project: 12 | default: 13 | target: 50% # the minimum required coverage value 14 | threshold: .1% # the leniency in hitting the target, allows 1% drop 15 | patch: 16 | default: 17 | informational: true 18 | 19 | comment: # this is a top-level key 20 | layout: 'reach, diff, flags, files' 21 | behavior: default 22 | require_changes: true # if true: only post the comment if coverage changes 23 | -------------------------------------------------------------------------------- /examples/cm6-graphql-parcel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "sourceMap": true, 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/graphiql/src/ui/logo.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactNode } from 'react'; 2 | 3 | const defaultGraphiqlLogo = ( 4 | 10 | Graph 11 | i 12 | QL 13 | 14 | ); 15 | 16 | // Configure the UI by providing this Component as a child of GraphiQL. 17 | export const GraphiQLLogo: FC<{ children?: ReactNode }> = ({ 18 | children = defaultGraphiqlLogo, 19 | }) => { 20 | return
{children}
; 21 | }; 22 | -------------------------------------------------------------------------------- /examples/cm6-graphql-legacy-parcel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "sourceMap": true, 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/interface/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the license found in the 6 | * LICENSE file in the root directory of this source tree. 7 | * 8 | */ 9 | 10 | export * from './autocompleteUtils'; 11 | 12 | export * from './getAutocompleteSuggestions'; 13 | 14 | export * from './getDefinition'; 15 | 16 | export * from './getDiagnostics'; 17 | 18 | export { getOutline } from './getOutline'; 19 | export { getHoverInformation, HoverConfig } from './getHoverInformation'; 20 | -------------------------------------------------------------------------------- /examples/cm6-graphql-legacy-parcel/src/index.ts: -------------------------------------------------------------------------------- 1 | import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup'; 2 | import { StreamLanguage } from '@codemirror/language'; 3 | import { graphql } from 'codemirror-graphql/cm6-legacy/mode'; 4 | import query from './sample-query'; 5 | 6 | const state = EditorState.create({ 7 | doc: query, 8 | extensions: [basicSetup, StreamLanguage.define(graphql)], 9 | }); 10 | 11 | new EditorView({ 12 | state, 13 | parent: document.querySelector('#editor')!, 14 | }); 15 | 16 | // Hot Module Replacement 17 | if (module.hot) { 18 | module.hot.accept(); 19 | } 20 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/copy.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 21 | 22 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/utility/debounce.ts: -------------------------------------------------------------------------------- 1 | 'use no memo'; 2 | 3 | /** 4 | * Provided a duration and a function, returns a new function which is called 5 | * `duration` milliseconds after the last call. 6 | */ 7 | export function debounce any>( 8 | duration: number, 9 | fn: F, 10 | ) { 11 | let timeout: ReturnType | null; 12 | return function (...args) { 13 | if (timeout) { 14 | clearTimeout(timeout); 15 | } 16 | timeout = setTimeout(() => { 17 | timeout = null; 18 | fn(...args); 19 | }, duration); 20 | } as F; 21 | } 22 | -------------------------------------------------------------------------------- /examples/monaco-graphql-webpack/README.md: -------------------------------------------------------------------------------- 1 | A simple example of `monaco-graphql` using webpack 4 2 | 3 | [live demo](https://monaco-graphql.netlify.com) of the monaco webpack example 4 | 5 | ### Setup 6 | 7 | `yarn` and `yarn start` from this folder to start webpack dev server 8 | 9 | ### JS only 10 | 11 | If you want to learn how to bundle `monaco-graphql` using webpack without 12 | typescript, these steps will help: 13 | 14 | 1. rename .ts files to .js 15 | 1. rename .ts to .js in webpack.config.js 16 | 1. remove fork ts checker plugin from webpack.config.js 17 | 1. remove typescript annotations from the renamed files 18 | -------------------------------------------------------------------------------- /packages/graphiql/cypress/e2e/headers.cy.ts: -------------------------------------------------------------------------------- 1 | const DEFAULT_HEADERS = '{"foo":2}'; 2 | 3 | describe('Headers', () => { 4 | it('should have default query only on first tab and default headers in all tabs', () => { 5 | cy.visit(`?defaultQuery={test}&defaultHeaders=${DEFAULT_HEADERS}`); 6 | cy.assertHasValues({ query: '{test}', headersString: DEFAULT_HEADERS }); 7 | cy.get('.graphiql-tab-add').click(); 8 | cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS }); 9 | cy.get('.graphiql-tab-add').click(); 10 | cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS }); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/monaco-graphql/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.cjs.json", 3 | "compilerOptions": { 4 | "moduleResolution": "node", 5 | "baseUrl": ".", 6 | "rootDir": "./src", 7 | "outDir": "./dist", 8 | "target": "es2015", 9 | "noUncheckedIndexedAccess": true, 10 | "lib": ["dom", "ESNext"], 11 | "paths": { 12 | "*": ["*"] 13 | } 14 | }, 15 | "references": [ 16 | { 17 | "path": "../graphql-language-service" 18 | } 19 | ], 20 | "include": ["./src"], 21 | "exclude": ["**/__tests__/**", "**/*.spec.*", "dist", "esm", "node_modules"] 22 | } 23 | -------------------------------------------------------------------------------- /examples/graphiql-vite/vite.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | import $monacoEditorPlugin from 'vite-plugin-monaco-editor'; 4 | 5 | const monacoEditorPlugin = $monacoEditorPlugin.default ?? $monacoEditorPlugin; 6 | 7 | export default defineConfig({ 8 | plugins: [ 9 | react(), 10 | monacoEditorPlugin({ 11 | languageWorkers: ['editorWorkerService', 'json'], 12 | customWorkers: [ 13 | { 14 | label: 'graphql', 15 | entry: 'monaco-graphql/esm/graphql.worker.js', 16 | }, 17 | ], 18 | }), 19 | ], 20 | }); 21 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/tsconfig.esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.esm.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./esm", 6 | "composite": true, 7 | "jsx": "react", 8 | "strictPropertyInitialization": false, 9 | "baseUrl": "." 10 | }, 11 | "include": ["src"], 12 | "exclude": [ 13 | "**/__tests__/**", 14 | "**/dist/**.*", 15 | "**/*.spec.ts", 16 | "**/*.spec.js", 17 | "**/*-test.ts", 18 | "**/*-test.js" 19 | ], 20 | "references": [ 21 | { 22 | "path": "../graphql-language-service" 23 | } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-graphiql-nextjs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "types:check": "tsc --noEmit", 7 | "dev": "next", 8 | "build": "next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "graphiql": "^5.0.0-rc.0", 14 | "next": "15.4.0", 15 | "react": "^19.1.0", 16 | "react-dom": "^19.1.0" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "^20", 20 | "@types/react": "^19", 21 | "@types/react-dom": "^19", 22 | "typescript": "^5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/monaco-graphql-react-vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/graphql-language-service-cli/src/__tests__/index.test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the license found in the 6 | * LICENSE file in the root directory of this source tree. 7 | */ 8 | 9 | describe('blinking light demo', () => { 10 | it('runs', () => { 11 | // This is just a placeholder for now as all the existing tests have moved 12 | // down into the respective package directories. In the future, this will be 13 | // the home of the integration tests. 14 | expect(true).toEqual(true); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/utils.tsx: -------------------------------------------------------------------------------- 1 | 'use no memo'; 2 | 3 | import { 4 | GraphQLNamedType, 5 | GraphQLType, 6 | isListType, 7 | isNonNullType, 8 | } from 'graphql'; 9 | import type { JSX } from 'react'; 10 | 11 | export function renderType( 12 | type: GraphQLType, 13 | renderNamedType: (namedType: GraphQLNamedType) => JSX.Element, 14 | ): JSX.Element { 15 | if (isNonNullType(type)) { 16 | return <>{renderType(type.ofType, renderNamedType)}!; 17 | } 18 | if (isListType(type)) { 19 | return <>[{renderType(type.ofType, renderNamedType)}]; 20 | } 21 | return renderNamedType(type); 22 | } 23 | -------------------------------------------------------------------------------- /packages/graphiql-toolkit/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, Options } from 'tsup'; 2 | 3 | const opts: Options = { 4 | entry: ['src/**/*.ts', '!**/__tests__'], 5 | bundle: false, 6 | clean: true, 7 | dts: true, 8 | minifySyntax: true, 9 | }; 10 | 11 | export default defineConfig([ 12 | { 13 | ...opts, 14 | format: 'esm', 15 | outDir: 'dist/esm', 16 | outExtension: () => ({ js: '.js' }), 17 | env: { 18 | USE_IMPORT: 'true', 19 | }, 20 | }, 21 | { 22 | ...opts, 23 | format: 'cjs', 24 | outDir: 'dist/cjs', 25 | env: { 26 | USE_IMPORT: 'false', 27 | }, 28 | }, 29 | ]); 30 | -------------------------------------------------------------------------------- /examples/monaco-graphql-webpack/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "rootDir": "./src", 6 | "outDir": "./dist", 7 | "composite": true, 8 | "baseUrl": ".", 9 | "strictPropertyInitialization": false, 10 | "types": ["node", "jest"], 11 | "typeRoots": ["../../node_modules/@types", "node_modules/@types"], 12 | "lib": ["dom", "ESNext"], 13 | "moduleResolution": "node" 14 | }, 15 | "references": [{ "path": "../../packages/monaco-graphql" }], 16 | "include": ["src"], 17 | "exclude": ["**/__tests__/**", "**/build/**.*", "../../node_modules"] 18 | } 19 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/enum-value.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | 15 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test.md: -------------------------------------------------------------------------------- 1 | # this is an MD file 2 | 3 | It would be a shame if the word `graphql` accidentally triggered highlighting 4 | Looks like it doesn't though! good 5 | 6 | ```graphql 7 | query { 8 | something 9 | } 10 | ``` 11 | 12 | ```gql 13 | # comment 14 | query { 15 | something 16 | } 17 | ``` 18 | 19 | ```GraphQL 20 | query { 21 | something @directive(first: "string") 22 | } 23 | 24 | type Example { 25 | something 26 | } 27 | ``` 28 | 29 | ```php 30 | 39 | ``` 40 | -------------------------------------------------------------------------------- /examples/graphiql-cdn/README.md: -------------------------------------------------------------------------------- 1 | # GraphiQL CDN Example 2 | 3 | This is a simple example of using **GraphiQL** directly from a CDN, including the [GraphiQL Explorer plugin](../../packages/graphiql-plugin-explorer/README.md). 4 | 5 | It loads the latest GraphiQL version from [esm.sh](https://esm.sh), an ESM-based CDN that serves npm packages as ES modules. 6 | 7 | ## Setup 8 | 9 | No installation or build step is required — just open the `index.html` file in your browser: 10 | 11 | - macOS: 12 | 13 | ```sh 14 | open index.html 15 | ``` 16 | 17 | - Linux: 18 | 19 | ```sh 20 | firefox index.html 21 | # or 22 | chromium index.html 23 | ``` 24 | -------------------------------------------------------------------------------- /typedoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GraphQL Official LSP Documentation", 3 | "theme": "default", 4 | "mode": "modules", 5 | "out": "packages/graphiql/typedoc", 6 | "inputFiles": [ 7 | "**/node_modules/vscode*/**", 8 | "**/node_modules/@types/node/**" 9 | ], 10 | "exclude": "**/__tests__/**,*.spec.*,**/*-test.*,**/esm/**,**/dist/**,**/node_modules/**,packages/graphiql-2-rfc-*/**", 11 | "excludePrivate": true, 12 | "excludeNotExported": true, 13 | "external-modulemap": ".*/packages/([\\w\\-_]+)/", 14 | "ignoreCompilerErrors": true, 15 | "includeDeclarations": true, 16 | "preserveConstEnums": true, 17 | "readme": "./README.md" 18 | } 19 | -------------------------------------------------------------------------------- /examples/cm6-graphql-legacy-parcel/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | 17 | CM6 GraphQL Editor Example 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/utility/create-bounded-use-store.ts: -------------------------------------------------------------------------------- 1 | import { ExtractState, StoreApi, useStore } from 'zustand'; 2 | import { useShallow } from 'zustand/shallow'; 3 | 4 | // https://zustand.docs.pmnd.rs/guides/typescript#bounded-usestore-hook-for-vanilla-stores 5 | export const createBoundedUseStore = (store => selector => { 6 | // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- selector can be `undefined` 7 | return useStore(store, selector && useShallow(selector)); 8 | }) as >( 9 | store: S, 10 | ) => { 11 | (): ExtractState; 12 | (selector: (state: ExtractState) => T): T; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/graphiql/cypress/fixtures/fixtures.ts: -------------------------------------------------------------------------------- 1 | export const mockBadQuery = 'bad {} query'; 2 | 3 | export const mockQuery1 = /* GraphQL */ ` 4 | query Test($string: String) { 5 | test { 6 | hasArgs(string: $string) 7 | } 8 | } 9 | `; 10 | 11 | export const mockQuery2 = /* GraphQL */ ` 12 | query Test2 { 13 | test { 14 | id 15 | } 16 | } 17 | `; 18 | 19 | export const mockVariables1 = JSON.stringify({ string: 'string' }); 20 | export const mockVariables2 = JSON.stringify({ string: 'string2' }); 21 | 22 | export const mockHeaders1 = JSON.stringify({ foo: 'bar' }); 23 | export const mockHeaders2 = JSON.stringify({ foo: 'baz' }); 24 | -------------------------------------------------------------------------------- /packages/vscode-graphql/src/serverIpc/index.ts: -------------------------------------------------------------------------------- 1 | // this lives in the same monorepo! most errors you see in 2 | // vscode that aren't highlighting or bracket completion 3 | // related are coming from our LSP server 4 | import { startServer } from 'graphql-language-service-server'; 5 | 6 | // The npm scripts are configured to only build this once before 7 | // watching the extension, so please restart the extension debugger for changes! 8 | 9 | async function start() { 10 | try { 11 | await startServer({ method: 'node' }); 12 | } catch (err) { 13 | // eslint-disable-next-line no-console 14 | console.error(err); 15 | } 16 | } 17 | 18 | void start(); 19 | -------------------------------------------------------------------------------- /packages/monaco-graphql/src/full.ts: -------------------------------------------------------------------------------- 1 | import 'monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution'; 2 | import 'monaco-editor/esm/vs/editor/contrib/format/browser/formatActions'; 3 | import 'monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching'; 4 | import 'monaco-editor/esm/vs/editor/browser/coreCommands'; 5 | import 'monaco-editor/esm/vs/editor/contrib/clipboard/browser/clipboard'; 6 | import 'monaco-editor/esm/vs/editor/contrib/cursorUndo/browser/cursorUndo'; 7 | import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu'; 8 | import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController'; 9 | -------------------------------------------------------------------------------- /packages/vscode-graphql/src/serverStdio/index.ts: -------------------------------------------------------------------------------- 1 | // this lives in the same monorepo! most errors you see in 2 | // vscode that aren't highlighting or bracket completion 3 | // related are coming from our LSP server 4 | import { startServer } from 'graphql-language-service-server'; 5 | 6 | // The npm scripts are configured to only build this once before 7 | // watching the extension, so please restart the extension debugger for changes! 8 | 9 | async function start() { 10 | try { 11 | await startServer({ method: 'stream' }); 12 | } catch (err) { 13 | // eslint-disable-next-line no-console 14 | console.error(err); 15 | } 16 | } 17 | 18 | void start(); 19 | -------------------------------------------------------------------------------- /examples/graphiql-vite-react-router/app/routes/_index/route.ts: -------------------------------------------------------------------------------- 1 | import type { FC } from 'react'; 2 | import type { LinksFunction, MetaFunction } from 'react-router'; 3 | import { graphiql } from './graphiql.client'; 4 | import graphiqlCss from 'graphiql/style.css?url'; 5 | import globalsCss from './globals.css?url'; 6 | 7 | export const meta: MetaFunction = () => { 8 | return [{ title: 'API Explorer' }]; 9 | }; 10 | 11 | export const links: LinksFunction = () => { 12 | return [ 13 | { rel: 'stylesheet', href: graphiqlCss }, 14 | { rel: 'stylesheet', href: globalsCss }, 15 | ]; 16 | }; 17 | 18 | const Route: FC = () => graphiql; 19 | 20 | export default Route; 21 | -------------------------------------------------------------------------------- /examples/graphiql-webpack/README.md: -------------------------------------------------------------------------------- 1 | ## GraphiQL Webpack Example 2 | 3 | This example demonstrates how to transpile your own custom ES6 GraphiQL 4 | implementation with webpack and babel configuration. 5 | 6 | It shows how to add plugins and even how to create a custom plugin. 7 | 8 | There is also a no-config example with `create-react-app`: 9 | 10 | [![Edit graphiql-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/graphiql-example-nhzvc) 11 | 12 | It appears `create-react-app` supports all the language features we require. 13 | 14 | ### Setup 15 | 16 | 1. `yarn` and `yarn start` from this folder to start webpack dev server 17 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.cjs.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./", 6 | "composite": true, 7 | "jsx": "react", 8 | "target": "es5", 9 | "baseUrl": ".", 10 | "strictPropertyInitialization": false 11 | }, 12 | "include": ["src"], 13 | "exclude": [ 14 | "**/__tests__/**", 15 | "**/dist/**.*", 16 | "**/esm/**.*", 17 | "**/*.spec.ts", 18 | "**/*.spec.js", 19 | "**/*-test.ts", 20 | "**/*-test.js" 21 | ], 22 | "references": [ 23 | { 24 | "path": "../graphql-language-service" 25 | } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { Argument } from './argument'; 2 | export { DefaultValue } from './default-value'; 3 | export { DeprecationReason } from './deprecation-reason'; 4 | export { Directive } from './directive'; 5 | export { DocExplorer } from './doc-explorer'; 6 | export { FieldDocumentation } from './field-documentation'; 7 | export { FieldLink } from './field-link'; 8 | export { SchemaDocumentation } from './schema-documentation'; 9 | export { Search } from './search'; 10 | export { ExplorerSection } from './section'; 11 | export { TypeDocumentation } from './type-documentation'; 12 | export { TypeLink } from './type-link'; 13 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/deprecated-argument.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/cm6-graphql-parcel/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | 17 | Code Mirror 6 GraphQL Editor Example 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /packages/cm6-graphql/src/graphql.ts: -------------------------------------------------------------------------------- 1 | import { Extension } from '@codemirror/state'; 2 | import { GraphQLSchema } from 'graphql'; 3 | import { completion } from './completions'; 4 | import { GqlExtensionsOptions } from './interfaces'; 5 | import { jump } from './jump'; 6 | import { graphqlLanguageSupport } from './language'; 7 | import { lint } from './lint'; 8 | import { stateExtensions } from './state'; 9 | 10 | export function graphql( 11 | schema?: GraphQLSchema, 12 | opts?: GqlExtensionsOptions, 13 | ): Extension[] { 14 | return [ 15 | graphqlLanguageSupport(), 16 | completion, 17 | lint, 18 | jump, 19 | stateExtensions(schema, opts), 20 | ]; 21 | } 22 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/docs.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 20 | 21 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ] 21 | }, 22 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 23 | "exclude": ["node_modules"] 24 | } 25 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/spinner/index.css: -------------------------------------------------------------------------------- 1 | .graphiql-spinner { 2 | height: 56px; 3 | margin: auto; 4 | margin-top: var(--px-16); 5 | width: 56px; 6 | 7 | &::after { 8 | animation: rotation 0.8s linear 0s infinite; 9 | border: 4px solid transparent; 10 | border-radius: 100%; 11 | border-top: 4px solid hsla(var(--color-neutral), var(--alpha-tertiary)); 12 | content: ''; 13 | display: inline-block; 14 | height: 46px; 15 | vertical-align: middle; 16 | width: 46px; 17 | } 18 | } 19 | 20 | @keyframes rotation { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/stringToHash.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the license found in the 6 | * LICENSE file in the root directory of this source tree. 7 | * 8 | */ 9 | 10 | /* eslint-disable no-bitwise */ 11 | export default function stringToHash(str: string): number { 12 | let hash = 0; 13 | if (str.length === 0) { 14 | return hash; 15 | } 16 | for (let i = 0; i < str.length; i++) { 17 | const chr = str.charCodeAt(i); 18 | hash = (hash << 5) - hash + chr; 19 | hash |= 0; // Convert to 32bit integer 20 | } 21 | return hash; 22 | } 23 | -------------------------------------------------------------------------------- /examples/monaco-graphql-react-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-monaco-graphql-react-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "dependencies": { 6 | "@graphiql/toolkit": "^0.11.3", 7 | "graphql": "^16.11.0", 8 | "graphql-language-service": "^5.5.0", 9 | "jsonc-parser": "^3.2.0", 10 | "monaco-editor": "^0.52.2", 11 | "monaco-graphql": "^1.7.3", 12 | "react": "^19.1.0", 13 | "react-dom": "^19.1.0" 14 | }, 15 | "devDependencies": { 16 | "@vitejs/plugin-react": "^4.4.1", 17 | "vite": "^6.3.4" 18 | }, 19 | "scripts": { 20 | "dev": "vite", 21 | "build": "vite build", 22 | "start": "vite preview" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/graphiql/cypress/support/e2e.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/e2e.ts is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | /// 16 | 17 | import './commands'; 18 | -------------------------------------------------------------------------------- /examples/graphiql-vite-react-router/app/root.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from 'react'; 2 | import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'; 3 | 4 | const Root: FC = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export default Root; 24 | -------------------------------------------------------------------------------- /examples/graphiql-nextjs/src/app/graphiql.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import type { FC } from 'react'; 4 | import { GraphiQL } from 'graphiql'; 5 | import 'graphiql/setup-workers/webpack'; 6 | import 'graphiql/style.css'; 7 | 8 | async function fetcher(graphQLParams: Record) { 9 | const response = await fetch('https://graphql.earthdata.nasa.gov/api', { 10 | method: 'POST', 11 | headers: { 12 | Accept: 'application/json', 13 | 'Content-Type': 'application/json', 14 | }, 15 | body: JSON.stringify(graphQLParams), 16 | }); 17 | return response.json(); 18 | } 19 | 20 | export const GraphiQLPage: FC = () => { 21 | return ; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/monaco-graphql/src/graphql.worker.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import type * as monaco from './monaco-editor'; 9 | import { ICreateData } from './typings'; 10 | 11 | // @ts-expect-error 12 | import { initialize } from 'monaco-editor/esm/vs/editor/editor.worker'; 13 | 14 | import { GraphQLWorker } from './GraphQLWorker'; 15 | 16 | globalThis.onmessage = () => { 17 | initialize( 18 | (ctx: monaco.worker.IWorkerContext, createData: ICreateData) => 19 | new GraphQLWorker(ctx, createData), 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__utilities__/serializer.ts: -------------------------------------------------------------------------------- 1 | import { Token } from './utilities'; 2 | 3 | function formatTokens(tokens: Token[]): string { 4 | const maxLength = Math.max(...tokens.map(token => token.text.length)); 5 | 6 | return tokens 7 | .map(token => `${token.text.padEnd(maxLength)} | ${token.scopes.join(' ')}`) 8 | .join('\n'); 9 | } 10 | 11 | expect.addSnapshotSerializer({ 12 | test: value => 13 | Array.isArray(value) && 14 | value.every( 15 | item => 16 | typeof item === 'object' && 17 | typeof item.text === 'string' && 18 | Array.isArray(item.scopes), 19 | ), 20 | serialize: value => formatTokens(value as Token[]), 21 | }); 22 | -------------------------------------------------------------------------------- /packages/graphiql/cypress/e2e/graphql-ws.cy.ts: -------------------------------------------------------------------------------- 1 | describe('IncrementalDelivery support via fetcher', () => { 2 | describe('When operation contains @stream', () => { 3 | const testSubscription = 4 | 'subscription TestSubscription($delay: Int) { message(delay: $delay) }'; 5 | const mockSubscriptionSuccess = { 6 | data: { 7 | message: 'Zdravo', 8 | }, 9 | }; 10 | 11 | it('Expects a subscription to resolve', () => { 12 | cy.visitWithOp({ query: testSubscription, variables: { delay: 0 } }); 13 | cy.get('.monaco-editor').should('have.length', 4); 14 | cy.clickExecuteQuery(); 15 | cy.assertQueryResult(mockSubscriptionSuccess); 16 | }); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test.php: -------------------------------------------------------------------------------- 1 | "{ 6 | post(idType: SLUG, id: 2) { 7 | title 8 | content 9 | date 10 | } 11 | }" 12 | ]); 13 | 14 | $query = << 41 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.0.1/schema.json", 3 | "changelog": ["@changesets/changelog-github", { "repo": "graphql/graphiql" }], 4 | "commit": false, 5 | "linked": [], 6 | "access": "public", 7 | "baseBranch": "main", 8 | "ignore": [ 9 | "example-graphiql-vite", 10 | "example-graphiql-vite-react-router", 11 | "example-graphiql-webpack", 12 | "example-monaco-graphql-nextjs", 13 | "example-monaco-graphql-react-vite", 14 | "example-monaco-graphql-webpack" 15 | ], 16 | "updateInternalDependencies": "patch", 17 | "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { 18 | "onlyUpdatePeerDependentsWhenOutOfRange": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/argument.css: -------------------------------------------------------------------------------- 1 | .graphiql-doc-explorer-argument { 2 | & > * + * { 3 | margin-top: var(--px-12); 4 | } 5 | } 6 | 7 | .graphiql-doc-explorer-argument-name { 8 | color: hsl(var(--color-secondary)); 9 | } 10 | 11 | .graphiql-doc-explorer-argument-deprecation { 12 | background-color: hsla(var(--color-warning), var(--alpha-background-light)); 13 | border: 1px solid hsl(var(--color-warning)); 14 | border-radius: var(--border-radius-4); 15 | color: hsl(var(--color-warning)); 16 | padding: var(--px-8); 17 | } 18 | 19 | .graphiql-doc-explorer-argument-deprecation-label { 20 | font-size: var(--font-size-hint); 21 | font-weight: var(--font-weight-medium); 22 | } 23 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/deprecated-enum-value.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 16 | -------------------------------------------------------------------------------- /packages/graphiql-react/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import path from 'node:path'; 2 | import { defineConfig } from 'vitest/config'; 3 | import { plugins } from './vite.config.mjs'; 4 | 5 | export default defineConfig({ 6 | plugins, 7 | test: { 8 | globals: true, 9 | environment: 'jsdom', 10 | setupFiles: ['./setup-files.ts'], 11 | alias: [ 12 | { 13 | // Fixes Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json. 14 | find: /^monaco-editor$/, 15 | replacement: path.resolve( 16 | '../../node_modules/monaco-editor/esm/vs/editor/editor.api', 17 | ), 18 | }, 19 | ], 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /packages/graphiql/test/execute.js: -------------------------------------------------------------------------------- 1 | export function createExecute({ 2 | execute, 3 | experimentalExecuteIncrementally, 4 | version, 5 | }) { 6 | if (parseInt(version, 10) < 17) { 7 | return execute; 8 | } 9 | return async (...args) => { 10 | const result = await experimentalExecuteIncrementally(...args); 11 | 12 | if (!('subsequentResults' in result)) { 13 | return result; 14 | } 15 | 16 | const { initialResult, subsequentResults } = result; 17 | if (typeof subsequentResults[Symbol.asyncIterator] !== 'function') { 18 | return result; 19 | } 20 | 21 | return (async function* () { 22 | yield initialResult; 23 | yield* subsequentResults; 24 | })(); 25 | }; 26 | } 27 | -------------------------------------------------------------------------------- /resources/tsconfig.build.esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true 4 | }, 5 | "files": [], 6 | "include": [], 7 | "references": [ 8 | { 9 | "path": "../packages/cm6-graphql/tsconfig.esm.json" 10 | }, 11 | { 12 | "path": "../packages/codemirror-graphql/tsconfig.esm.json" 13 | }, 14 | { 15 | "path": "../packages/monaco-graphql/tsconfig.esm.json" 16 | }, 17 | { 18 | "path": "../packages/graphql-language-service/tsconfig.esm.json" 19 | }, 20 | { 21 | "path": "../packages/graphql-language-service-server/tsconfig.esm.json" 22 | }, 23 | { 24 | "path": "../packages/graphql-language-service-cli/tsconfig.esm.json" 25 | } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import path from 'node:path'; 2 | import { defineConfig } from 'vitest/config'; 3 | import { plugins } from './vite.config.mjs'; 4 | 5 | export default defineConfig({ 6 | plugins, 7 | test: { 8 | globals: true, 9 | environment: 'jsdom', 10 | setupFiles: ['./setup-files.ts'], 11 | alias: [ 12 | { 13 | // Fixes Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json. 14 | find: /^monaco-editor$/, 15 | replacement: path.resolve( 16 | '../../node_modules/monaco-editor/esm/vs/editor/editor.api', 17 | ), 18 | }, 19 | ], 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-explorer/src/icons/folder-plus.svg: -------------------------------------------------------------------------------- 1 | 9 | 14 | 17 | 22 | 23 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/merge.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/graphiql-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "jsx": "react-jsx", 17 | "declaration": true, 18 | "noUncheckedIndexedAccess": true, 19 | "importsNotUsedAsValues": "error", 20 | "types": ["vitest/globals", "@testing-library/jest-dom"] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/button-group/index.css: -------------------------------------------------------------------------------- 1 | .graphiql-button-group { 2 | background-color: hsla(var(--color-neutral), var(--alpha-background-light)); 3 | /* Border radius of button plus padding */ 4 | border-radius: calc(var(--border-radius-4) + var(--px-4)); 5 | display: flex; 6 | padding: var(--px-4); 7 | 8 | & > button.graphiql-button { 9 | background-color: transparent; 10 | &:hover { 11 | background-color: hsla( 12 | var(--color-neutral), 13 | var(--alpha-background-light) 14 | ); 15 | } 16 | &.active { 17 | background-color: hsl(var(--color-base)); 18 | cursor: default; 19 | } 20 | } 21 | 22 | & > * + * { 23 | margin-left: var(--px-8); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/trash.svg: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /examples/monaco-graphql-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-monaco-graphql-nextjs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "types:check": "tsc --noEmit", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start" 11 | }, 12 | "dependencies": { 13 | "@graphiql/toolkit": "^0.11.3", 14 | "graphql": "^16.9.0", 15 | "jsonc-parser": "^3.2.0", 16 | "monaco-editor": "^0.52.2", 17 | "monaco-graphql": "^1.7.3", 18 | "next": "15.4.0", 19 | "react": "^19.1.0", 20 | "react-dom": "^19.1.0" 21 | }, 22 | "devDependencies": { 23 | "@types/node": "^16.18.4", 24 | "@types/react": "^19.1.2", 25 | "typescript": "^4.6.3" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/monaco-graphql-react-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Monaco React Vite Example 8 | 18 | 19 | 20 |
21 |
Loading…
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/execute-button/index.css: -------------------------------------------------------------------------------- 1 | button.graphiql-execute-button { 2 | background-color: hsl(var(--color-primary)); 3 | border: none; 4 | border-radius: var(--border-radius-8); 5 | cursor: pointer; 6 | height: var(--toolbar-width); 7 | padding: 0; 8 | width: var(--toolbar-width); 9 | 10 | &:hover { 11 | background-color: hsla(var(--color-primary), 0.9); 12 | } 13 | 14 | &:active { 15 | background-color: hsla(var(--color-primary), 0.8); 16 | } 17 | 18 | &:focus { 19 | outline: hsla(var(--color-primary), 0.8) auto 1px; 20 | } 21 | 22 | & > svg { 23 | color: white; 24 | display: block; 25 | height: var(--px-16); 26 | margin: auto; 27 | width: var(--px-16); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/toolbar-menu/index.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactNode } from 'react'; 2 | import { Trigger, type DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; 3 | import { DropdownMenu } from '../dropdown-menu'; 4 | 5 | interface ToolbarMenuProps extends DropdownMenuProps { 6 | button: ReactNode; 7 | } 8 | 9 | const ToolbarMenuRoot: FC = ({ 10 | button, 11 | children, 12 | ...props 13 | }) => { 14 | return ( 15 | 16 | {button} 17 | {children} 18 | 19 | ); 20 | }; 21 | 22 | export const ToolbarMenu = Object.assign(ToolbarMenuRoot, { 23 | Item: DropdownMenu.Item, 24 | }); 25 | -------------------------------------------------------------------------------- /packages/monaco-graphql/tsconfig.esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../resources/tsconfig.base.esm.json", 3 | "compilerOptions": { 4 | "module": "ESNext", 5 | "moduleResolution": "node", 6 | "target": "ESNext", 7 | "baseUrl": ".", 8 | "rootDir": "./src", 9 | "outDir": "./esm", 10 | "lib": ["dom", "ESNext"], 11 | "paths": { 12 | "*": ["*"] 13 | } 14 | }, 15 | "references": [ 16 | { 17 | "path": "../graphql-language-service" 18 | } 19 | ], 20 | "include": ["src"], 21 | "exclude": [ 22 | "**/__tests__/**", 23 | "**/*.spec.*", 24 | "**/node_modules/monaco-editor-core/**/*.d.ts", 25 | "**/node_modules/jest-haste-map/**/*", 26 | "dist", 27 | "esm", 28 | "node_modules" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-history/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import path from 'node:path'; 2 | import { defineConfig } from 'vitest/config'; 3 | import { plugins } from './vite.config.mjs'; 4 | 5 | export default defineConfig({ 6 | plugins, 7 | test: { 8 | globals: true, 9 | environment: 'jsdom', 10 | setupFiles: ['./setup-files.ts', '../graphiql/setup-window.ts'], 11 | alias: [ 12 | { 13 | // Fixes Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json. 14 | find: /^monaco-editor$/, 15 | replacement: path.resolve( 16 | '../../node_modules/monaco-editor/esm/vs/editor/editor.api', 17 | ), 18 | }, 19 | ], 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /packages/vscode-graphql/.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | out/test/** 4 | src/** 5 | .gitignore 6 | tsconfig.json 7 | vsc-extension-quickstart.md 8 | tslint.json 9 | .github 10 | renovate.json 11 | *.tsbuildinfo 12 | esbuild.js 13 | dist/** 14 | 15 | # exclude all node_modules by default 16 | ../../node_modules/** 17 | 18 | # @astrojs/compiler relies on the filesystem structure, therefore can't be bundled 19 | !../../node_modules/@astrojs/compiler 20 | # astrojs-compiler-sync relies on the filesystem structure, therefore can't be bundled 21 | !../../node_modules/astrojs-compiler-sync 22 | # synckit is the dependency of astrojs-compiler-sync 23 | !../../node_modules/synckit 24 | # @pkgr/core is the dependency of synckit 25 | !../../node_modules/@pkgr/core 26 | -------------------------------------------------------------------------------- /packages/graphiql/setup-window.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Fixes TypeError: mainWindow.matchMedia is not a function 3 | * @see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom 4 | */ 5 | // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition 6 | if (!window.matchMedia) { 7 | Object.defineProperty(window, 'matchMedia', { 8 | writable: false, 9 | value: vi.fn().mockImplementation(query => ({ 10 | matches: false, 11 | media: query, 12 | onchange: null, 13 | addListener: vi.fn(), // deprecated 14 | removeListener: vi.fn(), // deprecated 15 | addEventListener: vi.fn(), 16 | removeEventListener: vi.fn(), 17 | dispatchEvent: vi.fn(), 18 | })), 19 | }); 20 | } 21 | 22 | export {}; 23 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/field-link.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from 'react'; 2 | import { DocExplorerFieldDef, useDocExplorerActions } from '../context'; 3 | import './field-link.css'; 4 | 5 | type FieldLinkProps = { 6 | /** 7 | * The field or argument that should be linked to. 8 | */ 9 | field: DocExplorerFieldDef; 10 | }; 11 | 12 | export const FieldLink: FC = ({ field }) => { 13 | const { push } = useDocExplorerActions(); 14 | 15 | return ( 16 | { 19 | event.preventDefault(); 20 | push({ name: field.name, def: field }); 21 | }} 22 | href="#" 23 | > 24 | {field.name} 25 | 26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/grammars/graphql.rescript.json: -------------------------------------------------------------------------------- 1 | { 2 | "scopeName": "inline.graphql.res", 3 | "injectionSelector": "L:(meta.embedded.block.rescript | source.rescript -string -comment)", 4 | "patterns": [ 5 | { 6 | "contentName": "meta.embedded.block.graphql", 7 | "begin": "(%graphql\\()\\s*$", 8 | "end": "(?<=\\))", 9 | "patterns": [ 10 | { 11 | "begin": "^\\s*(`)$", 12 | "end": "^\\s*(`)", 13 | "patterns": [{ "include": "source.graphql" }] 14 | } 15 | ] 16 | }, 17 | { 18 | "contentName": "meta.embedded.block.graphql", 19 | "begin": "(%graphql\\(`)", 20 | "end": "(\\`( )?\\))", 21 | "patterns": [{ "include": "source.graphql" }] 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /resources/tsconfig.build.cjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true 4 | }, 5 | "files": [], 6 | "include": [], 7 | "references": [ 8 | { 9 | "path": "../packages/monaco-graphql" 10 | }, 11 | { 12 | "path": "../packages/codemirror-graphql" 13 | }, 14 | { 15 | "path": "../packages/cm6-graphql" 16 | }, 17 | { 18 | "path": "../packages/graphql-language-service" 19 | }, 20 | { 21 | "path": "../packages/graphql-language-service-server" 22 | }, 23 | { 24 | "path": "../packages/graphql-language-service-cli" 25 | }, 26 | { 27 | "path": "../packages/vscode-graphql" 28 | }, 29 | { 30 | "path": "../packages/vscode-graphql-execution" 31 | } 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /cspell.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json", 3 | "language": "en", 4 | "useGitignore": true, 5 | "cache": { 6 | "useCache": true 7 | }, 8 | "dictionaries": ["custom-words"], 9 | "dictionaryDefinitions": [ 10 | { 11 | "name": "custom-words", 12 | "path": "./resources/custom-words.txt", 13 | "addWords": true 14 | } 15 | ], 16 | "ignorePaths": [ 17 | "**/CHANGELOG.md", 18 | "**/package.json", 19 | "**/esbuild.js", 20 | ".eslintrc.js", 21 | ".vscode/extensions.json", 22 | "packages/monaco-graphql/test/monaco-editor.test.ts", 23 | "working-group" 24 | ], 25 | "files": ["**/*.{js,cjs,mjs,ts,jsx,tsx,md,mdx,html,json,css,toml,yaml,yml}"] 26 | } 27 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "label": "watch-vscode", 6 | "type": "npm", 7 | "script": "watch-vscode", 8 | "problemMatcher": ["$tsc-watch"], 9 | "isBackground": true, 10 | "presentation": { 11 | "reveal": "always" 12 | }, 13 | "group": { 14 | "kind": "build", 15 | "isDefault": true 16 | } 17 | }, 18 | { 19 | "label": "watch-vscode-exec", 20 | "type": "npm", 21 | "script": "watch-vscode-exec", 22 | "problemMatcher": ["$tsc-watch"], 23 | "isBackground": true, 24 | "presentation": { 25 | "reveal": "always" 26 | }, 27 | "group": { 28 | "kind": "build", 29 | "isDefault": true 30 | } 31 | } 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/markdown-grammar.spec.ts: -------------------------------------------------------------------------------- 1 | import { tokenizeFile } from './__utilities__/utilities'; 2 | 3 | describe('inline.graphql.markdown.codeblock grammar', () => { 4 | const scope = 'inline.graphql.markdown.codeblock'; 5 | 6 | it('should tokenize a simple markdown file', async () => { 7 | const result = await tokenizeFile('__fixtures__/test.md', scope); 8 | expect(result).toMatchSnapshot(); 9 | }); 10 | }); 11 | 12 | describe('inline.graphql.markdown.codeblock grammar js', () => { 13 | const scope = 'inline.graphql.markdown.codeblock'; 14 | 15 | it('should tokenize a markdown file with javascript & typescript', async () => { 16 | const result = await tokenizeFile('__fixtures__/test-js.md', scope); 17 | expect(result).toMatchSnapshot(); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/graphiql-toolkit/README.md: -------------------------------------------------------------------------------- 1 | [Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-toolkit/CHANGELOG.md) 2 | | 3 | [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_toolkit.html) 4 | | [NPM](https://www.npmjs.com/package/@graphiql/toolkit) | 5 | [Discord](https://discord.gg/NP5vbPeUFp) 6 | 7 | # `@graphiql/toolkit` 8 | 9 | This is a general purpose library for building GraphQL IDEs. It's being used by 10 | other packages like `graphiql` and `@graphiql/react` and also provides utilities 11 | that are useful when working with these packages. 12 | 13 | ## Docs 14 | 15 | - **[`createFetcher`](./docs/create-fetcher.md)** : a utility for creating a 16 | `fetcher` prop implementation for HTTP GET, POST including multipart, 17 | websockets fetcher 18 | - more to come! 19 | -------------------------------------------------------------------------------- /examples/monaco-graphql-nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "baseUrl": ".", 18 | "paths": { 19 | "@/*": ["./src/*"] 20 | }, 21 | "plugins": [ 22 | { 23 | "name": "next" 24 | } 25 | ] 26 | }, 27 | "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", ".next/types/**/*.ts"], 28 | "exclude": ["node_modules"] 29 | } 30 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const gql = String.raw; 3 | const response = await fetch( 4 | 'https://swapi-graphql.netlify.app/.netlify/functions/index', 5 | { 6 | method: 'POST', 7 | headers: { 'Content-Type': 'application/json' }, 8 | body: JSON.stringify({ 9 | query: gql` 10 | query getFilm($id: ID!) { 11 | film(id: $id) { 12 | title 13 | releaseDate 14 | } 15 | } 16 | `, 17 | variables: { 18 | id: 'ZmlsbXM6MQ==', 19 | }, 20 | }), 21 | }, 22 | ); 23 | 24 | const json = await response.json(); 25 | const { film } = json.data; 26 | --- 27 | 28 |

Fetching information about Star Wars: A New Hope

29 |

Title: {film.title}

30 |

Year: {film.releaseDate}

31 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/stores/storage.ts: -------------------------------------------------------------------------------- 1 | import type { Storage, StorageAPI } from '@graphiql/toolkit'; 2 | import type { StateCreator } from 'zustand'; 3 | import type { SlicesWithActions } from '../types'; 4 | 5 | export interface StorageSlice { 6 | storage: StorageAPI; 7 | } 8 | 9 | export interface StorageProps { 10 | /** 11 | * Provide a custom storage API. 12 | * @default localStorage 13 | * @see {@link https://graphiql-test.netlify.app/typedoc/modules/graphiql_toolkit.html#storage-2|API docs} 14 | * for details on the required interface. 15 | */ 16 | storage?: Storage; 17 | } 18 | 19 | type CreateStorageSlice = ( 20 | initial: StorageSlice, 21 | ) => StateCreator; 22 | 23 | export const createStorageSlice: CreateStorageSlice = initial => () => initial; 24 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/setup-workers/esm.sh.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable import-x/no-unresolved */ 2 | import JsonWorker from 'https://esm.sh/monaco-editor@0.52.2/esm/vs/language/json/json.worker.js?worker'; 3 | import GraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker&deps=monaco-editor@0.52.2'; 4 | import EditorWorker from 'https://esm.sh/monaco-editor@0.52.2/esm/vs/editor/editor.worker.js?worker'; 5 | 6 | globalThis.MonacoEnvironment = { 7 | getWorker(_workerId: string, label: string) { 8 | // eslint-disable-next-line no-console 9 | console.info('setup-workers/esm.sh', { label }); 10 | switch (label) { 11 | case 'json': 12 | return new JsonWorker(); 13 | case 'graphql': 14 | return new GraphQLWorker(); 15 | } 16 | return new EditorWorker(); 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/type-link.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from 'react'; 2 | import type { GraphQLType } from 'graphql'; 3 | import { useDocExplorerActions } from '../context'; 4 | import { renderType } from './utils'; 5 | import './type-link.css'; 6 | 7 | type TypeLinkProps = { 8 | /** 9 | * The type that should be linked to. 10 | */ 11 | type: GraphQLType; 12 | }; 13 | 14 | export const TypeLink: FC = ({ type }) => { 15 | const { push } = useDocExplorerActions(); 16 | 17 | return renderType(type, def => ( 18 | { 21 | event.preventDefault(); 22 | push({ name: def.name, def }); 23 | }} 24 | href="#" 25 | > 26 | {def.name} 27 | 28 | )); 29 | }; 30 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "globalDependencies": ["yarn.lock", "resources/patches/*"], 4 | "tasks": { 5 | "build": { 6 | "dependsOn": [ 7 | // Run `build` in workspaces I depend on first 8 | "^build" 9 | ], 10 | // Cache all files emitted to the packages's directories 11 | "outputs": ["dist/**"] 12 | }, 13 | "dev": { 14 | "dependsOn": [ 15 | // Run `build` in workspaces I depend on first 16 | "^build" 17 | ], 18 | "cache": false 19 | }, 20 | "types:check": { 21 | "dependsOn": [ 22 | // Run `build` in workspaces I depend on first 23 | "^build" 24 | ], 25 | "outputs": ["dist/**"] 26 | }, 27 | "test": { 28 | "outputs": ["dist/**"] 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/directive.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /packages/graphiql/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import path from 'node:path'; 2 | import { defineConfig } from 'vitest/config'; 3 | import { plugins } from './vite.config.mjs'; 4 | 5 | export default defineConfig({ 6 | plugins, 7 | test: { 8 | globals: true, 9 | environment: 'jsdom', 10 | setupFiles: ['./setup-files.ts', './setup-window.ts'], 11 | // Since we increased `waitFor` timeout in setup-files.ts 12 | testTimeout: 9_000, 13 | alias: [ 14 | { 15 | // Fixes Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json. 16 | find: /^monaco-editor$/, 17 | replacement: path.resolve( 18 | '../../node_modules/monaco-editor/esm/vs/editor/editor.api', 19 | ), 20 | }, 21 | ], 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/utility/index.ts: -------------------------------------------------------------------------------- 1 | export { cleanupDisposables } from './cleanup-disposables'; 2 | export { createBoundedUseStore } from './create-bounded-use-store'; 3 | export { 4 | getOrCreateModel, 5 | createEditor, 6 | onEditorContainerKeyDown, 7 | } from './create-editor'; 8 | export { debounce } from './debounce'; 9 | export { formatJSONC, parseJSONC, tryParseJSONC } from './jsonc'; 10 | export { markdown } from './markdown'; 11 | export { Uri, KeyMod, KeyCode, Range } from './monaco-ssr'; 12 | export { pick } from './pick'; 13 | export { useDragResize } from './resize'; 14 | export { clsx as cn } from 'clsx'; 15 | export { 16 | useOptimisticState, 17 | useEditorState, 18 | useOperationsEditorState, 19 | useVariablesEditorState, 20 | useHeadersEditorState, 21 | useChangeHandler, 22 | useDidUpdate, 23 | } from './hooks'; 24 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from 'react'; 2 | import { MarkdownContent } from '@graphiql/react'; 3 | import './deprecation-reason.css'; 4 | 5 | type DeprecationReasonProps = { 6 | /** 7 | * The deprecation reason as Markdown string. 8 | */ 9 | children?: string | null; 10 | preview?: boolean; 11 | }; 12 | 13 | export const DeprecationReason: FC = props => { 14 | return props.children ? ( 15 |
16 |
Deprecated
17 | 21 | {props.children} 22 | 23 |
24 | ) : null; 25 | }; 26 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/tooltip/index.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactNode } from 'react'; 2 | import * as T from '@radix-ui/react-tooltip'; 3 | import './index.css'; 4 | 5 | export const TooltipRoot: FC = ({ 6 | children, 7 | align = 'start', 8 | side = 'bottom', 9 | sideOffset = 5, 10 | label, 11 | }) => { 12 | return ( 13 | 14 | {children} 15 | 16 | 22 | {label} 23 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | export const Tooltip = Object.assign(TooltipRoot, { 30 | Provider: T.Provider, 31 | }); 32 | -------------------------------------------------------------------------------- /packages/monaco-graphql/src/monaco.contribution.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | export { 9 | modeConfigurationDefault, 10 | SchemaEntry, 11 | formattingDefaults, 12 | MonacoGraphQLAPI, 13 | MonacoGraphQLAPIOptions, 14 | diagnosticSettingDefault, 15 | } from './api'; 16 | import { languages } from './monaco-editor'; 17 | import { initializeMode, LANGUAGE_ID } from './initializeMode'; 18 | 19 | export * from './typings'; 20 | 21 | export { LANGUAGE_ID }; 22 | 23 | // here is the only place where we 24 | // initialize the mode `onLanguage` 25 | languages.onLanguage(LANGUAGE_ID, () => { 26 | const api = initializeMode(); 27 | 28 | (languages as any).graphql = { api }; 29 | }); 30 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/graphql-grammar.spec.ts: -------------------------------------------------------------------------------- 1 | import { tokenizeFile } from './__utilities__/utilities'; 2 | 3 | describe('source.graphql grammar', () => { 4 | const scope = 'source.graphql'; 5 | 6 | it('should tokenize a simple query', async () => { 7 | const result = await tokenizeFile('__fixtures__/query.graphql', scope); 8 | expect(result).toMatchSnapshot(); 9 | }); 10 | it('should tokenize an advanced query', async () => { 11 | const result = await tokenizeFile( 12 | '__fixtures__/kitchen-sink.graphql', 13 | scope, 14 | ); 15 | expect(result).toMatchSnapshot(); 16 | }); 17 | it('should tokenize an advanced schema', async () => { 18 | const result = await tokenizeFile( 19 | '__fixtures__/StarWarsSchema.graphql', 20 | scope, 21 | ); 22 | expect(result).toMatchSnapshot(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/setup-workers/webpack.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Setup Monaco Editor workers for Webpack/Turbopack projects like Next.js. 3 | */ 4 | globalThis.MonacoEnvironment = { 5 | getWorker(_workerId: string, label: string) { 6 | // eslint-disable-next-line no-console 7 | console.info('setup-workers/webpack', { label }); 8 | switch (label) { 9 | case 'json': 10 | return new Worker( 11 | new URL( 12 | 'monaco-editor/esm/vs/language/json/json.worker.js', 13 | import.meta.url, 14 | ), 15 | ); 16 | case 'graphql': 17 | return new Worker( 18 | new URL('monaco-graphql/esm/graphql.worker.js', import.meta.url), 19 | ); 20 | } 21 | return new Worker( 22 | new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), 23 | ); 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/parser/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the license found in the 6 | * LICENSE file in the root directory of this source tree. 7 | * 8 | */ 9 | 10 | export { default as CharacterStream } from './CharacterStream'; 11 | 12 | export { LexRules, ParseRules, isIgnored } from './Rules'; 13 | 14 | export { butNot, list, opt, p, t } from './RuleHelpers'; 15 | 16 | export { default as onlineParser, ParserOptions } from './onlineParser'; 17 | 18 | export { 19 | runOnlineParser, 20 | type ParserCallbackFn, 21 | getTokenAtPosition, 22 | getContextAtPosition, 23 | GraphQLDocumentMode, 24 | getDocumentMode, 25 | } from './api'; 26 | 27 | export { getTypeInfo, getDefinitionState, getFieldDef } from './getTypeInfo'; 28 | 29 | export * from './types'; 30 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/star.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/stores/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | createEditorSlice, 3 | type EditorSlice, 4 | type EditorActions, 5 | type EditorProps, 6 | } from './editor'; 7 | export { 8 | createExecutionSlice, 9 | type ExecutionSlice, 10 | type ExecutionActions, 11 | type ExecutionProps, 12 | } from './execution'; 13 | export { 14 | createPluginSlice, 15 | type PluginSlice, 16 | type PluginActions, 17 | type PluginProps, 18 | } from './plugin'; 19 | export { 20 | createSchemaSlice, 21 | type SchemaSlice, 22 | type SchemaActions, 23 | type SchemaProps, 24 | } from './schema'; 25 | export { monacoStore, useMonaco } from './monaco'; 26 | export { 27 | createStorageSlice, 28 | type StorageSlice, 29 | type StorageProps, 30 | } from './storage'; 31 | export { 32 | createThemeSlice, 33 | type ThemeSlice, 34 | type ThemeActions, 35 | type ThemeProps, 36 | } from './theme'; 37 | -------------------------------------------------------------------------------- /packages/graphiql-toolkit/src/format/index.ts: -------------------------------------------------------------------------------- 1 | function stringify(obj: unknown): string { 2 | return JSON.stringify(obj, null, 2); 3 | } 4 | 5 | function formatSingleError(error: Error): Error { 6 | return { 7 | ...error, 8 | // Raise these details even if they're non-enumerable 9 | message: error.message, 10 | stack: error.stack, 11 | }; 12 | } 13 | 14 | function handleSingleError(error: unknown) { 15 | if (error instanceof Error) { 16 | return formatSingleError(error); 17 | } 18 | return error; 19 | } 20 | 21 | export function formatError(error: unknown): string { 22 | if (Array.isArray(error)) { 23 | return stringify({ 24 | errors: error.map(e => handleSingleError(e)), 25 | }); 26 | } 27 | return stringify({ errors: [handleSingleError(error)] }); 28 | } 29 | 30 | export function formatResult(result: any): string { 31 | return stringify(result); 32 | } 33 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/star-filled.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/src/utils/forEachState.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | import type { State, Maybe } from 'graphql-language-service'; 11 | 12 | // Utility for iterating through a CodeMirror parse state stack bottom-up. 13 | export default function forEachState(stack: State, fn: (state: State) => void) { 14 | const reverseStateStack = []; 15 | let state: Maybe = stack; 16 | while (state?.kind) { 17 | reverseStateStack.push(state); 18 | state = state.prevState; 19 | } 20 | for (let i = reverseStateStack.length - 1; i >= 0; i--) { 21 | fn(reverseStateStack[i]); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-code-exporter/vite.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | import packageJSON from './package.json'; 4 | import dts from 'vite-plugin-dts'; 5 | 6 | export default defineConfig({ 7 | plugins: [react(), dts({ include: ['src/**'] })], 8 | css: { 9 | transformer: 'lightningcss', 10 | }, 11 | build: { 12 | minify: false, 13 | lib: { 14 | entry: 'src/index.tsx', 15 | fileName: (_format, filePath) => `${filePath}.js`, 16 | formats: ['es'], 17 | cssFileName: 'style', 18 | }, 19 | rollupOptions: { 20 | external: [ 21 | 'react/jsx-runtime', 22 | // Exclude peer dependencies and dependencies from bundle 23 | ...Object.keys({ 24 | ...packageJSON.peerDependencies, 25 | ...packageJSON.dependencies, 26 | }), 27 | ], 28 | }, 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/docs-filled.svg: -------------------------------------------------------------------------------- 1 | 7 | 12 | 17 | 23 | 24 | -------------------------------------------------------------------------------- /scripts/set-resolution.js: -------------------------------------------------------------------------------- 1 | const { readFile, writeFile } = require('node:fs/promises'); 2 | const path = require('node:path'); 3 | 4 | async function setResolution() { 5 | const [, , tag] = process.argv; 6 | if (!tag) { 7 | throw new Error('no tag provided'); 8 | } 9 | 10 | const [package, version] = tag.split('@'); 11 | if (!package || !version) { 12 | throw new Error(`Invalid tag ${tag}`); 13 | } 14 | const pkgPath = path.resolve(path.join(process.cwd(), 'package.json')); 15 | const pkg = JSON.parse((await readFile(pkgPath, 'utf-8')).toString()); 16 | 17 | if (pkg.resolutions) { 18 | pkg.resolutions[package] = version; 19 | } else { 20 | pkg.resolutions = { [package]: version }; 21 | } 22 | await writeFile(pkgPath, JSON.stringify(pkg, null, 2), 'utf-8'); 23 | } 24 | 25 | setResolution() 26 | .then() 27 | .catch(err => { 28 | console.error(err); 29 | process.exit(1); 30 | }); 31 | -------------------------------------------------------------------------------- /packages/graphql-language-service-server/src/parsers/index.ts: -------------------------------------------------------------------------------- 1 | import { ecmaParser, tsParser } from './babel'; 2 | import { vueParser } from './vue'; 3 | import { astroParser } from './astro'; 4 | import { svelteParser } from './svelte'; 5 | import { DEFAULT_SUPPORTED_EXTENSIONS } from '../constants'; 6 | import { SourceParser } from './types'; 7 | 8 | // ensures that all of the supported extensions have parsers 9 | type ParserMap = { 10 | [K in (typeof DEFAULT_SUPPORTED_EXTENSIONS)[number]]: SourceParser; 11 | }; 12 | 13 | export const parserMap: ParserMap = { 14 | '.js': ecmaParser, 15 | '.jsx': ecmaParser, 16 | '.mjs': ecmaParser, 17 | '.es': ecmaParser, 18 | '.es6': ecmaParser, 19 | '.esm': ecmaParser, 20 | '.cjs': ecmaParser, 21 | '.ts': tsParser, 22 | '.tsx': tsParser, 23 | '.cts': tsParser, 24 | '.mts': tsParser, 25 | '.svelte': svelteParser, 26 | '.vue': vueParser, 27 | '.astro': astroParser, 28 | }; 29 | -------------------------------------------------------------------------------- /examples/graphiql-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | GraphiQL Vite Example 8 | 25 | 26 | 27 | 28 |
29 |
Loading…
30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/graphiql-vite-react-router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-graphiql-vite-react-router", 3 | "version": "1.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "sideEffects": false, 7 | "type": "module", 8 | "scripts": { 9 | "build": "react-router build", 10 | "dev": "react-router dev --port 4000", 11 | "start": "react-router-serve dist/server/index.js" 12 | }, 13 | "dependencies": { 14 | "@graphiql/react": "0.37.3", 15 | "@react-router/fs-routes": "7.6.3", 16 | "@react-router/node": "7.6.3", 17 | "@react-router/serve": "7.6.3", 18 | "graphiql": "5.2.2", 19 | "isbot": "^5", 20 | "react": "19.1.0", 21 | "react-dom": "19.1.0", 22 | "react-router": "7.6.3" 23 | }, 24 | "devDependencies": { 25 | "@react-router/dev": "7.6.3", 26 | "@types/node": "22.15.34", 27 | "@types/react": "19.1.8", 28 | "typescript": "5.8.3", 29 | "vite": "7.0.4" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/markdown-content/index.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentPropsWithoutRef, forwardRef } from 'react'; 2 | import { cn, markdown } from '../../utility'; 3 | import './index.css'; 4 | 5 | interface MarkdownContentProps 6 | extends Omit, 'children'> { 7 | children: string; 8 | onlyShowFirstChild?: boolean; 9 | type: 'description' | 'deprecation'; 10 | } 11 | 12 | export const MarkdownContent = forwardRef( 13 | ({ children, onlyShowFirstChild, type, ...props }, ref) => ( 14 |
24 | ), 25 | ); 26 | MarkdownContent.displayName = 'MarkdownContent'; 27 | -------------------------------------------------------------------------------- /working-group/minutes/2022-01-11.md: -------------------------------------------------------------------------------- 1 | # 8th GraphiQL Working Group 2 | 3 | ## Recording 4 | https://grain.co/share/recording/5c63d2aa-31be-4660-b4d8-308c55d7f89d/bM7hfzgwr12UGT3U3WC9Mw3cFbv9h8KtTahXPKI8 5 | 6 | ## Agenda 7 | 1. How to make contributions accessible 8 | 2. Decision making processes 9 | 3. Roadmap 10 | 11 | ## Notes 12 | - Contributions 13 | - Split CONTRIBUTING doc up 14 | - Layers of specialization 15 | - There are only certain layers you need to care about 16 | 17 | ## Actionable Steps 18 | - Tim: Will make sure to get a design ready asap 19 | - Once we have consent for that design, we can start implementing it and move forward with a minimal v2 alpha 20 | - For that implementation, pairing is a great opportunity, as Rikki has a lot of context to share 21 | - We'll look into theming systems, like `theme-ui` 22 | - Rikki: Will mark what is required for GraphiQL@2 with labels 23 | - Rikki: Start writing plan (which so far was mostly verbal) 24 | -------------------------------------------------------------------------------- /packages/vscode-graphql/snippets/graphql.json: -------------------------------------------------------------------------------- 1 | { 2 | ".source.graphql": { 3 | "Interface definition": { 4 | "prefix": "int", 5 | "body": ["interface ${1:IName} {", "\t$2", "}"] 6 | }, 7 | "Type definition": { 8 | "prefix": "typ", 9 | "body": [ 10 | "type ${1:TypeName} ${2:implements ${3:IName}${4: , ${5:IName}}}{", 11 | "\t$5", 12 | "}" 13 | ] 14 | }, 15 | "Input Field definition": { 16 | "prefix": "inp", 17 | "body": ["input ${1:TypeInput} {", "\t$2", "}"] 18 | }, 19 | "Enum definition": { 20 | "prefix": "enu", 21 | "body": ["enum ${1:EnumName} {", "\t$2", "}"] 22 | }, 23 | "Union definition": { 24 | "prefix": "uni", 25 | "body": ["union ${1:UnionName} = $2 | $3"] 26 | }, 27 | "Fragment definition": { 28 | "prefix": "fra", 29 | "body": ["fragment ${1:FragmentName} on ${2:TypeName} {", "\t$3", "}"] 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/history.svg: -------------------------------------------------------------------------------- 1 | 7 | 13 | 19 | 24 | 25 | -------------------------------------------------------------------------------- /packages/cm6-graphql/src/interfaces.ts: -------------------------------------------------------------------------------- 1 | import { Completion, CompletionContext } from '@codemirror/autocomplete'; 2 | import { EditorView } from '@codemirror/view'; 3 | import { GraphQLSchema } from 'graphql'; 4 | import { 5 | ContextToken, 6 | CompletionItem, 7 | AutocompleteSuggestionOptions, 8 | } from 'graphql-language-service'; 9 | import { Position } from './helpers'; 10 | export interface GqlExtensionsOptions { 11 | showErrorOnInvalidSchema?: boolean; 12 | onShowInDocs?: (field?: string, type?: string, parentType?: string) => void; 13 | onFillAllFields?: ( 14 | view: EditorView, 15 | schema: GraphQLSchema, 16 | query: string, 17 | cursor: Position, 18 | token: ContextToken, 19 | ) => void; 20 | onCompletionInfoRender?: ( 21 | gqlCompletionItem: CompletionItem, 22 | ctx: CompletionContext, 23 | item: Completion, 24 | ) => Node | Promise | null; 25 | autocompleteOptions?: AutocompleteSuggestionOptions; 26 | } 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/language-server-feature.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: LSP/CLI Feature Request 3 | about: Request a feature for the `graphql-language-service-server` and/or cli 4 | title: '[lsp-server] ' 5 | labels: [lsp-server, enhancement] 6 | --- 7 | 8 | <!-- 9 | 10 | ## Current Behavior (if applicable) 11 | 12 | 13 | ## Desired Behavior 14 | 15 | 16 | Helpful things to include: 17 | 18 | - screenshots & videos where applicable 19 | 20 | - graphql config sample if related to the problem you are hoping to solve 21 | 22 | - examples of other graphql language tools that support this, if applicable 23 | 24 | - if the feature involves adding support for a feature already in the current spec or proposed working group spec, please include a link to the applicable section of the spec 25 | 26 | ## PRs welcome! 27 | 28 | If you find a way to solve this problem by modifying the code in either the source or the distributed code, we are more than happy to accept enhancement requests as PRs! 29 | 30 | --> 31 | -------------------------------------------------------------------------------- /examples/cm6-graphql-legacy-parcel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-cm6-graphql-legacy-parcel", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "description": "GraphiQL Parcel Example", 6 | "main": "index.js", 7 | "private": true, 8 | "scripts": { 9 | "start": "parcel src/index.html -p 8080", 10 | "build": "parcel build src/index.html --public-url /" 11 | }, 12 | "browserslist": { 13 | "production": [ 14 | ">0.2%", 15 | "not dead", 16 | "not op_mini all" 17 | ], 18 | "development": [ 19 | "last 1 chrome version", 20 | "last 1 firefox version", 21 | "last 1 safari version" 22 | ] 23 | }, 24 | "dependencies": { 25 | "@codemirror/basic-setup": "^0.20.0", 26 | "@codemirror/language": "^0.20.0", 27 | "codemirror-graphql": "^2.0.2", 28 | "graphql": "^16.9.0" 29 | }, 30 | "devDependencies": { 31 | "parcel-bundler": "^1.12.4", 32 | "worker-loader": "^2.0.0", 33 | "typescript": "^4.6.3" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/temp-bin.ts: -------------------------------------------------------------------------------- 1 | #!/bin/node 2 | 'use strict'; 3 | 4 | function bright(str: string) { 5 | return `\x1b[1m${str}\x1b[0m`; 6 | } 7 | 8 | function yellow(str: string) { 9 | return `\x1b[33m${str}\x1b[0m`; 10 | } 11 | 12 | process.stderr.write(` 13 | ${bright(yellow('WARNING!'))} 14 | 15 | ${bright('graphql-language-service')} command line interface has been moved to 16 | 17 | ${bright('graphql-language-service-cli')} 18 | 19 | as of version 3.0.0 20 | 21 | 22 | ${bright('Re-Installation:')} 23 | 24 | yarn: 25 | ${bright('yarn global remove graphql-language-service')} 26 | ${bright('yarn global add graphql-language-service-cli')} 27 | 28 | npm: 29 | ${bright('npm uninstall -g graphql-language-service')} 30 | ${bright('npm i -g graphql-language-service-cli')} 31 | 32 | 33 | ${bright('New Binary Path:')} 34 | 35 | the executable will now be available as ${bright( 36 | 'graphql-lsp', 37 | )} instead of ${bright('graphql')} 38 | 39 | `); 40 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/interface/__tests__/__schema__/HoverTestSchema.graphql: -------------------------------------------------------------------------------- 1 | schema { 2 | query: Query 3 | } 4 | 5 | """ 6 | This is type documentation for Chicken 7 | """ 8 | scalar Chicken 9 | 10 | """ 11 | docs for color 12 | """ 13 | enum Color { 14 | RED 15 | GREEN 16 | BLUE 17 | } 18 | 19 | union UnionType = String | Float | Boolean 20 | 21 | interface TestInterface { 22 | # hello 23 | id: String! 24 | } 25 | 26 | """ 27 | This is type documentation for TestType 28 | """ 29 | type TestType implements TestInterface { 30 | """ 31 | This is field documentation for TestType.testField 32 | """ 33 | testField: String 34 | testDeprecatedField: Float @deprecated(reason: "deprecation reason") 35 | testEnumField: Color 36 | } 37 | 38 | type Query { 39 | """ 40 | This is field documentation for Query.thing 41 | """ 42 | thing: TestType 43 | listOfThing: [TestType!] 44 | parameterizedField(id: String!, enum: Color): TestType 45 | cluck: Chicken 46 | unionField: UnionType 47 | } 48 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/icons/reload.svg: -------------------------------------------------------------------------------- 1 | <svg 2 | height="1em" 3 | viewBox="0 0 16 16" 4 | fill="none" 5 | xmlns="http://www.w3.org/2000/svg" 6 | > 7 | <path 8 | d="M4.75 9.25H1.25V12.75" 9 | stroke="currentColor" 10 | stroke-width="1" 11 | stroke-linecap="square" 12 | /> 13 | <path 14 | d="M11.25 6.75H14.75V3.25" 15 | stroke="currentColor" 16 | stroke-width="1" 17 | stroke-linecap="square" 18 | /> 19 | <path 20 | d="M14.1036 6.65539C13.8 5.27698 13.0387 4.04193 11.9437 3.15131C10.8487 2.26069 9.48447 1.76694 8.0731 1.75043C6.66173 1.73392 5.28633 2.19563 4.17079 3.0604C3.05526 3.92516 2.26529 5.14206 1.92947 6.513" 21 | stroke="currentColor" 22 | stroke-width="1" 23 | /> 24 | <path 25 | d="M1.89635 9.34461C2.20001 10.723 2.96131 11.9581 4.05631 12.8487C5.15131 13.7393 6.51553 14.2331 7.9269 14.2496C9.33827 14.2661 10.7137 13.8044 11.8292 12.9396C12.9447 12.0748 13.7347 10.8579 14.0705 9.487" 26 | stroke="currentColor" 27 | stroke-width="1" 28 | /> 29 | </svg> 30 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-doc-explorer/src/components/default-value.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from 'react'; 2 | import { astFromValue, print, ValueNode } from 'graphql'; 3 | import type { DocExplorerFieldDef } from '../context'; 4 | import './default-value.css'; 5 | 6 | const printDefault = (ast?: ValueNode | null): string => { 7 | if (!ast) { 8 | return ''; 9 | } 10 | return print(ast); 11 | }; 12 | 13 | type DefaultValueProps = { 14 | /** 15 | * The field or argument for which to render the default value. 16 | */ 17 | field: DocExplorerFieldDef; 18 | }; 19 | 20 | export const DefaultValue: FC<DefaultValueProps> = ({ field }) => { 21 | if (!('defaultValue' in field) || field.defaultValue === undefined) { 22 | return null; 23 | } 24 | const ast = astFromValue(field.defaultValue, field.type); 25 | if (!ast) { 26 | return null; 27 | } 28 | return ( 29 | <> 30 | {' = '} 31 | <span className="graphiql-doc-explorer-default-value"> 32 | {printDefault(ast)} 33 | </span> 34 | </> 35 | ); 36 | }; 37 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test.py: -------------------------------------------------------------------------------- 1 | query = gql( 2 | """ 3 | query getContinents { 4 | continents { 5 | code 6 | name 7 | } 8 | } 9 | """ 10 | ) 11 | 12 | query = gql(''' 13 | query getContinents { 14 | continents { 15 | code 16 | name 17 | } 18 | } 19 | ''' 20 | ) 21 | 22 | query = gql( 23 | ''' 24 | query getContinents { 25 | continents { 26 | code 27 | name 28 | } 29 | } 30 | ''' 31 | ) 32 | 33 | '''#graphql 34 | query getContinents { 35 | continents { 36 | code 37 | name 38 | } 39 | } 40 | ''' 41 | 42 | query = '''#graphql query getContinents { 43 | continents { 44 | code 45 | name 46 | } 47 | }''' 48 | 49 | """#graphql 50 | query getContinents { 51 | continents { 52 | code 53 | name 54 | } 55 | } 56 | """ 57 | 58 | """#graphql query getContinents { 59 | continents { 60 | code 61 | name 62 | } 63 | }""" 64 | -------------------------------------------------------------------------------- /resources/tsconfig.base.cjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "target": "es6", 5 | "module": "commonjs", 6 | "moduleResolution": "node", 7 | "esModuleInterop": true, 8 | "resolveJsonModule": true, 9 | "sourceMap": true, 10 | "declaration": true, 11 | "declarationMap": true, 12 | "downlevelIteration": true, 13 | "removeComments": true, 14 | "strict": true, 15 | "jsx": "react", 16 | "noImplicitAny": true, 17 | "noImplicitReturns": false, 18 | "noFallthroughCasesInSwitch": true, 19 | "noUnusedParameters": true, 20 | "noUnusedLocals": true, 21 | "skipLibCheck": true, 22 | "forceConsistentCasingInFileNames": true, 23 | "lib": ["dom", "es2017", "es2018", "es2021", "esnext"], 24 | "types": ["node", "jest"], 25 | "baseUrl": "." 26 | }, 27 | "exclude": [ 28 | "**/__tests__/**", 29 | "**/dist/**.*", 30 | "**/*.spec.ts", 31 | "**/*.spec.js", 32 | "**/*-test.ts", 33 | "**/*-test.js", 34 | "**/node_modules/**" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/grammars/graphql.re.json: -------------------------------------------------------------------------------- 1 | { 2 | "scopeName": "inline.graphql.re", 3 | "injectionSelector": "L:(meta.embedded.block.reason | meta.embedded.block.ocaml | source.ocaml | source.reason -string -comment)", 4 | "patterns": [ 5 | { 6 | "contentName": "meta.embedded.block.graphql", 7 | "begin": "({)(gql)(\\|)", 8 | "end": "(\\|)(\\2)(})", 9 | "patterns": [ 10 | { 11 | "include": "source.graphql" 12 | } 13 | ] 14 | }, 15 | { 16 | "contentName": "meta.embedded.block.graphql", 17 | "begin": "(\\[%graphql)s*$", 18 | "end": "(?<=])", 19 | "patterns": [ 20 | { 21 | "begin": "^\\s*({\\|)$", 22 | "end": "^\\s*(\\|})", 23 | "patterns": [{ "include": "source.graphql" }] 24 | } 25 | ] 26 | }, 27 | { 28 | "contentName": "meta.embedded.block.graphql", 29 | "begin": "(\\[%graphql {\\|)", 30 | "end": "(\\|}( )?])", 31 | "patterns": [{ "include": "source.graphql" }] 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /examples/monaco-graphql-nextjs/README.md: -------------------------------------------------------------------------------- 1 | # Monaco GraphQL Next.js Example 2 | 3 | ## Getting Started 4 | 5 | This is a working example of `monaco-editor` and `monaco-graphql` using 6 | Next.js 15 with Turbopack. 7 | 8 | It shows how to use the latest monaco-editor with next.js and a custom 9 | webworker, without using `@monaco/react` or `monaco-editor-react`'s approach of 10 | cdn (AMD) bundles. These approaches avoid using ESM `monaco-editor` or web 11 | workers, which prevents introducing custom web workers like with 12 | `monaco-graphql`. 13 | 14 | For lazy loading, we use `next/dynamic` with `{ssr: false}`, but any 15 | similar client-side-only loading (with or without dynamic import) should be 16 | fine. For more information on loading `monaco-editor` in esm contexts, you can 17 | [read their docs](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md) 18 | 19 | This work was sponsored by [Grafbase](https://grafbase.com)! 20 | 21 | ## Setup 22 | 23 | 1. In monorepo root directory run `yarn` and `yarn build`. 24 | 1. In this directory run `yarn dev`. 25 | -------------------------------------------------------------------------------- /packages/graphql-language-service/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the license found in the 6 | * LICENSE file in the root directory of this source tree. 7 | * 8 | */ 9 | 10 | export { 11 | getFragmentDependencies, 12 | getFragmentDependenciesForAST, 13 | } from './fragmentDependencies'; 14 | 15 | export { 16 | getVariablesJSONSchema, 17 | JSONSchema6, 18 | JSONSchema6TypeName, 19 | JSONSchemaOptions, 20 | } from './getVariablesJSONSchema'; 21 | 22 | export { getASTNodeAtPosition, pointToOffset } from './getASTNodeAtPosition'; 23 | 24 | export { Position, Range, locToRange, offsetToPosition } from './Range'; 25 | 26 | export { validateWithCustomRules } from './validateWithCustomRules'; 27 | 28 | export { collectVariables, VariableToType } from './collectVariables'; 29 | 30 | export { 31 | default as getOperationFacts, 32 | getOperationASTFacts, 33 | getQueryFacts, 34 | OperationFacts, 35 | QueryFacts, 36 | } from './getOperationFacts'; 37 | -------------------------------------------------------------------------------- /packages/vscode-graphql-execution/src/helpers/extensions.ts: -------------------------------------------------------------------------------- 1 | import { CodeFileLoader } from '@graphql-tools/code-file-loader'; 2 | import { GraphQLExtensionDeclaration } from 'graphql-config'; 3 | 4 | export declare type WithList<T> = T | T[]; 5 | 6 | export interface Endpoint { 7 | url: string; 8 | headers?: Record<string, WithList<string>>; 9 | introspect?: boolean; 10 | subscription?: { 11 | url: string; 12 | // TODO: remove undefined in v5 13 | connectionParams?: Record<string, string | undefined>; 14 | }; 15 | } 16 | 17 | export type Endpoints = Record<string, Endpoint>; 18 | 19 | export const EndpointsExtension: GraphQLExtensionDeclaration = () => { 20 | return { 21 | name: 'endpoints', 22 | }; 23 | }; 24 | 25 | export const LanguageServiceExecutionExtension: GraphQLExtensionDeclaration = 26 | api => { 27 | // For schema 28 | api.loaders.schema.register(new CodeFileLoader()); 29 | // For documents 30 | api.loaders.documents.register(new CodeFileLoader()); 31 | 32 | return { name: 'languageServiceExecution' }; 33 | }; 34 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { ExecuteButton } from './execute-button'; 2 | export { ToolbarButton } from './toolbar-button'; 3 | export { ToolbarMenu } from './toolbar-menu'; 4 | 5 | export { RequestHeadersEditor as HeaderEditor } from './request-headers-editor'; 6 | export { ImagePreview } from './image-preview'; 7 | export { GraphiQLProvider, useGraphiQL, useGraphiQLActions } from './provider'; 8 | export { OperationEditor as QueryEditor } from './operation-editor'; 9 | export { ResponseEditor } from './response-editor'; 10 | export { VariablesEditor as VariableEditor } from './variables-editor'; 11 | 12 | export { Button, UnStyledButton } from './button'; 13 | export { ButtonGroup } from './button-group'; 14 | export { Dialog } from './dialog'; 15 | export { DropdownMenu } from './dropdown-menu'; 16 | export { MarkdownContent } from './markdown-content'; 17 | export { Spinner } from './spinner'; 18 | export { Tabs, Tab } from './tabs'; 19 | export { Tooltip } from './tooltip'; 20 | export { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden'; 21 | -------------------------------------------------------------------------------- /scripts/prepublish.sh: -------------------------------------------------------------------------------- 1 | # Because of a long-running npm issue (https://github.com/npm/npm/issues/3059) 2 | # prepublish runs after `npm install` and `npm pack`. 3 | # In order to only run prepublish before `npm publish`, we have to check argv. 4 | if node -e "process.exit(($npm_config_argv).original.length > 0 && ($npm_config_argv).original[0].indexOf('pu') === 0)"; then 5 | exit 0; 6 | fi 7 | 8 | # Publishing to NPM is currently supported by Travis CI, which ensures that all 9 | # tests pass first and the deployed module contains the correct file structure. 10 | # In order to prevent inadvertently circumventing this, we ensure that a CI 11 | # environment exists before continuing. 12 | if [ "$CI" != true ]; then 13 | echo "\n\n\n \033[101;30m Only CI can publish to NPM. \033[0m" 1>&2; 14 | echo " Ensure git is left is a good state by backing out any commits and deleting any tags." 1>&2; 15 | echo " Then read CONTRIBUTING.md to learn how to publish to NPM.\n\n\n" 1>&2; 16 | exit 1; 17 | fi; 18 | 19 | yarn lint && yarn build && yarn build-bundles && yarn test && yarn e2e; 20 | -------------------------------------------------------------------------------- /packages/graphiql-plugin-explorer/vite.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | import svgr from 'vite-plugin-svgr'; 4 | import dts from 'vite-plugin-dts'; 5 | import packageJSON from './package.json'; 6 | 7 | export default defineConfig({ 8 | plugins: [ 9 | react(), 10 | svgr({ 11 | svgrOptions: { 12 | titleProp: true, 13 | }, 14 | }), 15 | dts({ include: ['src/**'] }), 16 | ], 17 | css: { 18 | transformer: 'lightningcss', 19 | }, 20 | build: { 21 | minify: false, 22 | lib: { 23 | entry: 'src/index.tsx', 24 | fileName: (_format, filePath) => `${filePath}.js`, 25 | formats: ['es'], 26 | cssFileName: 'style', 27 | }, 28 | rollupOptions: { 29 | external: [ 30 | 'react/jsx-runtime', 31 | // Exclude peer dependencies and dependencies from bundle 32 | ...Object.keys({ 33 | ...packageJSON.peerDependencies, 34 | ...packageJSON.dependencies, 35 | }), 36 | ], 37 | }, 38 | }, 39 | }); 40 | -------------------------------------------------------------------------------- /packages/cm6-graphql/src/jump.ts: -------------------------------------------------------------------------------- 1 | import { EditorView } from '@codemirror/view'; 2 | import { getTokenAtPosition, getTypeInfo } from 'graphql-language-service'; 3 | import { isMetaKeyPressed, offsetToPos } from './helpers'; 4 | import { getOpts, getSchema } from './state'; 5 | 6 | export const jump = EditorView.domEventHandlers({ 7 | click(evt, view) { 8 | const schema = getSchema(view.state); 9 | if (!schema) { 10 | return; 11 | } 12 | // TODO: Set class on cm-editor when mod key is pressed, to style cursor and tokens 13 | const currentPosition = view.state.selection.main.head; 14 | const pos = offsetToPos(view.state.doc, currentPosition); 15 | const token = getTokenAtPosition(view.state.doc.toString(), pos); 16 | const tInfo = getTypeInfo(schema, token.state); 17 | 18 | const opts = getOpts(view.state); 19 | 20 | if (opts?.onShowInDocs && isMetaKeyPressed(evt)) { 21 | opts.onShowInDocs( 22 | tInfo.fieldDef?.name, 23 | tInfo.type?.toString(), 24 | tInfo.parentType?.toString(), 25 | ); 26 | } 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /packages/monaco-graphql/src/schemaLoader.ts: -------------------------------------------------------------------------------- 1 | import { buildClientSchema, buildASTSchema } from 'graphql'; 2 | import type { SchemaLoader } from './typings'; 3 | 4 | export const defaultSchemaLoader: SchemaLoader = (schemaConfig, parser) => { 5 | const { 6 | schema, 7 | documentAST, 8 | introspectionJSON, 9 | introspectionJSONString, 10 | buildSchemaOptions, 11 | documentString, 12 | } = schemaConfig; 13 | if (schema) { 14 | return schema; 15 | } 16 | if (introspectionJSONString) { 17 | const introspectionJSONResult = JSON.parse(introspectionJSONString); 18 | return buildClientSchema(introspectionJSONResult, buildSchemaOptions); 19 | } 20 | if (documentString && parser) { 21 | const docAST = parser(documentString); 22 | return buildASTSchema(docAST, buildSchemaOptions); 23 | } 24 | if (introspectionJSON) { 25 | return buildClientSchema(introspectionJSON, buildSchemaOptions); 26 | } 27 | if (documentAST) { 28 | return buildASTSchema(documentAST, buildSchemaOptions); 29 | } 30 | throw new Error('No schema supplied'); 31 | }; 32 | -------------------------------------------------------------------------------- /examples/monaco-graphql-webpack/src/index.html.ejs: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en" dir="ltr"> 3 | <head> 4 | <meta charset="UTF-8" /> 5 | <meta 6 | name="viewport" 7 | content="width=device-width, initial-scale=1, shrink-to-fit=no" 8 | /> 9 | <title>Monaco Example! 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
26 |
27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /packages/codemirror-graphql/src/utils/runParser.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 GraphQL Contributors 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | import { 11 | CharacterStream, 12 | onlineParser, 13 | ParserOptions, 14 | State, 15 | } from 'graphql-language-service'; 16 | 17 | export default function runParser( 18 | sourceText: string, 19 | parserOptions: ParserOptions, 20 | callbackFn: (stream: CharacterStream, state: State, style: string) => void, 21 | ) { 22 | const parser = onlineParser(parserOptions); 23 | const state = parser.startState(); 24 | const lines = sourceText.split('\n'); 25 | 26 | for (const line of lines) { 27 | const stream = new CharacterStream(line); 28 | while (!stream.eol()) { 29 | const style = parser.token(stream, state); 30 | callbackFn(stream, state, style); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *~ 3 | .*.haste_cache.* 4 | .DS_Store 5 | .secrets 6 | *.log 7 | 8 | .yarn/* 9 | !.yarn/releases/* 10 | !.yarn/plugins/* 11 | 12 | node_modules/ 13 | coverage/ 14 | .nyc_output 15 | dist/ 16 | esm/ 17 | out/ 18 | *.vsix 19 | *.tsbuildinfo 20 | 21 | yarn-1.18.0.js 22 | *.orig 23 | .idea/ 24 | 25 | # Local Netlify folder 26 | .netlify/ 27 | 28 | examples/*/yarn.lock 29 | package-lock.json 30 | .eslintcache 31 | .cspellcache 32 | 33 | vite.config.d.ts 34 | vite.config.js 35 | tsconfig.vitest-temp.json 36 | 37 | .next/ 38 | .turbo/ 39 | types/ 40 | packages/codemirror-graphql/cm6-legacy/ 41 | packages/codemirror-graphql/results/ 42 | packages/codemirror-graphql/utils/ 43 | packages/codemirror-graphql/variables/ 44 | packages/codemirror-graphql/*.js 45 | packages/codemirror-graphql/*.d.ts 46 | packages/codemirror-graphql/*.map 47 | !packages/codemirror-graphql/*.config.js 48 | 49 | packages/graphiql/cypress/screenshots/ 50 | packages/graphiql/cypress/downloads/ 51 | packages/graphiql/cypress/videos/ 52 | packages/graphiql/typedoc/ 53 | packages/graphiql/webpack/ 54 | 55 | .react-router/ 56 | -------------------------------------------------------------------------------- /packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md: -------------------------------------------------------------------------------- 1 | # Python 2 | 3 | ```Python 4 | 5 | query = gql( 6 | """ 7 | query getContinents { 8 | continents { 9 | code 10 | name 11 | } 12 | } 13 | """ 14 | ) 15 | 16 | query = gql(''' 17 | query getContinents { 18 | continents { 19 | code 20 | name 21 | } 22 | } 23 | ''' 24 | ) 25 | 26 | query = gql( 27 | ''' 28 | query getContinents { 29 | continents { 30 | code 31 | name 32 | } 33 | } 34 | ''' 35 | ) 36 | 37 | '''#graphql 38 | query getContinents { 39 | continents { 40 | code 41 | name 42 | } 43 | } 44 | ''' 45 | 46 | query = '''#graphql query getContinents { 47 | continents { 48 | code 49 | name 50 | } 51 | }''' 52 | 53 | """#graphql 54 | query getContinents { 55 | continents { 56 | code 57 | name 58 | } 59 | } 60 | """ 61 | 62 | """#graphql query getContinents { 63 | continents { 64 | code 65 | name 66 | } 67 | }""" 68 | ``` 69 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/setup-workers/vite.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable import-x/default -- false positive */ 2 | import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker.js?worker'; 3 | import GraphQLWorker from 'monaco-graphql/esm/graphql.worker.js?worker'; 4 | import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker'; 5 | 6 | /** 7 | * Setup Monaco Editor workers for Vite. 8 | * Vite needs to know ahead of time that you are loading a web worker. 9 | * Vite doesn’t support instantiating web workers directly from bare module imports like: 10 | * 11 | * ```js 12 | * new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker.js', import.meta.url)) 13 | * ``` 14 | */ 15 | globalThis.MonacoEnvironment = { 16 | getWorker(_workerId: string, label: string) { 17 | // eslint-disable-next-line no-console 18 | console.info('setup-workers/vite', { label }); 19 | switch (label) { 20 | case 'json': 21 | return new JsonWorker(); 22 | case 'graphql': 23 | return new GraphQLWorker(); 24 | } 25 | return new EditorWorker(); 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /wg.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('wgutils').Config} */ 4 | const config = { 5 | name: 'GraphiQL WG', 6 | repoUrl: 'https://github.com/graphql/graphiql', 7 | repoSubpath: 'working-group', 8 | videoConferenceDetails: `https://zoom.us/j/760146252 9 | - _Password:_ graphiql`, 10 | liveNotesUrl: 11 | 'https://docs.google.com/document/d/1AjbUDhfQV2TXn13RZqrmL7PfETTslzkbVZGtNl_SLcU/edit?usp=sharing', 12 | timezone: 'UTC', 13 | frequency: 'monthly', 14 | nth: 2, 15 | weekday: 'Tu', // M, Tu, W, Th, F, Sa, Su 16 | time: '16:00-17:00', // 24-hour clock, range 17 | attendeesTemplate: `\ 18 | | Name | GitHub | Organization | Location | 19 | | :------------------------- | :------------------- | :----------------- | :----------------------- | 20 | `, 21 | agendasFolder: 'agendas', 22 | dateAndTimeLocations: 'p1=224&p2=24&p3=179&p4=136&p5=37&p6=239&p7=101&p8=152', 23 | description: `\ 24 | To read about the purpose of this subcommittee, please see [the README](../../README.md). 25 | `, 26 | }; 27 | 28 | module.exports = config; 29 | -------------------------------------------------------------------------------- /packages/graphiql-react/src/components/button/index.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentPropsWithoutRef, forwardRef } from 'react'; 2 | import { cn } from '../../utility'; 3 | import './index.css'; 4 | 5 | type UnStyledButtonProps = ComponentPropsWithoutRef<'button'>; 6 | 7 | export const UnStyledButton = forwardRef< 8 | HTMLButtonElement, 9 | UnStyledButtonProps 10 | >((props, ref) => ( 11 |