Showing preview only (3,447K chars total). Download the full file or copy to clipboard to get everything.
Repository: graphql/graphiql
Branch: main
Commit: 01723a406a01
Files: 735
Total size: 3.2 MB
Directory structure:
gitextract_nfz5esf2/
├── .browserslistrc
├── .changeset/
│ ├── README.md
│ └── config.json
├── .codecov.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── config.yml
│ │ ├── graphiql-bug.yml
│ │ ├── graphiql-feature.md
│ │ ├── language-server-bug.yml
│ │ └── language-server-feature.md
│ ├── ISSUE_TEMPLATE.md
│ └── workflows/
│ ├── main-test.yml
│ ├── pr-graphql-compat-check.yml
│ ├── pr.yml
│ └── release.yml
├── .gitignore
├── .mailmap
├── .npmignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .vscode/
│ ├── extensions.json
│ ├── launch.json
│ ├── settings.json
│ └── tasks.json
├── .yarnrc.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── DEVELOPMENT.md
├── LICENSE
├── README.md
├── RELEASING.md
├── SECURITY.md
├── babel.config.js
├── cspell.json
├── docs/
│ ├── migration/
│ │ ├── graphiql-2.0.0.md
│ │ ├── graphiql-4.0.0.md
│ │ └── graphiql-5.0.0.md
│ └── security/
│ └── 2021-introspection-schema-xss.md
├── examples/
│ ├── cm6-graphql-legacy-parcel/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ └── sample-query.ts
│ │ └── tsconfig.json
│ ├── cm6-graphql-parcel/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── sample-query.ts
│ │ │ └── testSchema.ts
│ │ └── tsconfig.json
│ ├── graphiql-cdn/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.html
│ │ └── package.json
│ ├── graphiql-create-react-app/
│ │ └── README.md
│ ├── graphiql-nextjs/
│ │ ├── README.md
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── app/
│ │ │ ├── globals.css
│ │ │ ├── graphiql.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.ts
│ │ └── tsconfig.json
│ ├── graphiql-parcel/
│ │ └── README.md
│ ├── graphiql-vite/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.jsx
│ │ │ └── index.jsx
│ │ └── vite.config.mjs
│ ├── graphiql-vite-react-router/
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── root.tsx
│ │ │ ├── routes/
│ │ │ │ └── _index/
│ │ │ │ ├── create-fetcher.ts
│ │ │ │ ├── globals.css
│ │ │ │ ├── graphiql.client.tsx
│ │ │ │ └── route.ts
│ │ │ └── routes.ts
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── react-router.config.ts
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── graphiql-webpack/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── index.html.ejs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ ├── select-server-plugin.css
│ │ │ ├── select-server-plugin.jsx
│ │ │ └── snippets.js
│ │ └── webpack.config.js
│ ├── monaco-graphql-nextjs/
│ │ ├── README.md
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── env.d.ts
│ │ │ │ ├── globals.css
│ │ │ │ ├── layout.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── constants.ts
│ │ │ └── editor.tsx
│ │ └── tsconfig.json
│ ├── monaco-graphql-react-vite/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── env.d.ts
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ └── monaco-graphql-webpack/
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── babel.config.js
│ ├── package.json
│ ├── src/
│ │ ├── editors.ts
│ │ ├── index.html.ejs
│ │ ├── index.ts
│ │ ├── schema.ts
│ │ └── style.css
│ ├── tsconfig.json
│ └── webpack.config.js
├── functions/
│ ├── graphql.ts
│ └── package.json
├── jest.config.base.js
├── jest.config.js
├── js-green-licenses.json
├── netlify.toml
├── package.json
├── packages/
│ ├── cm6-graphql/
│ │ ├── .gitignore
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── cases.txt
│ │ │ ├── test.spec.ts
│ │ │ └── types.txt
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── commands.ts
│ │ │ ├── completions.ts
│ │ │ ├── graphql.ts
│ │ │ ├── helpers.ts
│ │ │ ├── index.ts
│ │ │ ├── interfaces.ts
│ │ │ ├── jump.ts
│ │ │ ├── language.ts
│ │ │ ├── lint.ts
│ │ │ ├── state.ts
│ │ │ ├── syntax.grammar
│ │ │ └── syntax.grammar.d.ts
│ │ ├── tsconfig.esm.json
│ │ └── tsconfig.json
│ ├── codemirror-graphql/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── package.json
│ │ ├── resources/
│ │ │ └── checkgit.sh
│ │ ├── setup-files.ts
│ │ ├── src/
│ │ │ ├── __tests__/
│ │ │ │ ├── hint.test.ts
│ │ │ │ ├── kitchen-sink.graphql
│ │ │ │ ├── lint.test.ts
│ │ │ │ ├── mode.test.ts
│ │ │ │ ├── schema-kitchen-sink.graphql
│ │ │ │ └── testSchema.ts
│ │ │ ├── cm6-legacy/
│ │ │ │ └── mode.ts
│ │ │ ├── hint.ts
│ │ │ ├── index.d.ts
│ │ │ ├── info.ts
│ │ │ ├── jump.ts
│ │ │ ├── lint.ts
│ │ │ ├── mode.ts
│ │ │ ├── results/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── mode.test.ts
│ │ │ │ └── mode.ts
│ │ │ ├── utils/
│ │ │ │ ├── SchemaReference.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── jsonParse.test.ts
│ │ │ │ ├── collectVariables.ts
│ │ │ │ ├── forEachState.ts
│ │ │ │ ├── getTypeInfo.ts
│ │ │ │ ├── hintList.ts
│ │ │ │ ├── info-addon.ts
│ │ │ │ ├── jsonParse.ts
│ │ │ │ ├── jump-addon.ts
│ │ │ │ ├── mode-factory.ts
│ │ │ │ ├── mode-indent.ts
│ │ │ │ └── runParser.ts
│ │ │ └── variables/
│ │ │ ├── __tests__/
│ │ │ │ ├── hint.test.ts
│ │ │ │ ├── lint.test.ts
│ │ │ │ └── mode.test.ts
│ │ │ ├── hint.ts
│ │ │ ├── lint.ts
│ │ │ └── mode.ts
│ │ ├── tsconfig.esm.json
│ │ ├── tsconfig.json
│ │ └── vitest.config.mts
│ ├── graphiql/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __mocks__/
│ │ │ ├── monaco-editor.ts
│ │ │ └── zustand.ts
│ │ ├── cypress/
│ │ │ ├── e2e/
│ │ │ │ ├── docs.cy.ts
│ │ │ │ ├── errors.cy.ts
│ │ │ │ ├── graphql-ws.cy.ts
│ │ │ │ ├── headers.cy.ts
│ │ │ │ ├── history.cy.ts
│ │ │ │ ├── incremental-delivery.cy.ts
│ │ │ │ ├── init.cy.ts
│ │ │ │ ├── keyboard.cy.ts
│ │ │ │ ├── lint.cy.ts
│ │ │ │ ├── prettify.cy.ts
│ │ │ │ ├── tabs.cy.ts
│ │ │ │ └── theme.cy.ts
│ │ │ ├── env.d.ts
│ │ │ ├── fixtures/
│ │ │ │ ├── bad-schema.json
│ │ │ │ ├── example.json
│ │ │ │ └── fixtures.ts
│ │ │ ├── plugins/
│ │ │ │ └── index.ts
│ │ │ ├── support/
│ │ │ │ ├── commands.ts
│ │ │ │ └── e2e.ts
│ │ │ └── tsconfig.json
│ │ ├── cypress.config.ts
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── setup-files.ts
│ │ ├── setup-window.ts
│ │ ├── src/
│ │ │ ├── GraphiQL.spec.tsx
│ │ │ ├── GraphiQL.tsx
│ │ │ ├── cdn.ts
│ │ │ ├── e2e.ts
│ │ │ ├── graphiql.css
│ │ │ ├── index.ts
│ │ │ ├── setup-workers/
│ │ │ │ ├── esm.sh.ts
│ │ │ │ ├── vite.ts
│ │ │ │ └── webpack.ts
│ │ │ ├── style.css
│ │ │ └── ui/
│ │ │ ├── footer.tsx
│ │ │ ├── index.ts
│ │ │ ├── logo.tsx
│ │ │ ├── short-keys.tsx
│ │ │ ├── sidebar.tsx
│ │ │ └── toolbar.tsx
│ │ ├── test/
│ │ │ ├── README.md
│ │ │ ├── e2e-server.js
│ │ │ ├── execute.js
│ │ │ ├── package.json
│ │ │ └── schema.js
│ │ ├── tsconfig.json
│ │ ├── vite.config.mts
│ │ └── vitest.config.mts
│ ├── graphiql-plugin-code-exporter/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── example/
│ │ │ └── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── graphiql-code-exporter.d.ts
│ │ │ ├── index.css
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.mts
│ ├── graphiql-plugin-doc-explorer/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── setup-files.ts
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── doc-explorer.spec.tsx
│ │ │ │ │ ├── field-documentation.spec.tsx
│ │ │ │ │ ├── fixtures.ts
│ │ │ │ │ ├── test-utils.ts
│ │ │ │ │ ├── type-documentation.spec.tsx
│ │ │ │ │ └── type-link.spec.tsx
│ │ │ │ ├── argument.css
│ │ │ │ ├── argument.tsx
│ │ │ │ ├── default-value.css
│ │ │ │ ├── default-value.tsx
│ │ │ │ ├── deprecation-reason.css
│ │ │ │ ├── deprecation-reason.tsx
│ │ │ │ ├── directive.css
│ │ │ │ ├── directive.tsx
│ │ │ │ ├── doc-explorer.css
│ │ │ │ ├── doc-explorer.tsx
│ │ │ │ ├── field-documentation.tsx
│ │ │ │ ├── field-link.css
│ │ │ │ ├── field-link.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── schema-documentation.css
│ │ │ │ ├── schema-documentation.tsx
│ │ │ │ ├── search.css
│ │ │ │ ├── search.tsx
│ │ │ │ ├── section.css
│ │ │ │ ├── section.tsx
│ │ │ │ ├── type-documentation.css
│ │ │ │ ├── type-documentation.tsx
│ │ │ │ ├── type-link.css
│ │ │ │ ├── type-link.tsx
│ │ │ │ └── utils.tsx
│ │ │ ├── context.tsx
│ │ │ ├── deprecated.ts
│ │ │ ├── index.ts
│ │ │ └── schema-reference.ts
│ │ ├── tsconfig.json
│ │ ├── vite.config.mts
│ │ └── vitest.config.mts
│ ├── graphiql-plugin-explorer/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── graphiql-explorer.d.ts
│ │ │ ├── index.css
│ │ │ ├── index.tsx
│ │ │ └── vite-env.d.ts
│ │ ├── tsconfig.json
│ │ └── vite.config.mts
│ ├── graphiql-plugin-history/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── setup-files.ts
│ │ ├── src/
│ │ │ ├── __tests__/
│ │ │ │ └── components.spec.tsx
│ │ │ ├── components.tsx
│ │ │ ├── context.ts
│ │ │ ├── deprecated.ts
│ │ │ ├── index.ts
│ │ │ └── style.css
│ │ ├── tsconfig.json
│ │ ├── vite.config.mts
│ │ └── vitest.config.mts
│ ├── graphiql-react/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── font/
│ │ │ ├── fira-code.css
│ │ │ └── roboto.css
│ │ ├── package.json
│ │ ├── setup-files.ts
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── button/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── button-group/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── dialog/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── dropdown-menu/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── execute-button/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── image-preview.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── markdown-content/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── operation-editor.tsx
│ │ │ │ ├── provider.tsx
│ │ │ │ ├── request-headers-editor.tsx
│ │ │ │ ├── response-editor.tsx
│ │ │ │ ├── spinner/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── tabs/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── toolbar-button/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── toolbar-menu/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── tooltip/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ └── variables-editor.tsx
│ │ │ ├── constants.ts
│ │ │ ├── deprecated.ts
│ │ │ ├── env.d.ts
│ │ │ ├── icons/
│ │ │ │ └── index.tsx
│ │ │ ├── index.ts
│ │ │ ├── setup-workers/
│ │ │ │ ├── esm.sh.ts
│ │ │ │ ├── vite.ts
│ │ │ │ └── webpack.ts
│ │ │ ├── stores/
│ │ │ │ ├── editor.ts
│ │ │ │ ├── execution.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── monaco.ts
│ │ │ │ ├── plugin.ts
│ │ │ │ ├── schema.ts
│ │ │ │ ├── storage.ts
│ │ │ │ └── theme.ts
│ │ │ ├── style/
│ │ │ │ ├── auto-insertion.css
│ │ │ │ ├── editor.css
│ │ │ │ └── root.css
│ │ │ ├── types.test-d.ts
│ │ │ ├── types.ts
│ │ │ ├── utility/
│ │ │ │ ├── cleanup-disposables.ts
│ │ │ │ ├── create-bounded-use-store.ts
│ │ │ │ ├── create-editor.ts
│ │ │ │ ├── debounce.ts
│ │ │ │ ├── hooks.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── jsonc.ts
│ │ │ │ ├── markdown.ts
│ │ │ │ ├── monaco-ssr.ts
│ │ │ │ ├── pick.ts
│ │ │ │ ├── resize.ts
│ │ │ │ ├── tabs.spec.ts
│ │ │ │ ├── tabs.ts
│ │ │ │ ├── whitespace.spec.ts
│ │ │ │ └── whitespace.ts
│ │ │ └── vite-env.d.ts
│ │ ├── tsconfig.json
│ │ ├── vite.config.mts
│ │ └── vitest.config.mts
│ ├── graphiql-toolkit/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── docs/
│ │ │ └── create-fetcher.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── async-helpers/
│ │ │ │ └── index.ts
│ │ │ ├── create-fetcher/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── buildFetcher.spec.ts
│ │ │ │ │ └── lib.spec.ts
│ │ │ │ ├── createFetcher.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── lib.ts
│ │ │ │ └── types.ts
│ │ │ ├── format/
│ │ │ │ └── index.ts
│ │ │ ├── graphql-helpers/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __queries__/
│ │ │ │ │ │ ├── mergedQuery.graphql
│ │ │ │ │ │ ├── mergedQueryWithSchema.graphql
│ │ │ │ │ │ └── testQuery.graphql
│ │ │ │ │ ├── __schema__/
│ │ │ │ │ │ └── sorareSchema.graphql
│ │ │ │ │ └── merge-ast.spec.ts
│ │ │ │ ├── auto-complete.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── merge-ast.ts
│ │ │ │ └── operation-name.ts
│ │ │ ├── index.ts
│ │ │ └── storage/
│ │ │ ├── __tests__/
│ │ │ │ ├── base.spec.ts
│ │ │ │ └── query.spec.ts
│ │ │ ├── base.ts
│ │ │ ├── custom.ts
│ │ │ ├── history.ts
│ │ │ ├── index.ts
│ │ │ └── query.ts
│ │ ├── tsconfig.json
│ │ ├── tsup.config.ts
│ │ └── vitest.config.mts
│ ├── graphql-language-service/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── benchmark/
│ │ │ ├── fixtures/
│ │ │ │ ├── github.graphql
│ │ │ │ └── kitchen-sink.graphql
│ │ │ └── index.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── interface/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __queries__/
│ │ │ │ │ │ └── testQuery.graphql
│ │ │ │ │ ├── __schema__/
│ │ │ │ │ │ ├── HoverTestSchema.graphql
│ │ │ │ │ │ └── StarWarsSchema.graphql
│ │ │ │ │ ├── getAutocompleteSuggestions.test.ts
│ │ │ │ │ ├── getDefinition.test.ts
│ │ │ │ │ ├── getDiagnostics.test.ts
│ │ │ │ │ ├── getHoverInformation.test.ts
│ │ │ │ │ ├── getOutline.test.ts
│ │ │ │ │ ├── kitchen-sink.graphql
│ │ │ │ │ └── queries/
│ │ │ │ │ ├── definitionQuery.graphql
│ │ │ │ │ └── testQuery.graphql
│ │ │ │ ├── autocompleteUtils.ts
│ │ │ │ ├── getAutocompleteSuggestions.ts
│ │ │ │ ├── getDefinition.ts
│ │ │ │ ├── getDiagnostics.ts
│ │ │ │ ├── getHoverInformation.ts
│ │ │ │ ├── getOutline.ts
│ │ │ │ └── index.ts
│ │ │ ├── parser/
│ │ │ │ ├── CharacterStream.ts
│ │ │ │ ├── RuleHelpers.ts
│ │ │ │ ├── Rules.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── CharacterStream.test.ts
│ │ │ │ │ ├── OnlineParser.test.ts
│ │ │ │ │ ├── OnlineParserUtils.ts
│ │ │ │ │ └── RuleHelpers.test.ts
│ │ │ │ ├── api.ts
│ │ │ │ ├── getTypeInfo.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── onlineParser.ts
│ │ │ │ └── types.ts
│ │ │ ├── temp-bin.ts
│ │ │ ├── types.ts
│ │ │ └── utils/
│ │ │ ├── Range.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── Range.test.ts
│ │ │ │ ├── __fixtures__/
│ │ │ │ │ ├── file.js
│ │ │ │ │ ├── invalid.fake
│ │ │ │ │ ├── noextension
│ │ │ │ │ └── package.json
│ │ │ │ ├── __schema__/
│ │ │ │ │ ├── RecursiveSchema.graphql
│ │ │ │ │ └── StarWarsSchema.graphql
│ │ │ │ ├── collectVariables.test.ts
│ │ │ │ ├── getASTNodeAtPosition.test.ts
│ │ │ │ ├── getVariablesJSONSchema.test.ts
│ │ │ │ └── validateWithCustomRules.test.ts
│ │ │ ├── collectVariables.ts
│ │ │ ├── fragmentDependencies.ts
│ │ │ ├── getASTNodeAtPosition.ts
│ │ │ ├── getOperationFacts.ts
│ │ │ ├── getVariablesJSONSchema.ts
│ │ │ ├── index.ts
│ │ │ └── validateWithCustomRules.ts
│ │ ├── tsconfig.esm.json
│ │ ├── tsconfig.json
│ │ └── vitest.config.mts
│ ├── graphql-language-service-cli/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── graphql.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __tests__/
│ │ │ │ ├── client.test.ts
│ │ │ │ └── index.test.ts
│ │ │ ├── cli.ts
│ │ │ └── client.ts
│ │ ├── tsconfig.esm.json
│ │ ├── tsconfig.json
│ │ └── vitest.config.mts
│ ├── graphql-language-service-server/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── jest.config.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── GraphQLCache.ts
│ │ │ ├── GraphQLLanguageService.ts
│ │ │ ├── Logger.ts
│ │ │ ├── MessageProcessor.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── .graphqlrc.yml
│ │ │ │ ├── GraphQLCache.test.ts
│ │ │ │ ├── GraphQLLanguageService.test.ts
│ │ │ │ ├── Logger.test.ts
│ │ │ │ ├── MessageProcessor.spec.ts
│ │ │ │ ├── MessageProcessor.test.ts
│ │ │ │ ├── __queries__/
│ │ │ │ │ ├── test.graphql
│ │ │ │ │ ├── test2.graphql
│ │ │ │ │ ├── test3.graphql
│ │ │ │ │ └── testFragment.graphql
│ │ │ │ ├── __schema__/
│ │ │ │ │ └── StarWarsSchema.graphql
│ │ │ │ ├── __utils__/
│ │ │ │ │ ├── MockProject.ts
│ │ │ │ │ ├── runServer.js
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── findGraphQLTags.test.ts
│ │ │ │ ├── parseDocument.test.ts
│ │ │ │ ├── startServer.spec.ts
│ │ │ │ └── startServer.test.ts
│ │ │ ├── common.ts
│ │ │ ├── constants.ts
│ │ │ ├── findGraphQLTags.ts
│ │ │ ├── index.ts
│ │ │ ├── parseDocument.ts
│ │ │ ├── parsers/
│ │ │ │ ├── astro.ts
│ │ │ │ ├── babel.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── svelte.ts
│ │ │ │ ├── types.ts
│ │ │ │ └── vue.ts
│ │ │ ├── startServer.ts
│ │ │ ├── stringToHash.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.esm.json
│ │ └── tsconfig.json
│ ├── monaco-graphql/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── GraphQLWorker.ts
│ │ │ ├── LanguageService.ts
│ │ │ ├── api.ts
│ │ │ ├── full.ts
│ │ │ ├── graphql.worker.ts
│ │ │ ├── graphqlMode.ts
│ │ │ ├── initialize.ts
│ │ │ ├── initializeMode.ts
│ │ │ ├── languageFeatures.ts
│ │ │ ├── lite.ts
│ │ │ ├── monaco-editor.ts
│ │ │ ├── monaco.contribution.ts
│ │ │ ├── schemaLoader.ts
│ │ │ ├── typings/
│ │ │ │ ├── index.ts
│ │ │ │ ├── monaco-editor.d.ts
│ │ │ │ └── picomatch-browser.d.ts
│ │ │ ├── utils.ts
│ │ │ └── workerManager.ts
│ │ ├── test/
│ │ │ └── monaco-editor.test.ts
│ │ ├── tsconfig.esm.json
│ │ ├── tsconfig.json
│ │ └── vitest.config.mts
│ ├── vscode-graphql/
│ │ ├── .vscodeignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── esbuild.js
│ │ ├── package.json
│ │ ├── snippets/
│ │ │ └── graphql.json
│ │ ├── src/
│ │ │ ├── apis/
│ │ │ │ └── statusBar.ts
│ │ │ ├── extension.ts
│ │ │ ├── serverIpc/
│ │ │ │ └── index.ts
│ │ │ └── serverStdio/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── vscode-graphql-execution/
│ │ ├── .vscodeignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── esbuild.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── extension.ts
│ │ │ ├── helpers/
│ │ │ │ ├── extensions.ts
│ │ │ │ ├── network.ts
│ │ │ │ └── source.ts
│ │ │ └── providers/
│ │ │ ├── exec-codelens.ts
│ │ │ └── exec-content.ts
│ │ └── tsconfig.json
│ └── vscode-graphql-syntax/
│ ├── .vscodeignore
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── grammars/
│ │ ├── graphql.js.json
│ │ ├── graphql.json
│ │ ├── graphql.markdown.codeblock.json
│ │ ├── graphql.php.json
│ │ ├── graphql.python.json
│ │ ├── graphql.re.json
│ │ ├── graphql.rescript.json
│ │ └── graphql.scala.json
│ ├── language/
│ │ └── language-configuration.json
│ ├── package.json
│ ├── tests/
│ │ ├── __fixtures__/
│ │ │ ├── StarWarsSchema.graphql
│ │ │ ├── kitchen-sink.graphql
│ │ │ ├── query.graphql
│ │ │ ├── test-js.md
│ │ │ ├── test-py.md
│ │ │ ├── test-sfc-comp.vue
│ │ │ ├── test-sfc.vue
│ │ │ ├── test.astro
│ │ │ ├── test.js
│ │ │ ├── test.md
│ │ │ ├── test.php
│ │ │ ├── test.py
│ │ │ ├── test.re
│ │ │ ├── test.scala
│ │ │ ├── test.svelte
│ │ │ └── test.ts
│ │ ├── __snapshots__/
│ │ │ ├── graphql-grammar.spec.ts.snap
│ │ │ ├── js-grammar.spec.ts.snap
│ │ │ ├── markdown-grammar.spec.ts.snap
│ │ │ ├── php-grammar.spec.ts.snap
│ │ │ ├── python-grammar.spec.ts.snap
│ │ │ ├── reason-grammar.spec.ts.snap
│ │ │ └── scala-grammar.spec.ts.snap
│ │ ├── __utilities__/
│ │ │ ├── serializer.ts
│ │ │ └── utilities.ts
│ │ ├── graphql-grammar.spec.ts
│ │ ├── js-grammar.spec.ts
│ │ ├── markdown-grammar.spec.ts
│ │ ├── php-grammar.spec.ts
│ │ ├── python-grammar.spec.ts
│ │ ├── reason-grammar.spec.ts
│ │ └── scala-grammar.spec.ts
│ └── vitest.config.mts
├── resources/
│ ├── README.md
│ ├── babel.config.js
│ ├── custom-words.txt
│ ├── patch-monaco-editor-type.mjs
│ ├── patches/
│ │ └── @changesets+assemble-release-plan+6.0.3.patch
│ ├── tsconfig.base.cjs.json
│ ├── tsconfig.base.esm.json
│ ├── tsconfig.build.cjs.json
│ └── tsconfig.build.esm.json
├── scripts/
│ ├── canary-release.js
│ ├── prepublish.sh
│ ├── renameFileExtensions.js
│ └── set-resolution.js
├── tsconfig.json
├── turbo.json
├── typedoc.json
├── wg.config.js
└── working-group/
├── README.md
├── agendas/
│ ├── 2019/
│ │ ├── 2019-05-14.md
│ │ ├── 2019-06-18.md
│ │ └── 2019-08-21.md
│ ├── 2020/
│ │ ├── 2020-03-10.md
│ │ ├── 2020-04-14.md
│ │ └── 2020-05-21.md
│ ├── 2021/
│ │ └── 2021-10-12.md
│ ├── 2022/
│ │ ├── 2022-01-11.md
│ │ ├── 2022-02-22-monaco.md
│ │ ├── 2022-03-08.md
│ │ ├── 2022-04-12.md
│ │ ├── 2022-05-10.md
│ │ ├── 2022-06-14.md
│ │ ├── 2022-07-12.md
│ │ ├── 2022-08-09.md
│ │ ├── 2022-09-13.md
│ │ ├── 2022-10-11.md
│ │ ├── 2022-11-08.md
│ │ └── 2022-12-13.md
│ ├── 2023/
│ │ ├── 2023-01-10.md
│ │ ├── 2023-02-14.md
│ │ ├── 2023-04-11.md
│ │ ├── 2023-05-09.md
│ │ ├── 2023-06-13.md
│ │ ├── 2023-07-11.md
│ │ ├── 2023-08-08.md
│ │ ├── 2023-09-12.md
│ │ ├── 2023-10-10.md
│ │ ├── 2023-11-14.md
│ │ └── 2023-12-12.md
│ ├── 2024/
│ │ ├── 08-Aug/
│ │ │ └── 13-graphiql-wg-august-2024.md
│ │ ├── 09-Sep/
│ │ │ └── 10-graphiql-wg-september-2024.md
│ │ ├── 10-Oct/
│ │ │ └── 08-graphiql-wg-october-2024.md
│ │ ├── 11-Nov/
│ │ │ └── 12-graphiql-wg-november-2024.md
│ │ └── 12-Dec/
│ │ └── 10-graphiql-wg-december-2024.md
│ ├── 2025/
│ │ ├── 01-Jan/
│ │ │ └── 14-graphiql-wg-january-2025.md
│ │ ├── 02-Feb/
│ │ │ └── 11-graphiql-wg-february-2025.md
│ │ ├── 03-Mar/
│ │ │ └── 11-graphiql-wg-march-2025.md
│ │ ├── 04-Apr/
│ │ │ └── 08-graphiql-wg-april-2025.md
│ │ ├── 05-May/
│ │ │ └── 13-graphiql-wg-may-2025.md
│ │ ├── 06-Jun/
│ │ │ └── 10-graphiql-wg-june-2025.md
│ │ ├── 07-Jul/
│ │ │ └── 08-graphiql-wg-july-2025.md
│ │ ├── 08-Aug/
│ │ │ └── 12-graphiql-wg-august-2025.md
│ │ ├── 09-Sep/
│ │ │ └── 09-graphiql-wg-september-2025.md
│ │ ├── 10-Oct/
│ │ │ └── 14-graphiql-wg-october-2025.md
│ │ ├── 11-Nov/
│ │ │ └── 11-graphiql-wg-november-2025.md
│ │ └── 12-Dec/
│ │ └── 09-graphiql-wg-december-2025.md
│ └── 2026/
│ ├── 01-Jan/
│ │ └── 13-graphiql-wg-january-2026.md
│ ├── 02-Feb/
│ │ └── 10-graphiql-wg-february-2026.md
│ ├── 03-Mar/
│ │ └── 10-graphiql-wg-march-2026.md
│ ├── 04-Apr/
│ │ └── 14-graphiql-wg-april-2026.md
│ ├── 05-May/
│ │ └── 12-graphiql-wg-may-2026.md
│ └── 06-Jun/
│ └── 09-graphiql-wg-june-2026.md
├── minutes/
│ ├── 2019-05-14.md
│ ├── 2019-06-18.md
│ ├── 2019-08-21.md
│ ├── 2020-03-10.md
│ ├── 2021-10-12.md
│ └── 2022-01-11.md
└── proposals/
└── .gitkeep
================================================
FILE CONTENTS
================================================
================================================
FILE: .browserslistrc
================================================
last 2 versions
Firefox ESR
not dead
not IE 11
not ios 10
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@2.0.1/schema.json",
"changelog": ["@changesets/changelog-github", { "repo": "graphql/graphiql" }],
"commit": false,
"linked": [],
"access": "public",
"baseBranch": "main",
"ignore": [
"example-graphiql-vite",
"example-graphiql-vite-react-router",
"example-graphiql-webpack",
"example-monaco-graphql-nextjs",
"example-monaco-graphql-react-vite",
"example-monaco-graphql-webpack"
],
"updateInternalDependencies": "patch",
"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
"onlyUpdatePeerDependentsWhenOutOfRange": true
}
}
================================================
FILE: .codecov.yml
================================================
codecov:
notify:
require_ci_to_pass: yes
coverage:
precision: 2
round: down
range: '30...100'
status:
project:
default:
target: 50% # the minimum required coverage value
threshold: .1% # the leniency in hitting the target, allows 1% drop
patch:
default:
informational: true
comment: # this is a top-level key
layout: 'reach, diff, flags, files'
behavior: default
require_changes: true # if true: only post the comment if coverage changes
================================================
FILE: .editorconfig
================================================
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
================================================
FILE: .eslintignore
================================================
.changeset/*.md
# ignore working-group dir markdown so it's easier for people to edit from the UI
working-group/
packages/codemirror-graphql/src/__tests__/schema-kitchen-sink.graphql
CHANGELOG.md
**/CHANGELOG.md
packages/vscode-graphql-syntax/tests/__fixtures__/
packages/graphql-language-service-server/src/__tests__/parseDocument.test.ts
================================================
FILE: .eslintrc.js
================================================
/**
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE file in the root directory of this source tree.
*
*/
const RESTRICTED_IMPORTS = [
{ name: 'graphql/type', message: 'use `graphql`' },
{ name: 'graphql/language', message: 'use `graphql`' },
{ name: 'graphql/type/introspection', message: 'use `graphql`' },
{ name: 'graphql/type/definition', message: 'use `graphql`' },
{ name: 'graphql/type/directives', message: 'use `graphql`' },
{ name: 'graphql/version', message: 'use `graphql`' },
{
name: 'monaco-editor',
message:
'`monaco-editor` imports all languages; use `monaco-graphql/esm/monaco-editor` instead to import only `json` and `graphql` languages',
allowTypeImports: true,
},
];
module.exports = {
root: true,
reportUnusedDisableDirectives: true,
ignorePatterns: [
'react-app-env.d.ts',
'next-env.d.ts',
'changesets/**/*.md',
'**/CHANGELOG.md',
'functions/*',
'packages/vscode-graphql-syntax/tests/__fixtures__/*',
// symlinks
'packages/graphiql-react/__mocks__/monaco-editor.ts',
'packages/graphiql-plugin-doc-explorer/__mocks__/zustand.ts',
'packages/graphiql-plugin-doc-explorer/__mocks__/monaco-editor.ts',
'packages/graphiql-plugin-history/__mocks__/zustand.ts',
'packages/graphiql-plugin-history/__mocks__/monaco-editor.ts',
],
overrides: [
{
// Rules for all code files
files: ['**/*.{js,jsx,ts,tsx,mts,cts}'],
parserOptions: {
ecmaVersion: 6,
},
settings: {
react: {
version: 'detect',
},
},
// https://github.com/sindresorhus/globals/blob/master/globals.json
env: {
atomtest: true,
es6: true,
node: true,
browser: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import-x/recommended',
'plugin:import-x/typescript',
'plugin:react/recommended',
'plugin:react-hooks/recommended-legacy',
'plugin:react/jsx-runtime',
'prettier',
],
plugins: ['promise', 'sonarjs', 'unicorn', '@shopify'],
globals: {
atom: false,
document: false,
window: false,
monaco: true,
Map: true,
Set: true,
},
rules: {
'@shopify/prefer-early-return': ['error', { maximumStatements: 2 }],
'@shopify/prefer-class-properties': 'off', // enable after https://github.com/Shopify/web-configs/issues/387 will be fixed
'sonarjs/no-inverted-boolean-check': 'error',
// Possible Errors (http://eslint.org/docs/rules/#possible-errors)
'no-console': 'error',
'no-constant-binary-expression': 'error',
'no-empty': ['error', { allowEmptyCatch: true }],
'no-extra-parens': 'off',
'no-template-curly-in-string': 'off',
'valid-jsdoc': 'off',
// Best Practices (http://eslint.org/docs/rules/#best-practices)
'accessor-pairs': 'error',
'array-callback-return': 'off',
'block-scoped-var': 'off',
'class-methods-use-this': 'off',
complexity: 'off',
'consistent-return': 'off',
curly: 'error',
'default-case': 'off',
'dot-notation': 'error',
eqeqeq: ['error', 'allow-null'],
'guard-for-in': 'off',
'no-alert': 'error',
'no-await-in-loop': 'error',
'no-caller': 'error',
'no-case-declarations': 'off',
'no-div-regex': 'error',
'no-else-return': ['error', { allowElseIf: false }],
'no-eq-null': 'off',
'no-eval': 'error',
'no-extend-native': 'error',
'no-extra-bind': 'error',
'no-extra-label': 'error',
'no-floating-decimal': 'off', // prettier --list-different
'no-implicit-coercion': 'error',
'no-implicit-globals': 'off',
'no-implied-eval': 'error',
'no-invalid-this': 'off',
'no-iterator': 'error',
'no-labels': 'error',
'no-lone-blocks': 'error',
'no-loop-func': 'off',
'no-magic-numbers': 'off',
'no-multi-str': 'off',
'no-new-func': 'error',
'no-new-wrappers': 'error',
'no-new': 'error',
'no-octal-escape': 'error',
'no-param-reassign': 'error',
'no-proto': 'error',
'no-restricted-properties': [
'error',
{
object: 'window',
property: 'localStorage',
message: 'Use `localStorage` instead',
},
{
object: 'window',
property: 'location',
message: 'Use `location` instead',
},
{
object: 'window',
property: 'navigator',
message: 'Use `navigator` instead',
},
{
object: 'window',
property: 'getComputedStyle',
message: 'Use `getComputedStyle` instead',
},
{
object: 'self',
message: 'Use `globalThis` instead',
},
],
'no-return-assign': 'error',
'no-return-await': 'error',
'no-script-url': 'error',
'no-self-compare': 'error',
'no-sequences': 'error',
'no-throw-literal': 'error',
'no-unmodified-loop-condition': 'off',
'no-useless-call': 'error',
'no-useless-concat': 'error',
'no-useless-return': 'off',
'no-warning-comments': 'off',
radix: 'error',
'require-await': 'off',
'vars-on-top': 'off',
yoda: 'error',
'unicorn/prefer-string-slice': 'error',
'sonarjs/no-identical-functions': 'error',
'sonarjs/no-unused-collection': 'error',
'sonarjs/no-extra-arguments': 'error',
'unicorn/no-useless-undefined': 'error',
'no-var': 'error',
// Strict Mode (http://eslint.org/docs/rules/#strict-mode)
strict: 'off',
// Variables (http://eslint.org/docs/rules/#variables)
'init-declarations': 'off',
'no-catch-shadow': 'error',
'no-label-var': 'error',
'no-restricted-globals': ['error', 'stop'],
'no-shadow': 'off',
'@typescript-eslint/no-shadow': 'error',
'no-undef-init': 'off',
'no-undefined': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
varsIgnorePattern: '^(React|_)', // allow underscores in destructuring
argsIgnorePattern: '^_',
},
],
'no-use-before-define': 'off',
'unicorn/no-useless-switch-case': 'error',
// Node.js and CommonJS (http://eslint.org/docs/rules/#nodejs-and-commonjs)
'callback-return': 'off',
'global-require': 'off',
'handle-callback-err': 'error',
'no-mixed-requires': 'error',
'no-new-require': 'error',
'no-path-concat': 'error',
'no-process-env': 'off',
'no-process-exit': 'off',
'no-restricted-modules': 'off',
'no-sync': 'off',
// Stylistic Issues (http://eslint.org/docs/rules/#stylistic-issues)
camelcase: 'off',
'capitalized-comments': 'off',
'consistent-this': 'off',
'func-name-matching': 'off',
'func-names': 'off',
'func-style': 'off',
'id-blacklist': 'off',
'id-length': 'off',
'id-match': 'off',
indent: 'off',
'line-comment-position': 'off',
'linebreak-style': 'off', // prettier --list-different
'lines-around-comment': 'off',
'lines-around-directive': 'off',
'max-depth': 'off',
'max-lines': 'off',
'max-nested-callbacks': 'off',
'max-params': 'off',
'max-statements-per-line': 'off',
'max-statements': 'off',
'multiline-ternary': 'off',
'new-cap': 'off',
'newline-after-var': 'off',
'newline-before-return': 'off',
'newline-per-chained-call': 'off',
'no-bitwise': 'error',
'no-continue': 'off',
'no-inline-comments': 'off',
'no-mixed-operators': 'off',
'no-negated-condition': 'off',
'unicorn/no-negated-condition': 'error',
'no-nested-ternary': 'off',
'no-new-object': 'error',
'no-plusplus': 'off',
'no-restricted-syntax': [
'error',
{
// ❌ useMemo(…, [])
selector:
'CallExpression[callee.name=useMemo][arguments.1.type=ArrayExpression][arguments.1.elements.length=0]',
message:
"`useMemo` with an empty dependency array can't provide a stable reference, use `useRef` instead.",
},
{
// ❌ event.keyCode
selector:
'MemberExpression > .property[type=Identifier][name=keyCode]',
message: 'Use `.key` instead of `.keyCode`',
},
],
'no-ternary': 'off',
'no-underscore-dangle': 'off',
'no-unneeded-ternary': 'off',
'object-curly-newline': 'off',
'object-property-newline': 'off',
'one-var-declaration-per-line': 'off',
'one-var': ['error', 'never'],
'operator-assignment': 'error',
'operator-linebreak': 'off',
'require-jsdoc': 'off',
'sort-keys': 'off',
'sort-vars': 'off',
'spaced-comment': ['error', 'always', { markers: ['/'] }],
'wrap-regex': 'off',
'unicorn/prefer-dom-node-remove': 'error',
// ECMAScript 6 (http://eslint.org/docs/rules/#ecmascript-6)
'arrow-body-style': 'off',
'@typescript-eslint/no-restricted-imports': [
'error',
...RESTRICTED_IMPORTS,
],
'no-useless-computed-key': 'error',
'no-useless-constructor': 'off',
'no-useless-rename': 'error',
'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
'object-shorthand': [
'error',
'always',
{ avoidExplicitReturnArrows: true },
],
'prefer-numeric-literals': 'off',
'prefer-template': 'off',
'sort-imports': 'off',
'symbol-description': 'error',
'sonarjs/no-ignored-return': 'error',
'unicorn/no-array-push-push': 'error',
'import-x/no-extraneous-dependencies': 'error',
'import-x/no-duplicates': 'error',
'import-x/no-named-as-default': 'error',
'prefer-object-spread': 'error',
// React rules
'react/no-unused-state': 'error',
'react/jsx-curly-brace-presence': 'error',
'react/jsx-boolean-value': 'error',
'react/jsx-handler-names': 'error',
'react/jsx-pascal-case': 'error',
'react/no-did-mount-set-state': 'error',
'react/no-did-update-set-state': 'error',
'react/prop-types': 'off',
'react/prefer-es6-class': 'error',
'react/prefer-stateless-function': 'error',
'react/self-closing-comp': 'error',
'react/jsx-no-useless-fragment': 'error',
'react/jsx-filename-extension': [
'error',
{ extensions: ['.tsx', '.jsx'], allow: 'as-needed' },
],
'unicorn/no-typeof-undefined': 'error',
'unicorn/prefer-at': 'error',
'unicorn/consistent-destructuring': 'error',
'prefer-destructuring': [
'error',
{ VariableDeclarator: { object: true } },
],
'promise/no-multiple-resolved': 'error',
'unicorn/no-zero-fractions': 'error',
'sonarjs/no-redundant-jump': 'error',
'unicorn/prefer-logical-operator-over-ternary': 'error',
'logical-assignment-operators': [
'error',
'always',
{ enforceForIfStatements: true },
],
'unicorn/prefer-regexp-test': 'error',
'unicorn/prefer-export-from': ['error', { ignoreUsedVariables: true }],
'unicorn/throw-new-error': 'error',
'unicorn/prefer-includes': 'error',
'unicorn/no-array-for-each': 'error',
'unicorn/prefer-dom-node-append': 'error',
'no-lonely-if': 'error',
'unicorn/no-lonely-if': 'error',
'unicorn/prefer-optional-catch-binding': 'error',
'unicorn/prefer-array-flat-map': 'error',
'no-unused-expressions': 'off',
'@typescript-eslint/no-unused-expressions': 'error',
'sonarjs/no-small-switch': 'error',
'sonarjs/no-duplicated-branches': 'error',
'sonarjs/prefer-promise-shorthand': 'error',
'sonarjs/no-dead-store': 'error',
'sonarjs/void-use': 'error',
'unicorn/prefer-node-protocol': 'error',
'import-x/no-unresolved': [
'error',
{
ignore: [
'^node:',
'\\.svg\\?react$',
'vitest/config',
'./vite.config.mjs',
],
},
],
'no-extra-boolean-cast': [
'error',
{ enforceForInnerExpressions: true },
],
'unicorn/no-length-as-slice-end': 'error',
'unicorn/prefer-string-replace-all': 'error',
'unicorn/prefer-array-some': 'error',
// '@typescript-eslint/prefer-for-of': 'error', TODO
'unicorn/no-hex-escape': 'off', // TODO: enable
// doesn't catch a lot of cases; we use ESLint builtin `no-restricted-syntax` to forbid `.keyCode`
'unicorn/prefer-keyboard-event-key': 'off',
'unicorn/prefer-switch': 'error',
'unicorn/prefer-dom-node-text-content': 'error',
quotes: ['error', 'single', { avoidEscape: true }], // Matches Prettier, but also replaces backticks with single quotes
// TODO: Fix all errors for the following rules included in recommended config
'@typescript-eslint/no-require-imports': 'off',
'import-x/no-named-as-default-member': 'off',
},
},
{
files: ['packages/{monaco-graphql,graphiql*}/**/*.{ts,tsx,mts,cts}'],
excludedFiles: ['packages/graphiql-toolkit/**/*.{ts,tsx}'],
rules: {
'@typescript-eslint/no-unnecessary-condition': 'error',
},
},
{
// Rules that requires type information
files: ['**/*.{ts,tsx,mts,cts}'],
excludedFiles: ['**/*.{md,mdx}/*.{ts,tsx}'],
// extends: ['plugin:@typescript-eslint/recommended-type-checked'],
rules: {
// '@typescript-eslint/no-redundant-type-constituents': 'error',
'@typescript-eslint/prefer-optional-chain': 'error',
'@typescript-eslint/no-unnecessary-type-assertion': 'error',
'@typescript-eslint/no-floating-promises': 'error',
'@typescript-eslint/non-nullable-type-assertion-style': 'error',
'@typescript-eslint/consistent-type-assertions': 'error',
'@typescript-eslint/no-duplicate-type-constituents': 'error',
'@typescript-eslint/no-unnecessary-type-conversion': 'error',
// '@typescript-eslint/await-thenable': 'error', // TODO
// TODO: Fix all errors for the following rules included in recommended config
'@typescript-eslint/no-deprecated': 'off',
'@typescript-eslint/no-unsafe-function-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/triple-slash-reference': 'off',
'@typescript-eslint/no-namespace': 'off',
},
parserOptions: {
projectService: {
allowDefaultProject: [
'examples/monaco-graphql-react-vite/vite.config.ts',
'packages/{codemirror-graphql,graphiql-toolkit,graphql-language-service-cli,graphql-language-service,monaco-graphql,vscode-graphql-syntax}/vitest.config.mts',
'packages/cm6-graphql/__tests__/test.spec.ts',
'packages/graphiql/cypress.config.ts',
'packages/vscode-graphql-syntax/tests/*.spec.ts',
'packages/graphql-language-service-cli/src/__tests__/*.test.ts',
'packages/monaco-graphql/test/monaco-editor.test.ts',
'packages/codemirror-graphql/setup-files.ts',
'packages/codemirror-graphql/src/__tests__/testSchema.ts',
'packages/codemirror-graphql/src/__tests__/*.test.ts',
'packages/codemirror-graphql/src/{variables,utils,results}/__tests__/*.test.ts',
'packages/graphql-language-service/benchmark/index.ts',
'packages/graphql-language-service/src/{utils,parser,interface}/__tests__/*.test.ts',
'packages/graphql-language-service/src/parser/__tests__/OnlineParserUtils.ts',
'packages/graphql-language-service-server/src/__tests__/*.{spec,test}.ts',
'packages/graphql-language-service-server/src/__tests__/__utils__/utils.ts',
'packages/graphql-language-service-server/src/__tests__/__utils__/MockProject.ts',
'packages/vscode-graphql-syntax/tests/__utilities__/serializer.ts',
'packages/vscode-graphql-syntax/tests/__utilities__/utilities.ts',
],
maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 100,
},
},
},
// Cypress plugin, global, etc., only for cypress directory
// https://github.com/cypress-io/eslint-plugin-cypress
// cypress clashes with jest expect()
{
files: ['**/cypress/**'],
extends: 'plugin:cypress/recommended',
rules: {
// Because innerText doesn't return hidden elements and returns new line (\n) characters
'unicorn/prefer-dom-node-text-content': 'off',
},
},
{
// Rules for unit tests
files: [
'**/__{tests,mocks}__/*.{js,jsx,ts,tsx}',
'**/*.spec.{ts,js.jsx.tsx}',
],
extends: ['plugin:jest/recommended'],
rules: {
'jest/no-conditional-expect': 'off',
'jest/expect-expect': ['error', { assertFunctionNames: ['expect*'] }],
},
},
{
// Resources are typically our helper scripts; make life easier there
files: ['resources/**', '**/resources/**', 'scripts/**'],
rules: {
'no-console': 'off',
},
},
{
// Disable rules for examples folder
files: ['examples/**'],
rules: {
'no-console': 'off',
'no-new': 'off',
'no-alert': 'off',
'import-x/no-unresolved': 'off',
},
},
{
// Rule for ignoring imported dependencies from tests files
files: [
'**/__tests__/**',
'webpack.config.js',
'**/tests/**',
'test.config.js',
'vitest.config.mts',
'setup-files.ts',
],
rules: {
'import-x/no-extraneous-dependencies': 'off',
},
},
{
// Rule for allowing import `vscode` package
files: [
'packages/vscode-graphql/**',
'packages/vscode-graphql-execution/**',
],
rules: {
'import-x/no-unresolved': ['error', { ignore: ['^node:', 'vscode'] }],
},
},
{
// Rule to prefer await to then without React packages because it's ugly to have `async IIFE` inside `useEffect`
files: ['packages/**'],
excludedFiles: ['packages/graphiql/**', 'packages/graphiql-react/**'],
rules: {
'promise/prefer-await-to-then': 'error',
},
},
{
files: ['packages/{graphiql-react,graphiql}/**/*.{ts,tsx}'],
rules: {
'@typescript-eslint/no-restricted-imports': [
'error',
...RESTRICTED_IMPORTS,
{
name: 'react',
importNames: ['memo', 'useCallback', 'useMemo'],
},
],
'react-hooks/react-compiler': 'error',
'@typescript-eslint/no-deprecated': 'error',
},
},
{
// Monaco-GraphQL rules
files: ['packages/monaco-graphql/**'],
rules: {
'@typescript-eslint/no-restricted-imports': [
'error',
...RESTRICTED_IMPORTS.filter(({ name }) => name !== 'monaco-editor'),
{
name: 'monaco-editor',
message:
'`monaco-editor` imports all languages; use locale `monaco-editor.ts` instead to import only `json` and `graphql` languages',
},
],
},
},
{
// Parsing Markdown/MDX
files: ['**/*.{md,mdx}'],
parser: 'eslint-mdx',
plugins: ['mdx'],
processor: 'mdx/remark',
settings: {
'mdx/code-blocks': true,
},
},
{
files: ['**/*.d.ts'],
rules: {
'no-var': 'off',
},
},
{
// ❗ALWAYS LAST
// Rules for codeblocks inside Markdown/MDX
files: ['**/*.{md,mdx}/*.{js,jsx,ts,tsx}'],
rules: {
'import-x/no-extraneous-dependencies': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'import-x/no-unresolved': 'off',
'no-console': 'off',
'no-undef': 'off',
'react/jsx-no-undef': 'off',
'react-hooks/rules-of-hooks': 'off',
'sonarjs/no-dead-store': 'off',
'@typescript-eslint/no-restricted-imports': 'off',
'@typescript-eslint/no-unnecessary-condition': 'off',
'@typescript-eslint/no-deprecated': 'off',
},
},
],
};
================================================
FILE: .gitattributes
================================================
# Set the default behavior, in case people don't have core.autocrlf set.
* text=auto
*.js text eol=lf
*.jsx text eol=lf
*.ts text eol=lf
*.tsx text eol=lf
*.json text eol=lf
*.md text eol=lf
*.html text eol=lf
*.css text eol=lf
*.sh text eol=lf
*.yml text eol=lf
.yarn/releases/*.cjs export-ignore binary linguist-generated
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: true
contact_links:
- name: '📚 Support/Q&A'
url: https://github.com/graphql/graphiql/discussions/categories/q-a-support
about: >-
Some questions are already answered in our github discussions Q&A section If you don't find an answer, [create a support ticket](ttps://github.com/graphql/graphiql/discussions/new?category=q-a-support)
- name: '💬 `graphiql` Discord Support'
url: https://discord.gg/NP5vbPeUFp
about: '`graphiql` Discord Support Channel'
- name: '💬 `vscode-graphql` Discord Support'
url: https://discord.gg/bHrQtxGNzQ
about: '`vscode-graphql` Discord Support Channel'
- name: '💬 GraphQL LSP & CLI Discord Support'
url: https://discord.gg/wkQCKwazxj
about: >-
GraphQL LSP (Language Server Protocol) Server Discord Support Channel For `graphql-language-service-server` and/or `graphql-language-service-cli`
- name: '💬 `monaco-graphql` Discord Support'
url: https://discord.gg/r4BxrAG6fN
about: '`monaco-graphql` Discord Support Channel'
- name: '💬 `codedemirror-graphql` Discord Support'
url: https://discord.gg/cffZwk8NJW
about: '`codemirror-graphql` Discord Support Channel'
================================================
FILE: .github/ISSUE_TEMPLATE/graphiql-bug.yml
================================================
name: GraphiQL 🐞 Bug
description: File a bug with the graphiql web editor
title: '[graphiql] <title>'
labels: [bug, needs triage, graphiql]
body:
- type: checkboxes
attributes:
label: Is there an existing issue for this?
description: Please search to see if an issue already exists for the bug you encountered.
options:
- label: I have searched the existing issues
required: true
- type: textarea
attributes:
label: Current Behavior
description: A concise description of what you're experiencing.
validations:
required: false
- type: textarea
attributes:
label: Expected Behavior
description: A concise description of what you expected to happen.
validations:
required: false
- type: textarea
attributes:
label: Steps To Reproduce
description: Steps to reproduce the behavior.
placeholder: |
1. In this environment...
2. With this config...
3. Do '...' in [repro codesandbox/stackblitz]()
4. See error...
validations:
required: false
- type: textarea
attributes:
label: Environment
description: |
examples:
* **GraphiQL Version**: latest
* **OS**: Ubuntu 20.04
* **Browser**: Chrome 106
* **Bundler**: vite x.y
* **`react` Version**: 18
* **`graphql` Version**: 16
value: |
* GraphiQL Version:
* OS:
* Browser:
* Bundler:
* `react` Version:
* `graphql` Version:
validations:
required: false
- type: textarea
attributes:
label: Anything else?
description: |
Links? References? Anything that will give us more context about the issue you are encountering!
Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
validations:
required: false
================================================
FILE: .github/ISSUE_TEMPLATE/graphiql-feature.md
================================================
---
name: GraphiQL Feature Request
about: Request a feature for the graphiql web editor
title: '[graphiql] <title>'
labels: [graphiql, enhancement]
---
<!--
- Some features can be built with the new sidebar plugins
We encourage exploring the plugin API prior to opening a feature request:
SDK hooks
https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html
Sidebar Plugins
api:
https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html#graphiqlplugin-2
examples:
https://github.com/graphql/graphiql/tree/main/packages/graphiql-plugin-explorer
In the event that the plugin API doesn't allow you to build a feature, it
may be that expanding the plugin API *itself* is the best place for the
feature to be introduced!
Consider this flexible solution when opening a new feature request
since it also unlocks new opportunities.
- Prior to opening a feature request, please search for existing requests.
If you find an existing feature that matches your needs, use the 👍 emote
to show your support for it. If the specifics of your use case are not
covered in the existing feature request but the idea seems similar enough,
please take the time to *add new conversation* which helps the feature's
design evolve.
- If you do not find any other existing requests for the feature you desire,
you should open a new feature request. Please take the time to help us
understand your use-case as precisely as possible. Be sure to demonstrate
that you've evaluated existing features and found them unsuitable and were
unable to implement the functionality with the plugin API.
Be flexible in your design and consider slight variations which might
necessitate a specific API design. We also hope you'll be willing to engage
in the on-going design discussion prior to opening a pull-request.
borrowed from the apollo server template
-->
================================================
FILE: .github/ISSUE_TEMPLATE/language-server-bug.yml
================================================
name: Generic IDE (LSP Server) Bug 🐞
description: File any non syntax highlighting related bugs in vscode or any IDE lsp runtime (vim, intellij, emacs, sublime, etc), with the `graphql-language-service-server` / `graphql-lsp` CLI
title: '[lsp-server] 🐞 <title>'
labels: [bug, lsp-server]
body:
- type: checkboxes
attributes:
label: Is there an existing issue for this?
description: Please search to see if an issue already exists for the bug you encountered.
options:
- label: I have searched the existing issues
required: true
- type: textarea
attributes:
label: Current Behavior
description: A concise description of the issue you're experiencing.
validations:
required: false
- type: textarea
attributes:
label: Expected Behavior
description: A concise description of what you expected to happen.
validations:
required: false
- type: textarea
attributes:
label: Steps To Reproduce
description: Steps to reproduce the behavior.
placeholder: |
1. In this environment...
2. With this (redacted) graphql config with [filename]...
3. Do '...' with [lsp client]
4. See errors in output channel, etc...
validations:
required: false
- type: textarea
attributes:
label: Environment
description: |
examples:
* **LSP Server Version**: latest
* **OS**: Ubuntu 20.04
* **LSP Client**: vscode (`vscode-graphql`, etc), intellij-lsp, nvim coc, etc
value: |
* LSP Server Version:
* OS:
* LSP Client:
validations:
required: false
- type: textarea
attributes:
label: Anything else?
description: |
Links? References? Anything that will give us more context about the issue you are encountering
Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
================================================
FILE: .github/ISSUE_TEMPLATE/language-server-feature.md
================================================
---
name: LSP/CLI Feature Request
about: Request a feature for the `graphql-language-service-server` and/or cli
title: '[lsp-server] <title>'
labels: [lsp-server, enhancement]
---
<!--
## Current Behavior (if applicable)
## Desired Behavior
Helpful things to include:
- screenshots & videos where applicable
- graphql config sample if related to the problem you are hoping to solve
- examples of other graphql language tools that support this, if applicable
- 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
## PRs welcome!
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!
-->
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
<!--
1. Have you tried searching issues and discussions to see if your question was already answered?
2. If you want to fix a bug or request a feature, PRs are always welcome!
-->
================================================
FILE: .github/workflows/main-test.yml
================================================
name: Main Tests
# report coverage on main for codecov baseline
on:
push:
branches: [main]
jobs:
install:
name: Install
runs-on: ubuntu-latest
steps:
- name: Cancel Previous Runs
uses: styfle/cancel-workflow-action@0.12.1
with:
access_token: ${{ github.token }}
- name: Checkout Code
uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
cache: yarn
- name: Cache node modules
id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- uses: actions/cache@v4
with:
path: |
~/.cache/Cypress
key: cypress-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- run: yarn install --frozen-lockfile --immutable
jest:
name: Jest Unit Tests
runs-on: ubuntu-latest
needs: [install]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- run: yarn test --coverage
- uses: codecov/codecov-action@v4
with:
token: ${{ secrets.CODECOV_TOKEN }}
files: coverage/lcov.info
fail_ci_if_error: true
verbose: true
================================================
FILE: .github/workflows/pr-graphql-compat-check.yml
================================================
name: Build & Test PR w/ GraphQL Regressions
on:
push:
# only on merge to main.
# it's rare that this workflow would
# show us an error, but when it does it's important!
branches: [main]
# don't run this regression suite if we don't need to
paths-ignore:
- '**.md'
- 'examples'
- '!examples/monaco-graphql-webpack'
# TODO: test matrix?
permissions:
contents: read # to fetch code (actions/checkout)
jobs:
build:
name: Build & Test
runs-on: ubuntu-20.04
strategy:
matrix:
release:
# test against the latest 16.x version, which might be newer than what we have
- '^16'
# test against the oldest version we support
- '^16.0.0'
# test against the latest alpha
- '^17.0.0-alpha'
steps:
- name: Checkout Code
uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
cache: yarn
- name: Cache node modules
uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{hashFiles('yarn.lock')}}
restore-keys: node_modules-
- name: Force GraphQL ${{ matrix.release }} solution
run: yarn repo:resolve graphql@${{ matrix.release }}
- run: yarn install --frozen-lockfile --immutable
- name: Unit Tests
run: yarn test:ci
- name: Cypress
run: yarn e2e
================================================
FILE: .github/workflows/pr.yml
================================================
name: PR
on:
pull_request:
types: [opened, synchronize]
jobs:
install:
name: Install
runs-on: ubuntu-latest
steps:
- name: Cancel Previous Runs
uses: styfle/cancel-workflow-action@0.12.1
with:
access_token: ${{ github.token }}
- name: Checkout Code
uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
cache: yarn
- name: Cache node modules
id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- uses: actions/cache@v4
with:
path: |
~/.cache/Cypress
key: cypress-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- run: yarn install --frozen-lockfile --immutable
build:
name: Build
runs-on: ubuntu-latest
needs: [install]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- run: yarn build
- uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
cspell:
name: CSpell
runs-on: ubuntu-latest
needs: [install]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- run: yarn lint-cspell
prettier:
name: Prettier
runs-on: ubuntu-latest
needs: [install]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- run: yarn pretty-check
jest:
name: Jest Unit & Integration Tests
runs-on: ubuntu-latest
needs: [install]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- run: yarn test --coverage
- uses: codecov/codecov-action@v4
with:
token: ${{ secrets.CODECOV_TOKEN }}
files: coverage/lcov.info
fail_ci_if_error: true
verbose: true
vitest:
name: Vitest Unit Tests
runs-on: ubuntu-latest
needs: [build]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
- run: yarn vitest
eslint:
name: ESLint
runs-on: ubuntu-latest
needs: [build]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
- run: yarn eslint
types-check:
name: Types Check
runs-on: ubuntu-latest
needs: [build]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
- run: yarn types:check
e2e:
name: Cypress
runs-on: ubuntu-latest
needs: [build]
steps:
- uses: actions/checkout@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
- uses: actions/cache@v4
with:
path: |
~/.cache/Cypress
key: cypress-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- name: Cypress run
uses: cypress-io/github-action@v6
with:
install: false
command: yarn e2e
- uses: actions/upload-artifact@v4
if: failure()
with:
name: cypress-screenshots
path: packages/graphiql/cypress/screenshots
if-no-files-found: ignore
- uses: actions/upload-artifact@v4
if: failure()
with:
name: cypress-videos
path: packages/graphiql/cypress/videos
if-no-files-found: ignore
canary:
name: Canary
runs-on: ubuntu-latest
# ensure the basic checks pass before running the canary
needs: [build, jest, eslint, vitest, e2e]
if: github.event.pull_request.head.repo.full_name == github.repository
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
- name: Setup NPM credentials
run: echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" >> ~/.npmrc
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Release Canary
id: canary
uses: 'kamilkisiela/release-canary@master'
with:
npm-token: ${{ secrets.NPM_TOKEN }}
npm-script: 'yarn release:canary'
changesets: true
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Publish a message
if: steps.canary.outputs.released == 'true'
uses: 'dotansimha/pr-comment@master'
with:
commentKey: canary
message: |
The latest changes of this PR are available as canary in npm (based on the declared `changesets`):
```
${{ steps.canary.outputs.changesetsPublishedPackages}}
```
bot-token: ${{ secrets.GITHUB_TOKEN }}
bot: 'github-actions[bot]'
github-token: ${{ secrets.GITHUB_TOKEN }}
- name: Publish an empty message
if: steps.canary.outputs.released == 'false'
uses: 'dotansimha/pr-comment@master'
with:
commentKey: canary
message: |
The latest changes of this PR are not available as canary, since there are no linked `changesets` for this PR.
bot-token: ${{ secrets.GITHUB_TOKEN }}
bot: 'github-actions[bot]'
github-token: ${{ secrets.GITHUB_TOKEN }}
license-check:
name: Check Licenses
runs-on: ubuntu-latest
needs: [install]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- id: cache-modules
uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- run: yarn install --frozen-lockfile --immutable
- name: License Check
run: yarn license-check
env:
BUILD-CACHE-LIST: |
packages/**/dist/**/*
packages/**/cjs/**/*
packages/**/esm/**/*
packages/**/types/**/*
packages/codemirror-graphql/*.js*
packages/codemirror-graphql/*.d.ts
packages/codemirror-graphql/cm6-legacy/**/*
packages/codemirror-graphql/results/**/*
packages/codemirror-graphql/variables/**/*
packages/codemirror-graphql/utils/**/*
!**/node_modules
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
branches: [main, graphiql-5]
permissions: {}
jobs:
release:
permissions:
contents: write # for changesets/action to git push
environment: deploy
name: Release
runs-on: ubuntu-latest
steps:
- name: Cancel Previous Runs
uses: styfle/cancel-workflow-action@0.12.1
with:
access_token: ${{ github.token }}
- name: Checkout Code
uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: actions/setup-node@v4
with:
cache: yarn
- name: Cache node modules
uses: actions/cache@v4
id: cache-modules
with:
path: node_modules
key: node_modules-${{hashFiles('yarn.lock')}}
restore-keys: node_modules-
- run: yarn install --frozen-lockfile --immutable
- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@v1
with:
version: yarn ci:version
# This expects you to have a script called release which does a build for your packages and calls changeset publish
publish: yarn release
env:
# only use GH token here, because GITHUB_TOKEN is no longer allowed to create PRs
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
# for vscode marketplace, see https://github.com/microsoft/vscode-vsce/blob/194d59b975523696362ead891dc0f3ddd277b3bd/README.md#linux
VSCE_PAT: ${{ secrets.VSCE_PAT }}
# for ovsx, see https://github.com/eclipse/openvsx/blob/master/cli/README.md#publish-extensions
OVSX_PAT: ${{ secrets.OPEN_VSX_TOKEN }}
================================================
FILE: .gitignore
================================================
*.swp
*~
.*.haste_cache.*
.DS_Store
.secrets
*.log
.yarn/*
!.yarn/releases/*
!.yarn/plugins/*
node_modules/
coverage/
.nyc_output
dist/
esm/
out/
*.vsix
*.tsbuildinfo
yarn-1.18.0.js
*.orig
.idea/
# Local Netlify folder
.netlify/
examples/*/yarn.lock
package-lock.json
.eslintcache
.cspellcache
vite.config.d.ts
vite.config.js
tsconfig.vitest-temp.json
.next/
.turbo/
types/
packages/codemirror-graphql/cm6-legacy/
packages/codemirror-graphql/results/
packages/codemirror-graphql/utils/
packages/codemirror-graphql/variables/
packages/codemirror-graphql/*.js
packages/codemirror-graphql/*.d.ts
packages/codemirror-graphql/*.map
!packages/codemirror-graphql/*.config.js
packages/graphiql/cypress/screenshots/
packages/graphiql/cypress/downloads/
packages/graphiql/cypress/videos/
packages/graphiql/typedoc/
packages/graphiql/webpack/
.react-router/
================================================
FILE: .mailmap
================================================
Angel Gomez Salazar <agomezs@fb.com>
Angel Gomez Salazar <agomezs@fb.com> Angel Gomez <AGS-@users.noreply.github.com>
Angel Gomez Salazar <agomezs@fb.com> angel.gomez <angelegomezsd@gmail.com>
Hyohyeon Jeong <asiandrummer@fb.com> Hyo Jeong <asiandrummer@users.noreply.github.com>
================================================
FILE: .npmignore
================================================
.*
*.swp
*~
*.iml
.*.haste_cache.*
.DS_Store
.idea
npm-debug.log
.babelrc
CONTRIBUTING.md
node_modules
coverage
resources
src
packages
packages/graphiql/*.html
cypress.json
babel.config.js
**/*.tsbuildinfo
================================================
FILE: .npmrc
================================================
engine-strict=true
access=public
================================================
FILE: .nvmrc
================================================
20
================================================
FILE: .prettierignore
================================================
# removing this will break tests b/c of whitespace changes + format on save/commit, etc
packages/graphql-language-service-server/src/__tests__/parseDocument.test.ts
================================================
FILE: .prettierrc
================================================
{
"singleQuote": true,
"trailingComma": "all",
"arrowParens": "avoid",
"proseWrap": "never",
"overrides": [
{
"files": ["*.md", "*.mdx"],
"options": {
"printWidth": 80,
"proseWrap": "preserve"
}
},
{
"files": "*.svg",
"options": {
"parser": "html"
}
}
]
}
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}
================================================
FILE: .vscode/launch.json
================================================
// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
"version": "0.2.0",
"configurations": [
{
"name": "VS Code LSP Extension: Run",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}/packages/vscode-graphql"
],
"outFiles": [
"${workspaceFolder}/packages/vscode-graphql/out/extension.js"
],
"sourceMaps": true,
"preLaunchTask": "watch-vscode"
},
{
"type": "node",
"name": "jest watch",
"request": "launch",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": [
"--config",
"jest.config.js",
"--color",
"--runInBand",
"--watch",
"${relativeFile}"
],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
{
"name": "VS Code Exec Extension: Run",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}/packages/vscode-graphql-execution"
],
"outFiles": [
"${workspaceFolder}/packages/vscode-graphql-execution/out/extension.js"
],
"sourceMaps": true,
"preLaunchTask": "watch-vscode-exec"
}
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"npm.packageManager": "yarn",
"editor.formatOnSave": true,
"files.insertFinalNewline": true,
"editor.trimAutoWhitespace": false,
"coverage-gutters.showLineCoverage": true,
"coverage-gutters.coverageBaseDir": "coverage",
"coverage-gutters.coverageFileNames": [
"lcov.info",
"cov.xml",
"coverage.xml",
"jacoco.xml",
"coverage.cobertura.xml"
],
"typescript.tsdk": "node_modules/typescript/lib"
}
================================================
FILE: .vscode/tasks.json
================================================
{
"version": "2.0.0",
"tasks": [
{
"label": "watch-vscode",
"type": "npm",
"script": "watch-vscode",
"problemMatcher": ["$tsc-watch"],
"isBackground": true,
"presentation": {
"reveal": "always"
},
"group": {
"kind": "build",
"isDefault": true
}
},
{
"label": "watch-vscode-exec",
"type": "npm",
"script": "watch-vscode-exec",
"problemMatcher": ["$tsc-watch"],
"isBackground": true,
"presentation": {
"reveal": "always"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
================================================
FILE: .yarnrc.yml
================================================
compressionLevel: 0
enableGlobalCache: false
nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-4.9.1.cjs
================================================
FILE: CHANGELOG.md
================================================
> **Archived** For up to date changelogs that are automatically generated by [changesets](https://github.com/atlassian/changesets), see CHANGELOG.md files in respective workspaces. For example, the `graphiql` changelog is located at [packages/graphiql/CHANGELOG.md](./packages/graphiql/CHANGELOG.md), and the language server changelog is located at [packages/graphql-language-service-server/CHANGELOG.md](./packages/graphql-language-service-server/CHANGELOG.md)
## GraphiQL 0.14.2 - 11 Aug, 2019
### Fixes
- Fix SSR & use of window when introducing new `extraKeys` capability (#942)
## GraphiQL 0.14.0 - 11 Aug, 2019
### Features
- Add defaultVariableEditorOpen prop (#744) - @acao
### Fixes
- Fix formatting of subscription errors - #636, #722 - @benjie
- preserve ctrl-f key for macOS - #759 - @pd4d10
- Fix earlier 'Mode graphql failed to advance stream' on Linux by eating an exotic whitespace character - #735 closed by #932 - @benjie
- Fix: check `this.editor` exists before `this.editor.off` in QueryEditor
## Codemirror GraphQL - 0.9 - 11 Aug, 2019
### Chores
- BREAKING: Update to gls-interface and gls-parser ^2.1
- BREAKING: Deprecate support for GraphQL 0.11 and below
- BREAKING: introduce MIT license
- BREAKING: Support GraphQL 14
## GraphQL Language Service Server 2.1.0 - 11 Aug, 2019
### Features
- Replace babylon with @babel/parser (#879) @ganemone
- Add support for gql template tags (#883) @ganemone @Neitsch
### Chores
- BREAKING: remove incompatible dependencies on graphql 0.11 and below
- BREAKING: add peer support for graphql 14.x
- BREAKING: change copyright to MIT
- update formatting for monorepo eslint/prettier rules
- update readme, badges
## GraphQL Language Service Parser 2.1.0 - 11 Aug, 2019
### Fixes
- Fix 'mode graphql failed to advance stream' error from shift-alt-space, etc - #932 - @benjie
## GraphQL Language Service Interface 2.1.0 - 11 Aug, 2019
### Features
- add \_\_typename field suggestion against object type - (#903) @yoshiakis
- Update sortText logic, so that field sort is schema driven rather than alphabetically sorted - (#884) @ganemone
### Chores
- BREAKING: add peer support for graphql 14.x
- MINOR BREAKING: Use MIT license
- add test case for language service hover - @divyenduz @AGS-
## GraphQL Language Service 2.1.0
- BREAKING: add peer support for graphql 14.x
- BREAKING: remove incompatible dependencies on graphql 0.11 and below (b/c of gls-utils 2.x)
## GraphQL Language Service Utils 2.1.0 - 11 Aug, 2019
### Chores
- BREAKING: change copyright to MIT
- update formatting for monorepo eslint/prettier rules
- update readme, badges
## GraphQL Language Service Types 1.3.0 - 11 Aug, 2019
### Chores
- BREAKING: change copyright to MIT
- BREAKING: add peer support for graphql 14.x
- update formatting for monorepo eslint/prettier rules
- update readme, badges
## GraphiQL 0.13.2 - 21 June, 2019
### Features
- Hint/popup/etc DOM nodes use container rather than creating children of
<body> - #791 - @codestryke
- Add readOnly prop and pass to `QueryEditor` and `VariableEditor` - #718 - @TheSharpieOne
- Add operationName to introspection query - #664 - @jbblanchet
- Image Preview Functionality - #789 - @dunnbobcat @asiandrummer
### Fixes
- Destroy image hover tooltip when it isn't needed - #874 - @acao
- Copy non-formatted query to avoid stripping out comments - #832 - @jaebradley
- Normalizes no-break spaces - #781 - @zouxuoz
- Prevents crashing on Shift-Alt-Space - #781 - @zouxuoz
- Fix UI state change after favorite a query - #747 - @benjie
### Chores
- BREAKING: Upgrade to `codemirror-graphql` 0.8.3 - #773 - @jonaskello
- BREAKING: Change copyright to GraphQL Contributors, License to MIT
- Netlify deployments per PR - @orta
- Add unit test coverage
- Switch to Jest
## Codemirror Graphql Mode 0.8.4 - 11 Aug, 2018
You will now be importing async methods from gls-interface 2.0.0, thus your bundler will require regenerator runtime
## Chores
- BREAKING - Use GLS interface/parser 2.1.0 for graphql 14
- BREAKING - This introduces async/await
## GraphQL Language Service Interface 2.0.0 - 11 Sep, 2018
### Chores
- BREAKING: upgrade internal dependencies - gls-parser, gls-types, and gls-utils to 2.0.0 - @lostplan
- BREAKING: remove incompatible dependencies on graphql 0.11 and below - @lostplan
## GraphQL Language Service Utils 2.0.0 - 11 Sep, 2018
### Chores
- BREAKING: deprecate support for graphql-js 0.11.x and below - @lostplan [graphql/graphql-language-service#256](https://github.com/graphql/graphql-language-service/pull/256) [new ref](https://github.com/graphql/graphiql/commit/895e68537fd802b8b6ddf2578a1f76f85982c773) because of [this change](https://github.com/graphql/graphiql/commit/068c57fdb4a147be3c2fc38167e2def74d217a82#diff-696ceb17e38e4a274d4a149d24513b78)
- BREAKING: GraphQL 14.x support, peer dependency resolutions - #244 - @AGS-
## GraphQL Language Service Utils 1.2.2 - 11 Sep, 2018
### Chores
- add graphql-js 0.13 to peer deps of types package (graphql/graphql-language-service#241)
## GraphQL Language Service Server 2.0.0 - 11 Sep, 2019
### Chores
- add graphql-js 0.13 to peer dependencies (graphql/graphql-language-service#241)
- BREAKING: upgrade internal dependencies - gls-interface, gls-server and gls-utils to 2.0.0 @lostplan
## GraphQL Language Service 2.0.0 - 11 Sep, 2018
### Chores
- BREAKING: upgrade internal dependencies - gls-interface, gls-server and gls-utils to 2.0.0 @Sol
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
We welcome contributions and assistance! If you want to know where to start,
check out our
[Github Projects sorted by name](https://github.com/graphql/graphiql/projects?query=is%3Aopen+sort%3Aname-asc).
If you want to add a new feature, note that GraphiQL is eventually going to
support its own extension system, and we are rarely adding new features, so make
sure you submit feature requests with that in mind.
## Development
To get setup for development, refer to [DEVELOPMENT.md](./DEVELOPMENT.md)
## Issues
We use GitHub issues to track public bugs and requests. Please ensure your bug
description is clear and has sufficient instructions to be able to reproduce the
issue. The best way is to provide a reduced test case on jsFiddle or jsBin.
## Pull Requests
All active development of this project happens on GitHub. We actively welcome
your [pull requests](https://help.github.com/articles/creating-a-pull-request).
### Type Prefixes
[a list of type prefixes](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)
is available:
```json
[
"build",
"ci",
"chore",
"docs",
"feat",
"fix",
"perf",
"refactor",
"revert",
"style",
"test"
]
```
of these, `fix` and `feat` can trigger patch and minor version releases,
reflexively. the rest are useful to help track activity.
another commit message that can trigger a major version bump is this:
```
feat: introduce new `fooBar()` API, break `foo()` api
- list changes
BREAKING CHANGE: break `foo()` api
```
notice the non breaking spaces between header and footer.
## Releasing
Please see [the RELEASING.md document](./RELEASING.md).
## License
By contributing to GraphiQL, you agree that your contributions will be licensed
under the LICENSE file in the project root directory.
================================================
FILE: DEVELOPMENT.md
================================================
# Getting Started
Please note that we require a signed GraphQL Specification Membership agreement
before landing a contribution. This is checked automatically when you open a PR.
If you have not signed the membership agreement (it's free), you will be
prompted by the EasyCLA bot. For more details, please see the
[GraphQL WG repo](https://github.com/graphql/graphql-wg/tree/main/membership).
0. First, you will need the latest `git`, `yarn` 4, & `node` 18 or greater.
macOS, Windows and Linux should all be supported as build environments.
> [!WARNING]
>
> None of the commands below will work with `npm`. Please use `yarn` in this repo.
1. Fork this repo by using the "Fork" button in the upper-right
2. Check out your fork
```sh
git clone git@github.com:your-name-here/graphiql.git
```
3. Install or Update all dependencies
```sh
yarn
```
4. Build all interdependencies so the project you are working on can resolve
other packages
First, you'll need:
```sh
yarn build
```
or
```sh
yarn build:watch
```
If you are focused on GraphiQL development, you can run:
```sh
yarn dev:graphiql
```
5. Get coding! If you've added code, add tests. If you've changed APIs, update
any relevant documentation or tests. Ensure your work is committed within a
feature branch.
6. Ensure all tests pass and build everything
```sh
yarn test
```
## Fix CI issues with linting
If you have `prettier` or `eslint --fix`-able issues you see in CI, use —
`yarn format`
If you see `typescript` build issues, do a `yarn build` locally, and make sure
the whole project references tree builds. Changing interfaces can end up
breaking their implementations.
## Run tests for GraphiQL:
- `yarn test graphiql` will run all tests for graphiql. You can also run tests
from a workspace, but most tooling is at the root.
- `yarn test --watch` will run `jest` with `--watch`
- `yarn e2e` at the root will run the end-to-end suite
- `yarn start-monaco` will launch `webpack` dev server for the `monaco` editor
example with GitHub API from the root. This is the fastest way to test changes
to `graphql-language-service-interface`, parser, etc.
If you want these commands to watch for changes to dependent packages in the
repo, then run `yarn build --watch` alongside either of these.
## Developing for GraphiQL
If you want to develop just for graphiql, you won't need to execute commands
from the package subdirectory at `packages/graphiql`.
First, you'll need to `yarn build` all the packages from the root.
Then, you can run `yarn dev:graphiql` command, which will launch `vite` dev server for GraphiQL.
```text
VITE v6.3.4 ready in 1015 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
```
## Developing Monaco GraphQL
1. First run `yarn`.
2. Run `yarn tsc --watch` to watch `monaco-graphql` and
`graphql-language-service` in one screen session/terminal tab/etc
3. In another session, run `yarn start-monaco` from anywhere in the repository
aside from an individual workspace.
4. Alternatively to the webpack example, or in addition, you can run monaco or
next.js examples, though these examples are simpler. They also require their
own `yarn` or `npm install` as they are excluded from the `workspaces`
resolved on global `yarn install`
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) GraphQL Contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<!-- @format -->
# GraphQL IDE Monorepo
> **Security Notice:** All versions of `graphiql` < `1.4.7` are vulnerable to an
> XSS attack in cases where the GraphQL server to which the GraphiQL web app
> connects is not trusted. Learn more
> [in the graphiql `security` docs directory](docs/security)
> **Looking for the [GraphiQL Docs?](packages/graphiql/README.md)**: This is the
> root of the monorepo! The full GraphiQL docs are located at
> [`packages/graphiql`](packages/graphiql)
[](https://github.com/graphql/graphiql/actions?query=workflow%3A%22Node.JS+CI%22)
[](https://discord.gg/NP5vbPeUFp)
[](https://codecov.io/gh/graphql/graphiql)
[](https://snyk.io/test/github/graphql/graphiql)
[](https://bestpractices.coreinfrastructure.org/projects/3887)
## Overview
GraphiQL is the reference implementation of this monorepo, GraphQL IDE, an
official project under the GraphQL Foundation. The code uses the permissive MIT
license.
Whether you want a simple GraphiQL IDE instance for your server, or a more
advanced web or desktop GraphQL IDE experience for your framework or plugin, or
you want to build an IDE extension or plugin, you've come to the right place!
The purpose of this monorepo is to give the GraphQL Community:
- a to-specification official language service (see:
[API Docs](https://graphiql-test.netlify.app/typedoc))
- a comprehensive LSP server and CLI service for use with IDEs
- a codemirror mode
- a monaco mode (in the works)
- an example of how to use this ecosystem with GraphiQL.
- examples of how to implement or extend GraphiQL.
## [`graphiql`](packages/graphiql#readme)
<!-- prettier-ignore -->
> [](https://npmjs.com/graphiql)
> 
> 
> 
> 
> 
_/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE.
[Try the live demo](https://graphql.org/swapi-graphql). We also have
[a demo using our latest netlify build](http://graphiql-test.netlify.app) for
the `main` branch.
The GraphiQL IDE, implemented in React, currently using
[GraphQL mode for CodeMirror](packages/codemirror-graphql#readme) &
[GraphQL Language Service](packages/graphql-language-service#readme).
**Learn more about
[GraphiQL in `packages/graphiql/README.md`](packages/graphiql#readme)**
## [`monaco-graphql`](packages/monaco-graphql#readme)
[](https://npmjs.com/monaco-graphql)
Provides monaco editor with a powerful, schema-driven graphql language mode.
Uses the `graphql-language-service`directly.
See the [webpack example](examples/monaco-graphql-webpack#readme) for a plain
javascript demo using GitHub API
## [`codemirror-graphql`](packages/codemirror-graphql#readme)
[](https://npmjs.com/codemirror-graphql)
Provides CodeMirror 5 with a parser mode for GraphQL along with a live linter and
typeahead hinter powered by your GraphQL Schema. Uses the
`graphql-language-service`.
## [`cm6-graphql`](packages/cm6-graphql#readme)
[](https://npmjs.com/cm6-graphql)
Provides CodeMirror 6 with a full-featured language mode for GraphQL. Uses the `graphql-language-service`.
## [`graphql-language-service`](packages/graphql-language-service#readme)
[](https://npmjs.com/graphql-language-service)
Provides language services for
[`graphql-language-service-server`](packages/graphql-language-service-server#readme)
[`codemirror-graphql`](packages/codemirror-graphql) and
[`monaco-graphql`](packages/monaco-graphql). Previously published separately as
the now-retired `graphql-language-service-interface`,
`graphql-language-service-parser`, `graphql-language-service-utils` and
`graphql-language-service-types`.
## [`graphql-language-service-server`](packages/graphql-language-service-server#readme)
[](https://npmjs.com/graphql-language-service-server)
Provides language services for LSP-based IDE extensions using the
`graphql-language-service`
## [`graphql.vscode-graphql`](packages/vscode-graphql#readme)
An example implementation of `graphql-language-service-server` for Visual Studio
Code. Available
[on the marketplace](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
OVSX fix is pending.
## [`graphql.vscode-graphql-syntax`](packages/vscode-graphql-syntax#readme)
A new syntax highlighting-only extension for vscode to be used by other vscode
extensions.
## [`graphql.vscode-graphql-execution`](packages/vscode-graphql-execution#readme)
An extension for vscode-graphql that allows inline query execution.
## [`graphql-language-service-cli`](packages/graphql-language-service-cli#readme)
[](https://npmjs.com/graphql-language-service-cli)
Provides a CLI for the language service server.
## Browser & Runtime Support
Many of these packages need to work in multiple environments.
By default, all typescript packages target `es6`.
`graphql-language-service-server` and `graphql-language-service-cli` are made
for the node runtime, so they target `es2017`
`codemirror-graphql` and the `graphiql` browser bundle use the
[`.browserslistrc`](./.browserslistrc), which targets modern browsers to keep
bundle size small and keep the language services performant where async/await is
used, and especially to avoid the requirement of `regenerator-runtime` or
special babel configuration.
### [`.browserslistrc`](./.browserslistrc):
```
last 2 versions
Firefox ESR
not dead
not IE 11
not ios 10
maintained node versions
```
To be clear, we do _not_ support Internet Explorer or older versions of
evergreen browsers.
## Development
To get setup for local development of this monorepo, refer to
[DEVELOPMENT.md](./DEVELOPMENT.md)
# Contributing to this repo
This is an open source project, and we welcome contributions. Please see
[CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute.
This repository is managed by EasyCLA. Project participants must sign the free
[GraphQL Specification Membership agreement](https://preview-spec-membership.graphql.org)
before making a contribution. You only need to do this one time, and it can be
signed by
[individual contributors](http://individual-spec-membership.graphql.org) or
their [employers](http://corporate-spec-membership.graphql.org).
To initiate the signature process please open a PR against this repo. The
EasyCLA bot will block the merge if we still need a membership agreement from
you.
Please note that EasyCLA is configured to accept commits from certain GitHub
bots. These are approved on an exception basis once we are confident that any
content they create is either unlikely to consist of copyrightable content or
else was written by someone who has already signed the CLA (e.g., a project
maintainer). The bots that have currently been approved as exceptions are:
- github-actions (exclusively for the `changesets` Action)
You can find
[detailed information here](https://github.com/graphql/graphql-wg/tree/main/membership).
If you have issues, please email
[operations@graphql.org](mailto:operations@graphql.org).
## Maintainers
Maintainers of this repository regularly review PRs and issues and help advance
the GraphiQL roadmap
### Alumni
Without these amazing past maintainers, where would we be?!
- [@leebyron](https://github.com/leebyron) - original author of all libraries
- [@asiandrummer](https://github.com/asiandrummer) - original creator of
GraphiQL
- [@wincent](https://github.com/wincent) - early co-author and maintainer
- [@lostplan](https://github.com/lostplan) - maintained the language service
ecosystem until about 2017
- [@IvanGoncharov](https://github.com/ivangoncharov) - maintainer and
transitional mentor to @acao and others
- [@orta](https://github.com/orta) - has helped with so many parts of the
project over the years, and provided the original redesign!
- [@divyenduz](https://github.com/divyenduz) - the original creator of
`vscode-graphql`, and contributor to much of the ecosystem. Thanks Divy!
### Active
Maintainers who are currently active (to varying degrees, please contact us via
our discord channels!):
- [@imolorhe](https://github.com/imolorhe)
- [@yoshiakis](https://github.com/yoshiakis)
- [@urigo](https://github.com/urigo)
- [@timsuchanek](https://github.com/timsuchanek)
- [@thomasheyenbrock](https://github.com/thomasheyenbrock)
- [@n1ru4l](https://github.com/n1ru4l)
- [@acao](https://github.com/acao)
- [@stonexer](https://github.com/stonexer)
- [@dimaMachina](https://github.com/dimaMachina)
- [@dotansimha](https://github.com/dotansimha)
- [@saihaj](https://github.com/saihaj)
- [@jonathanawesome](https://github.com/jonathanawesome)
- [@cshaver](https://github.com/cshaver)
> Thank you graphql community for all the help & support! I did it all for you,
> and I couldn't have done it without you ❤️ - @acao
### Fielding Proposals!
The door is open for proposals for the new GraphiQL Plugin API, and other ideas
on how to make the rest of the IDE ecosystem more performant, scalable,
interoperable and extensible. Feel free to open a PR to create a document in the
`/proposals/` directory. Eventually we hope to move these to a repo that serves
this purpose.
## Community
- **Discord**
[](https://discord.gg/NP5vbPeUFp) -
Most discussion outside of GitHub happens on the GraphQL
[Discord Server](https://discord.gg/NP5vbPeUFp)
- **Twitter** - [@GraphiQL](https://twitter.com/@GraphiQL) and
[#GraphiQL](https://twitter.com/hashtag/GraphiQL)
- **GitHub** - Create feature requests, discussions issues and bugs above
- **Working Group** - Yes, you're invited! Monthly planning/decision making
meetings, and working sessions every two weeks on zoom!
[Learn more.](working-group#readme)
================================================
FILE: RELEASING.md
================================================
# Cutting New Releases
TODO: Redo for `changesets`. See [`Changesets Readme`](./.changeset/README.md)
================================================
FILE: SECURITY.md
================================================
# GraphiQL Ecosystem Security Advisories
Security Advisories for packages in this repository will be listed here
## GraphiQL
### 2021
- [Introspection Schema XSS Attack](./docs/security/2021-introspection-schema-xss.md)
================================================
FILE: babel.config.js
================================================
// for ESM don't transpile modules
const envConfig = {
modules: 'commonjs',
};
if (process.env.ESM) {
envConfig.modules = false;
envConfig.targets = { node: 'current' };
envConfig.bugfixes = true;
}
if (process.env.CDN) {
envConfig.modules = 'umd';
envConfig.targets = null;
}
module.exports = {
presets: [
[require.resolve('@babel/preset-env'), envConfig],
require.resolve('@babel/preset-react'),
require.resolve('@babel/preset-typescript'),
],
env: {
test: {
presets: [
[require.resolve('@babel/preset-env'), envConfig],
[require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
require.resolve('@babel/preset-typescript'),
],
plugins: [require.resolve('babel-plugin-macros')],
},
development: {
compact: false,
},
},
plugins: [
require.resolve('@babel/plugin-proposal-class-properties'),
require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
require.resolve('@babel/plugin-proposal-optional-chaining'),
require.resolve('@babel/plugin-transform-private-methods'),
['babel-plugin-transform-import-meta', { module: 'ES6' }],
],
};
================================================
FILE: cspell.json
================================================
{
"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
"language": "en",
"useGitignore": true,
"cache": {
"useCache": true
},
"dictionaries": ["custom-words"],
"dictionaryDefinitions": [
{
"name": "custom-words",
"path": "./resources/custom-words.txt",
"addWords": true
}
],
"ignorePaths": [
"**/CHANGELOG.md",
"**/package.json",
"**/esbuild.js",
".eslintrc.js",
".vscode/extensions.json",
"packages/monaco-graphql/test/monaco-editor.test.ts",
"working-group"
],
"files": ["**/*.{js,cjs,mjs,ts,jsx,tsx,md,mdx,html,json,css,toml,yaml,yml}"]
}
================================================
FILE: docs/migration/graphiql-2.0.0.md
================================================
# Upgrading `graphiql` from `1.x` to `2.0.0`
Hello GraphiQL user and thanks for upgrading!
This migration guide walks you through all changes that come with
`graphiql@2.0.0`, in particular the breaking ones, and will show you how to
upgrade your `1.x` implementation.
> If you encounter any issues while upgrading that are not covered in here,
> please open an issue or PR on this repo and we will extend this guide.
## Design refresh including dark theme
Arguably the biggest change in `graphiql@2` is the new design of the UI. It has
been reworked from scratch to look more modern while keeping its simplistic look
and feel. We also finally added a built-in dark theme. Theme selection is based
on system defaults and can be changed in the new settings dialog (available by
clicking on the gear icon at the bottom of the sidebar on the left of the
screen).
Starting with `graphiql@2`, the only officially supported way of customizing the
CSS that make up the looks of GraphiQL is by overriding the design tokens
defined using CSS variables. In particular, changes to class names are no longer
considered breaking changes. If you use class-name based selectors to change
styles your overrides might break with minor or patch version bumps.
A list of all CSS variables that can be customized can be found in the
[`root.css`](../../packages/graphiql-react/src/style/root.css) file of the
`@graphiql/react` package. The variables for colors use a list of values that
can be passed into the
[`hsl`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)
function in CSS that defines colors by hue, saturation and lightness.
## Changes to `GraphiQL` component props
A couple of props of the `GraphiQL` have undergone breaking changes:
- The props `defaultVariableEditorOpen` and `defaultSecondaryEditorOpen` have
been merged into one prop `defaultEditorToolsVisibility`. The default behavior
if this prop is not passed is that the editor tools are shown if at least one
of the secondary editors has contents. You can pass the following values to
the prop:
- Passing `false` hides the editor tools.
- Passing `true` shows the editor tools.
- Passing `"variables"` explicitly shows the variables editor.
- Passing `"headers"` explicitly shows the headers editor.
- The props `docExplorerOpen`, `onToggleDocs` and `onToggleHistory` have been
removed. They are replaced by the more generic props `visiblePlugin` (for
controlling which plugin is visible) and `onTogglePluginVisibility` (which is
called each time the visibility of any plugin changes).
- The `headerEditorEnabled` prop has been renamed to `isHeadersEditorEnabled`.
- The `ResultsTooltip` prop has been renamed to `responseTooltip`.
### Tabs enabled by default
Tabs were supported opt-in starting with `@graphiql@1.8`. With `graphiql@2` tabs
are now always enabled. The `tabs` prop (which previously toggled if tabs were
enabled or not) has therefore been replaced with a prop `onTabChange`. If you
used the `tabs` prop before to pass this function you can change your
implementation like so:
```diff
<GraphiQL
- tabs={{ onTabChange: (tabState) => {/* do something */} }}
+ onTabChange={(tabState) => {/* do something */}}
/>
```
As long as only one session is open, the tab bar above the editors is hidden. A
plus icon next to the logo on the top right allows the user to open more tabs.
With at least two tabs opened, the tab bar appears above the editors.
## Removed package exports
All React components apart from the `GraphiQL` component have been moved to the
`@graphiql/react` package. That's why we removed most of the exports with
`graphiql@2`. Here is a list of all exported components and functions that have
been removed and where you can find them now:
- `QueryEditor`, `VariableEditor` and `DocExplorer`: Now exported from
`@graphiql/react` under the same names
- Note that the `schema` prop of the `DocExplorer` no longer exists, the
component now uses the schema provided by the `ExplorerContext`.
- `ToolbarMenu`: Now exported from `@graphiql/react` as `ToolbarMenu`
- `ToolbarMenuItem`: Now exported from `@graphiql/react` as `ToolbarMenu.Item`
- `ToolbarSelect`: Now exported from `@graphiql/react` as `ToolbarListbox`
- `ToolbarSelectOption`: Now exported from `@graphiql/react` as
`ToolbarListbox.Option`
- `onHasCompletion`: This function is only meant to be used internally, it is no
longer being exported
- `fillLeafs`, `getSelectedOperationName` and `mergeAst`: Now exported from
`@graphiql/toolkit` under the same names
- types `Fetcher`, `FetcherOpts`, `FetcherParams`, `FetcherResult`,
`FetcherReturnType`, `Observable`, `Storage` and `SyncFetcherResult`: Exported
from `@graphiql/toolkit` under the same names (previously just re-exported by
`graphiql`)
## `GraphiQL` is now a function component
The `GraphiQL` component in `graphiql@1.x` was a class component. That allowed
easy access to its props, state and methods by attaching a ref to it like so:
```tsx
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQL } from 'graphiql';
import { Component } from 'react';
const fetcher = createGraphiQLFetcher({ url: 'https://my.endpoint' });
class MyComponent extends Component {
_graphiql: GraphiQL;
componentDidMount() {
const query = this._graphiql.getQueryEditor().getValue();
}
render() {
return <GraphiQL ref={r => (this._graphiql = r)} fetcher={fetcher} />;
}
}
```
With `graphiql@2` we refactored the codebase to more "modern" React. This also
meant replacing all class components with function components. The code above no
longer works in `graphiql@2` as attaching refs to function components is not
possible in React.
All logic and state management now lives in multiple React contexts, provided by
the `@graphiql/react` package. The `GraphiQL` component is now basically
combining two other components, both of which are also exported by the package.
- `GraphiQLProvider` (originally coming from `@graphiql/react`) will render all
context providers and takes care of state management
- `GraphiQLInterface` is defined in the `graphiql` package and renders the UI
If you want to read or modify GraphiQL state from your custom implementation you
need to render both the above components separately as the hooks for consuming
the context values only work in components that are rendered inside the provider
component.
With all that, the example above can be refactored a such:
```jsx
import { useEditorContext } from '@graphiql/react';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQLInterface, GraphiQLProvider } from 'graphiql';
import { useEffect } from 'react';
const fetcher = createGraphiQLFetcher({ url: 'https://my.endpoint' });
function MyComponent() {
return (
<GraphiQLProvider fetcher={fetcher}>
<InsideContext />
</GraphiQLProvider>
);
}
function InsideContext() {
// Calling this hook would not work in `MyComponent` (it would return `null`)
const { queryEditor } = useEditorContext();
useEffect(() => {
const query = queryEditor.getValue();
}, [queryEditor]);
return <GraphiQLInterface />;
}
```
Here is a list of all public class methods that existed in `graphiql@1` and its
replacement in `graphiql@2`. All the contexts mentioned below can be accessed
using a hook exported by `@graphiql/react`.
- `getQueryEditor`: Use the `queryEditor` property from the `EditorContext`.
- `getVariableEditor`: Use the `variableEditor` property from the
`EditorContext`.
- `getHeaderEditor`: Use the `headerEditor` property from the `EditorContext`.
- `refresh`: Calling this method should no longer be necessary, all editors will
refresh automatically after resizing. If you really need to refresh manually
you have to call the `refresh` method on all editor instances individually.
- `autoCompleteLeafs`: Use the `useAutoCompleteLeafs` hook provided by
`@graphiql/react` that returns this function.
There are a couple more class methods that were intended to be private and were
already removed starting in `graphiql@1.9.0`. Since they were not actually
marked with `private`, here's an extension to the above list for these methods:
- `handleClickReference`: This was a callback method triggered when clicking on
a type or field. It would open the doc explorer for the clicked reference. If
you want to manually mimic this behavior you can use the `push` method from
the `ExplorerContext` to add an item to the navigation stack of the doc
explorer, and you can use the `setVisiblePlugin` method of the `PluginContext`
(use the `usePluginContext()` hook to access this) to show the doc explorer
plugin (by passing the `DOC_EXPLORER_PLUGIN` object provided by
`@graphiql/react`).
- `handleRunQuery`: To execute a query, use the `run` method of the
`ExecutionContext`. If you want to explicitly set an operation name, call the
`setOperationName` method of the `EditorContext` provider before that (passing
in the operation name string as argument).
- `handleEditorRunQuery`: Use the `run` method of the `ExecutionContext`.
- `handleStopQuery`: Use the `stop` method from the `ExecutionContext`.
- `handlePrettifyQuery`: Use the `usePrettifyEditors` hook provided by
`@graphiql/react` that returns this function.
- `handleMergeQuery`: Use the `useMergeQuery` hook provided by `@graphiql/react`
that returns this function.
- `handleCopyQuery`: Use the `useCopyQuery` hook provided by `@graphiql/react`
that returns this function.
- `handleToggleDocs` and `handleToggleHistory`: Use the `setVisiblePlugin`
method of the `PluginContext`.
Some class methods were callbacks to modify state which are not intended to be
called manually. All these methods don't have a successor: `handleEditQuery`,
`handleEditVariables`, `handleEditHeaders`, `handleEditOperationName`,
`handleSelectHistoryQuery`, `handleResetResize` and
`handleHintInformationRender`
### Static properties have been removed
In `graphiql@1.x` the `GraphiQL` component included a bunch of static properties
that exposed utility functions and other components. Most of these have been
removed in `graphiql@2` since the components and functions have been moved to
the `@graphiql/react` and `@graphiql/toolkit` packages.
The properties that remain on the `GraphiQL` function component are
`GraphiQL.Logo`, `GraphiQL.Toolbar` and `GraphiQL.Footer`. All three are React
components that can be passed as children to the `GraphiQL` components and
override certain parts of the UI:
- `GraphiQL.Logo`: Overrides the "logo" at the top right of the screen. By
default, it contains the text "Graph*i*QL".
- `GraphiQL.Toolbar`: Overrides the toolbar next to the operation editor. By
default, if contains buttons for prettifying the current editor contents,
merging fragment definitions into the operation definition and copying the
contents of the operation editor to the clipboard. Note that the default buttons
will not be shown when passing this component as child to `GraphiQL`, instead
it will show the children you pass to `GraphiQL.Toolbar`. The execute button
will always be shown. If you want to keep the default buttons and add
additional buttons you can use the `toolbar` prop.
- `GraphiQL.Footer`: Adds a section below the response editor. By default, this
won't show up in the UI.
Here is a list of all the static properties that have been removed and their
replacements:
- `GraphiQL.formatResult` and `GraphiQL.formatError`: Replaced by equally named
functions from `@graphiql/toolkit`
- `GraphiQL.QueryEditor`, `GraphiQL.VariableEditor` and `GraphiQL.HeaderEditor`:
Replaced by equally named components from `@graphiql/react`
- `GraphiQL.ResultViewer`: Replaced by the `ResponseEditor` component from
`@graphiql/react`
- `GraphiQL.Button`: Replaced by the `ToolbarButton` component from
`@graphiql/react`
- `GraphiQL.ToolbarButton`: This exposed the same component as
`GraphiQL.Button`.
- `GraphiQL.Menu`: Replaced by the `ToolbarMenu` component from
`@graphiql/react`
- `GraphiQL.MenuItem`: Replaced by the `ToolbarMenu.Item` component from
`@graphiql/react`
- `GraphiQL.Group`: Grouping multiple buttons side-by-side is not provided
out-of-the box anymore in the new GraphiQL UI. If you want to implement a
similar feature in the new vertical toolbar you can do so by adding your own
styles for your custom toolbar elements. Example:
```jsx
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQL } from 'graphiql';
const fetcher = createGraphiQLFetcher({ url: 'https://my.endpoint' });
function MyComponent() {
return (
<GraphiQL fetcher={fetcher}>
<GraphiQL.Toolbar>
{/* Add custom styles for your buttons using the given class */}
<div className="button-group">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</GraphiQL.Toolbar>
</GraphiQL>
);
}
```
### `window.g` has been removed
In `graphiql@1.x` the `GraphiQL` class component stored a reference to itself on
a global property named `g`. This property has been removed as refs don't exist
for function components. (Also, the property was only intended for internal use
like testing in the first place.)
================================================
FILE: docs/migration/graphiql-4.0.0.md
================================================
# Upgrading `graphiql` from `3.x` to `4.0.0`
---
## `graphiql`
- Dropped support for **React 16/17**, added support for **React 19**
- Dropped **CommonJS** build output – now **ESM only**
- Improved UI of tabs
- Changed tabs behavior – tabs are always visible (even if only one)
- Updated tabs tooltip usage – now use HTML `title` attribute
- Removed **default export**
- Removed `disableTabs` option
- Improved Markdown handling – single newlines are ignored
- Added `onPrettifyQuery` callback for custom formatting
- ⚠️ Deprecate **UMD CDN build `index.umd.js`**
- Changed **CDN paths** and **style import**
> [!WARNING]
>
> ⚠️ **`index.umd.js` is deprecated**. Switch to the [ESM CDN example](../../examples/graphiql-cdn/index.html).
### UMD CDN path changes
```diff
-https://unpkg.com/graphiql/graphiql.js
-https://unpkg.com/graphiql/graphiql.min.js
+https://unpkg.com/graphiql/dist/index.umd.js // ⚠️ deprecated
-https://unpkg.com/graphiql/graphiql.css
-https://unpkg.com/graphiql/graphiql.min.css
+https://unpkg.com/graphiql/dist/style.css
```
### Default export removed
```diff
-import GraphiQL from 'graphiql'
+import { GraphiQL } from 'graphiql'
```
### Style import changed
```diff
-import 'graphiql/graphiql.css'
+import 'graphiql/style.css'
```
### Toolbar API migration
#### `toolbar.additionalContent` → `<GraphiQL.Toolbar>`
**Before:**
```tsx
<GraphiQL toolbar={{ additionalContent: <button>My button</button> }} />
```
**After:**
```jsx
<GraphiQL>
<GraphiQL.Toolbar>
{({ merge, prettify, copy }) => (
<>
{prettify}
{merge}
{copy}
<button>My button</button>
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
```
---
#### `toolbar.additionalComponent` → `<GraphiQL.Toolbar>`
**Before:**
```jsx
<GraphiQL
toolbar={{
additionalComponent: function MyComponentWithAccessToContext() {
return <button>My button</button>;
},
}}
/>
```
**After:**
```jsx
<GraphiQL>
<GraphiQL.Toolbar>
{({ merge, prettify, copy }) => (
<>
{prettify}
{merge}
{copy}
<MyComponentWithAccessToContext />
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
```
---
#### Customizing default toolbar buttons
You can reorder or remove default toolbar buttons:
```tsx
<GraphiQL>
<GraphiQL.Toolbar>
{({ prettify, copy }) => (
<>
{copy} {/* Move copy button to the top */}
{prettify} {/* Omit merge button */}
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
```
---
## `@graphiql/react`
- Dropped support for **React 16/17**, added support for **React 19**
- Dropped **CommonJS** build output
- Improved UI of tabs
- Updated dependencies: `@radix-ui` and `@headlessui/react`
- Added `onPrettifyQuery` callback for custom formatting
- Improved Markdown handling (ignores single newlines)
- Style import changed:
```diff
-import '@graphiql/react/dist/style.css'
+import '@graphiql/react/style.css'
```
---
## `@graphiql/plugin-code-exporter`
- Dropped support for **React 16/17**, added support for **React 19**
- Dropped **CommonJS** build output
- Updated ESM-based CDN example:
[code-exporter ESM CDN example](../../packages/graphiql-plugin-code-exporter/example/index.html)
- ⚠️ UMD build deprecated – migrate to ESM-based CDN
- Style import changed:
```diff
-import '@graphiql/plugin-code-exporter/dist/style.css'
+import '@graphiql/plugin-code-exporter/style.css'
```
---
## `@graphiql/plugin-explorer`
- Dropped support for **React 16/17**, added support for **React 19**
- Dropped **CommonJS** build output
- Improved styles for the explorer UI
- Updated ESM-based CDN example:
[explorer ESM CDN example](../../examples/graphiql-cdn/index.html)
- ⚠️ UMD build deprecated – migrate to ESM-based CDN
- Style import changed:
```diff
-import '@graphiql/plugin-explorer/dist/style.css'
+import '@graphiql/plugin-explorer/style.css'
```
================================================
FILE: docs/migration/graphiql-5.0.0.md
================================================
# Upgrading `graphiql` from `4.x` to `5.0.0`
Starting from GraphiQL 5, you need to set up Monaco workers in your project:
- For **Vite** projects you must:
1. Install `vite-plugin-monaco-editor` package:
```sh
npm install vite-plugin-monaco-editor --save-dev
```
2. Import and configure the plugin in your `vite.config.mjs` file:
```diff
// vite.config.mjs
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import $monacoEditorPlugin from 'vite-plugin-monaco-editor'
+const monacoEditorPlugin = $monacoEditorPlugin.default ?? $monacoEditorPlugin
export default defineConfig({
plugins: [
react(),
+ monacoEditorPlugin({
+ languageWorkers: ['editorWorkerService', 'json'],
+ customWorkers: [
+ {
+ label: 'graphql',
+ entry: 'monaco-graphql/esm/graphql.worker.js'
+ }
+ ]
+ })
]
})
```
> [!NOTE]
>
> See [Vite example](../../examples/graphiql-vite/src/App.jsx).
- For Webpack projects such as **Next.js** you must import:
```js
import 'graphiql/setup-workers/webpack';
```
> [!NOTE]
>
> See [Next.js example](../../examples/graphiql-nextjs/src/app/page.tsx).
- For ESM-based CDN usages, you must use
[`?worker` query](https://esm.sh/#web-worker) to load the module as a web
worker:
```js
import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
globalThis.MonacoEnvironment = {
getWorker(_workerId, label) {
switch (label) {
case 'json':
return createJSONWorker();
case 'graphql':
return createGraphQLWorker();
}
return createEditorWorker();
},
};
```
> [!NOTE]
>
> See [CDN example](../../examples/graphiql-cdn/index.html).
## Allow to Override All Default GraphiQL Plugins
Starting from GraphiQL 5, you can override all default plugins.
### Removing All Default Plugins
To remove all default plugins (currently **Doc Explorer** and **History**), set
`referencePlugin={null}` and pass an empty array to the `plugins` prop:
```jsx
import { GraphiQL } from 'graphiql';
const myPlugins = [];
function App() {
return (
<GraphiQL
referencePlugin={null} // Removes Doc Explorer plugin
plugins={myPlugins} // Removes History plugin
/>
);
}
```
> [!NOTE]
>
> If you're using a custom Doc Explorer, pass it to the `referencePlugin` prop —
> **not** the `plugins` array. It will be automatically included and always
> rendered first.
### Adding Plugins While Keeping Defaults
If you're adding custom plugins (e.g., the **Explorer** plugin) and want to keep
the **History** plugin, you must explicitly include it in the `plugins` array:
```jsx
import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
import { explorerPlugin } from '@graphiql/plugin-explorer';
const myPlugins = [HISTORY_PLUGIN, explorerPlugin()];
function App() {
return <GraphiQL plugins={myPlugins} />;
}
```
---
## `graphiql`
> [!WARNING]
>
> ⚠️ UMD build is removed. Switch to the [ESM CDN example](../../examples/graphiql-cdn/index.html).
- Migration from Codemirror to [Monaco Editor](https://github.com/microsoft/monaco-editor)
- Replacing `codemirror-graphql` with [`monaco-graphql`](../../packages/monaco-graphql)
- Clicking on a reference in the operation editor now works by holding `Cmd` on macOS or `Ctrl` on Windows/Linux
- Support for comments in **Variables** and **Headers** editors
- Added new examples: [**GraphiQL x Vite**](../../examples/graphiql-vite) and [**GraphiQL x Next.js**](../../examples/graphiql-nextjs)
- Removed examples: **GraphiQL x Parcel** and **GraphiQL x Create React App**
- Removed props
- `query`
- `variables`
- `headers`
- `response`
- `readOnly`
- `keyMap`. To use Vim or Emacs keybindings in Monaco, you can use community plugins. Monaco Vim: https://github.com/brijeshb42/monaco-vim. Monaco Emacs: https://github.com/aioutecism/monaco-emacs
- `validationRules`. Use custom GraphQL worker, see https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker.'
> [!NOTE]
>
> If you used `query`, `variables` and `headers` in integration tests, you can use the new `initialQuery`,
> `initialVariables` and `initialHeaders` props instead. These props will only be used for the first tab.
> When opening more tabs, the operation editor will start out empty.
- Added new props
- `initialQuery`
- `initialVariables`
- `initialHeaders`
- feat: allow `children: ReactNode` for `<GraphiQL.Toolbar />` component
---
## `@graphiql/react`
> [!IMPORTANT]
>
> Clicking on a reference in the operation editor now works by holding `Cmd` on macOS or `Ctrl` on Windows/Linux.
- `usePrettifyEditors`, `useCopyQuery`, `useMergeQuery`, `useExecutionContext`, `usePluginContext`, `useSchemaContext`, `useStorageContext` hooks are deprecated.
- Add new `useGraphiQL` and `useGraphiQLActions` hooks instead. See updated [README](../../packages/graphiql-react/README.md#available-stores) for more details about them.
- remove `useSynchronizeValue` hook
- fix `defaultQuery` with empty string does not result in an empty default query
- fix `defaultQuery`, when is set will only be used for the first tab. When opening more tabs, the operation editor will start out empty
- fix execute query shortcut in operation editor, run it even there are no operations in the operation editor
- fix plugin store, save last opened plugin in storage
- remove `onClickReference` from variable editor
- fix shortcut text per OS for default query and in run query in execute query button's tooltip
The `ToolbarMenu` component has changed.
- The `label` and `className` props were removed
- The `button` prop should now be a button element
```jsx
<ToolbarMenu
label="Options"
button={
<ToolbarButton label="Options">
<SettingsIcon className="graphiql-toolbar-icon" aria-hidden="true" />
</ToolbarButton>
}
>
<ToolbarMenu.Item onSelect={() => console.log('Clicked!')}>
Test
</ToolbarMenu.Item>
</ToolbarMenu>
```
## `@graphiql/plugin-code-exporter`
> [!WARNING]
>
> ⚠️ UMD build is removed. Switch to the [ESM CDN example](../../packages/graphiql-plugin-code-exporter/example/index.html).
---
## `@graphiql/plugin-explorer`
> [!WARNING]
>
> ⚠️ UMD build is removed. Switch to the [ESM CDN example](../../examples/graphiql-cdn/index.html).
---
## @graphiql/plugin-doc-explorer
- `useExplorerContext` hook is deprecated. Use new `useDocExplorer` and `useDocExplorerActions` hooks instead.
- The shortcut to focus on the Doc Explorer search input is now `Cmd/Ctrl+Alt+K`
instead of the previous `Cmd/Ctrl+K`. This was changed because monaco-editor has
a built-in `Cmd/Ctrl+K` command.
- push a field type on stack too before field
- fix: show spinner in doc explorer based on `isIntrospecting` value, and not based on `isFetching`
---
## @graphiql/plugin-history
- `useHistoryContext` hook is deprecated. Use new `useHistory` and `useHistoryActions` hooks instead.
================================================
FILE: docs/security/2021-introspection-schema-xss.md
================================================
- [1. GraphiQL introspection schema template injection attack: Advisory Statement](#1-graphiql-introspection-schema-template-injection-attack-advisory-statement)
- [1.1. Impact](#11-impact)
- [1.2. Scope](#12-scope)
- [1.3. Patches](#13-patches)
- [1.3.1 CDN bundle implementations may be automatically patched](#131-cdn-bundle-implementations-may-be-automatically-patched)
- [1.4. Workarounds for Older Versions](#14-workarounds-for-older-versions)
- [1.5. How to Re-create the Exploit](#15-how-to-re-create-the-exploit)
- [1.6. Credit](#16-credit)
- [1.7. References](#17-references)
- [1.8. For more information](#18-for-more-information)
- [2. More Details on the Vulnerability](#2-more-details-on-the-vulnerability)
- [3. Compromised introspection Schema Example](#3-compromised-introspection-schema-example)
## 1. GraphiQL introspection schema template injection attack: Advisory Statement
This is a security advisory for an XSS vulnerability in `graphiql`.
A similar vulnerability affects `graphql-playground`, a fork of `graphiql`.
There is a corresponding `graphql-playground`
[advisory](https://github.com/graphql/graphql-playground/security/advisories/GHSA-59r9-6jp6-jcm7)
and
[Apollo Server advisory](https://github.com/apollographql/apollo-server/security/advisories/GHSA-qm7x-rc44-rrqw).
### 1.1. Impact
All versions of `graphiql` older than
[`graphiql@1.4.7`](https://github.com/graphql/graphiql/releases/tag/v1.4.7) are
vulnerable to compromised HTTP schema introspection responses or `schema` prop
values with malicious GraphQL type names, exposing a dynamic XSS attack surface
that can allow code injection on operation autocomplete.
In order for the attack to take place, the user must load a vulnerable schema in
`graphiql`. There are a number of ways that can occur.
By default, the schema URL is _not_ attacker-controllable in `graphiql` or in
its suggested implementations or examples, leaving only very complex attack
vectors.
If a custom implementation of `graphiql`'s `fetcher` allows the schema URL to be
set dynamically, such as a URL query parameter like `?endpoint=` in
`graphql-playground`, or a database provided value, then this custom `graphiql`
implementation is _vulnerable to phishing attacks_, and thus much more readily
available, low or no privilege level xss attacks. The URLs could look like any
generic looking graphql schema URL.
Because this exposes an XSS attack surface, it would be possible for a threat
actor to exfiltrate user credentials, data, etc. using arbitrary malicious
scripts, without it being known to the user.
### 1.2. Scope
This advisory describes the impact on the `graphiql` package. The vulnerability
also affects other projects forked from `graphiql` such as
[`graphql-playground`](https://github.com/graphql/graphql-playground/security/advisories/GHSA-59r9-6jp6-jcm7)
and the `graphql-playground` fork distributed by Apollo Server. The impact is
more severe in the `graphql-playground` implementations; see the
[`graphql-playground` advisory](https://github.com/graphql/graphql-playground/security/advisories/GHSA-59r9-6jp6-jcm7)
and
[Apollo Server advisory](https://github.com/apollographql/apollo-server/security/advisories/GHSA-qm7x-rc44-rrqw)
for details.
This vulnerability does not impact `codemirror-graphql`, `monaco-graphql` or
other dependents, as it exists in `onHasCompletion.ts` in `graphiql`. It does
impact all forks of `graphiql`, and every released version of `graphiql`.
It should be noted that desktop clients such as Altair, Insomnia, Postwoman, do
not appear to be impacted by this.
### 1.3. Patches
`graphiql@1.4.7` addresses this issue via defense in depth.
- **HTML-escaping text** that should be treated as text rather than HTML. In
most of the app, this happens automatically because React escapes all
interpolated text by default. However, one vulnerable component uses the
unsafe `innerHTML` API and interpolated type names directly into HTML. We now
properly escape that type name, which fixes the known vulnerability.
- **Validates the schema** upon receiving the introspection response or schema
changes. Schemas with names that violate the GraphQL spec will no longer be
loaded. (This includes preventing the Doc Explorer from loading.) This change
is also sufficient to fix the known vulnerability. You can disable this
validation by setting `dangerouslyAssumeSchemaIsValid={true}`, which means you
are relying only on escaping values to protect you from this attack.
- **Ensuring that user-generated HTML is safe**. Schemas can contain Markdown in
`description` and `deprecationReason` fields, and the web app renders them to
HTML using the `markdown-it` library. As part of the development of
`graphiql@1.4.7`, we verified that our use of `markdown-it` prevents the
inclusion of arbitrary HTML. We use `markdown-it` without setting
`html: true`, so we are comfortable relying on
[`markdown-it`'s HTML escaping](https://github.com/markdown-it/markdown-it/blob/master/docs/security.md)
here. We considered running a second level of sanitization over all rendered
Markdown using a library such as `dompurify` but believe that is unnecessary
as `markdown-it`'s sanitization appears to be adequate. `graphiql@1.4.7` does
update to the latest version of `markdown-it` (v12, from v10) so that any
security fixes in v11 and v12 will take effect.
### 1.3.1 CDN bundle implementations may be automatically patched
Note that if your implementation is depending on a CDN version of `graphiql`,
and is pointed to the `latest` tag (usually the default for most cdns if no
version is specified) then this issue is already mitigated, in case you were
vulnerable to it before.
### 1.4. Workarounds for Older Versions
If you cannot use `graphiql@1.4.7` or later
- Always use a static URL to a trusted server that is serving a trusted GraphQL
schema.
- If you have a custom implementation that allows using user-provided schema
URLs via a query parameter, database value, etc, you must either disable this
customization, or only allow trusted URLs.
### 1.5. How to Re-create the Exploit
You can see an example on
[codesandbox](https://codesandbox.io/s/graphiql-xss-exploit-gr22f?file=/src/App.js).
These are both fixed to the last `graphiql` release `1.4.6` which is the last
vulnerable release; however it would work with any previous release of
`graphiql`.
Both of these examples are meant to demonstrate the phishing attack surface, so
they are customized to accept a `url` parameter. To demonstrate the phishing
attack, add `?url=https://graphql-xss-schema.netlify.app/graphql` to the
in-codesandbox browser.
Erase the contents of the given query and type `{u`. You will see an alert
window open, showing that attacker-controlled code was executed.
Note that when React is in development mode, a validation exception is thrown
visibly; however that exception is usually buried in the browser console in a
production build of `graphiql`. This validation exception comes from
`getDiagnostics`, which invokes `graphql` `validate()` which in turn will
`assertValidSchema()`, as `apollo-server-core` does on executing each operation.
This validation does not prevent the exploit from being successful.
Note that something like the `url` parameter is not required for the attack to
happen if `graphiql`'s `fetcher` is configured in a different way to communicate
with a compromised GraphQL server.
### 1.6. Credit
This vulnerability was discovered by [@Ry0taK](https://github.com/Ry0taK), thank
you! :1st_place_medal:
Others who contributed:
- [@imolorhe](https://github.com/imolorhe)
- [@glasser](https://github.com/glasser)
- [@divyenduz](https://github.com/divyenduz)
- [@dotansimha](https://github.com/dotansimha)
- [@acao](https://github.com/acao)
- [@benjie](https://github.com/benjie) and many others who provided morale
support
### 1.7. References
**The vulnerability has always been present**
[In the first commit](https://github.com/graphql/graphiql/commit/b9dec272d89d9c590727fd10d62e4a47e0317fc7#diff-855b77f6310b7e4fb1bcac779cd945092ed49fd759f4684ea391b45101166437R87)
[And later moved to onHasCompletion.js in 2016](https://github.com/graphql/graphiql/commit/6701b0b626e43800e32413590a295e5c1e3d5419#diff-d45eb76aebcffd27d3a123214487116fa95e0b5a11d70a94a0ce3033ce09f879R110)
(now `.ts` after the typescript migration)
### 1.8. For more information
If you have any questions or comments about this advisory:
- Open an issue in
[graphiql repo](https://github.com/graphql/graphiql/new/issues)
## 2. More Details on the Vulnerability
This section provides more details in addition to the advisory.
An installation of the GraphiQL web app is vulnerable if two conditions are met:
- The web app trusts information from its corresponding GraphQL server by
interpolating information such as GraphQL type names directly into HTML
instead of appropriately escaping or sanitizing the information.
- The victim can load the web app in a way where it speaks to a GraphQL server
controlled by the attacker.
All versions of `graphiql` prior to 1.4.7 inappropriately trust type names
provided by the GraphQL server. They additionally rely on XSS filtering in the
`markdown-it` package to try to protect themselves from XSS attacks in GraphQL
descriptions and deprecation reasons.
By default, `graphiql` does _not_ allow the attacker to control what GraphQL
server it speaks to. Therefore, many installations of `graphiql` are not
affected by this advisory. Installations are only affected if the `fetcher`
argument provided to GraphiQL allows arbitrary customization of the GraphQL
endpoint (eg, reading a GraphQL URL from an URL parameter), or if the attacker
has another way of affecting the introspection schema returned by the GraphQL
server. (Note that `graphql-playground`, a project which started as a fork of
`graphiql`, does this sort of URL parsing by default, so `graphql-playground`
installations _are_ affected by a corresponding vulnerability in their default
configuration.)
One example of "another way of affecting the introspection schema" would be if
you served `graphiql` as part of a PAAS platform that allows users to define
their own GraphQL schemas. In this case, even though the `graphiql` installation
might be hard-wired to a single GraphQL endpoint, the attacker has control over
that GraphQL endpoint and could use it to inject scripts into `graphiql`. In
this case, your `graphiql` installation could be vulnerable if it responds to
introspection requests without first validating its schema. GraphQL servers can
prevent this by refusing to execute operations (including introspection
operations) on invalid schemas; any server built with `graphql-js` properly
validates its schema prior to execution.
## 3. Compromised introspection Schema Example
You can view the code for the exploited schema
[on codesandbox](https://codesandbox.io/s/graphql-xss-compromised-schema-3wdq7?file=/src/bad-schema.js)
or [in the repository](../../packages/graphiql/test/bad-schema.js)
As you can see, the introspection schema must contain items with a compromised
`name` value. this could be fields, input object names, enum names, variable
names, etc any graphql
[NamedType](https://github.com/graphql/graphql-spec/blob/main/spec/Section%202%20--%20Language.md#type-references)
in the schema with it's name rendered in the autocomplete list.
```json
{
"kind": "OBJECT",
"name": "<img src=x onerror=alert(document.domain)>",
"description": null,
"fields": [
{
"name": "name",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
}
```
================================================
FILE: examples/cm6-graphql-legacy-parcel/.gitignore
================================================
.cache/
================================================
FILE: examples/cm6-graphql-legacy-parcel/README.md
================================================
## Codemirror 6 Parcel Example
This example demonstrates how to transpile your own custom ES6 Codemirror 6
GraphQL implementation with parcel bundler.
### Setup
1. `yarn` and `yarn start` from this folder to start parcel dev mode.
1. `yarn build` to find production ready files.
================================================
FILE: examples/cm6-graphql-legacy-parcel/package.json
================================================
{
"name": "example-cm6-graphql-legacy-parcel",
"version": "0.0.0",
"license": "MIT",
"description": "GraphiQL Parcel Example",
"main": "index.js",
"private": true,
"scripts": {
"start": "parcel src/index.html -p 8080",
"build": "parcel build src/index.html --public-url /"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"@codemirror/basic-setup": "^0.20.0",
"@codemirror/language": "^0.20.0",
"codemirror-graphql": "^2.0.2",
"graphql": "^16.9.0"
},
"devDependencies": {
"parcel-bundler": "^1.12.4",
"worker-loader": "^2.0.0",
"typescript": "^4.6.3"
}
}
================================================
FILE: examples/cm6-graphql-legacy-parcel/src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<style>
body {
padding: 0;
margin: 0;
min-height: 100vh;
}
#root {
height: 100vh;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CM6 GraphQL Editor Example</title>
</head>
<body>
<div id="editor"></div>
<script src="./index.ts"></script>
</body>
</html>
================================================
FILE: examples/cm6-graphql-legacy-parcel/src/index.ts
================================================
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup';
import { StreamLanguage } from '@codemirror/language';
import { graphql } from 'codemirror-graphql/cm6-legacy/mode';
import query from './sample-query';
const state = EditorState.create({
doc: query,
extensions: [basicSetup, StreamLanguage.define(graphql)],
});
new EditorView({
state,
parent: document.querySelector('#editor')!,
});
// Hot Module Replacement
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/cm6-graphql-legacy-parcel/src/sample-query.ts
================================================
const query = /* GraphQL */ `
# Copyright (c) 2021 GraphQL Contributors
# All rights reserved.
#
# This source code is licensed under the BSD-style license found in the
# LICENSE file in the root directory of this source tree. An additional grant
# of patent rights can be found in the PATENTS file in the same directory.
query queryName($foo: TestInput, $site: TestEnum = RED) {
testAlias: hasArgs(string: "testString")
... on Test {
hasArgs(
listEnum: [RED, GREEN, BLUE]
int: 1
listFloat: [1.23, 1.3e-1, -1.35384e+3]
boolean: true
id: 123
object: $foo
enum: $site
)
}
test @include(if: true) {
union {
__typename
}
}
...frag
... @skip(if: false) {
id
}
... {
id
}
}
mutation mutationName {
setString(value: "newString")
}
subscription subscriptionName {
subscribeToTest(id: "anId") {
... on Test {
id
}
}
}
fragment frag on Test {
test @include(if: true) {
union {
__typename
}
}
}
`;
export default query;
================================================
FILE: examples/cm6-graphql-legacy-parcel/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"sourceMap": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"]
}
================================================
FILE: examples/cm6-graphql-parcel/.gitignore
================================================
.cache/
.parcel-cache/
================================================
FILE: examples/cm6-graphql-parcel/README.md
================================================
## Codemirror 6 Parcel Example
This example demonstrates how to transpile your own custom ES6 Codemirror 6
GraphQL implementation with parcel bundler.
### Setup
1. `yarn` and `yarn start` from this folder to start parcel dev mode.
1. `yarn build` to find production ready files.
================================================
FILE: examples/cm6-graphql-parcel/package.json
================================================
{
"name": "example-cm6-graphql-parcel",
"version": "0.0.0",
"license": "MIT",
"description": "GraphiQL Parcel Example",
"main": "index.js",
"private": true,
"scripts": {
"start": "parcel src/index.html -p 8080",
"build": "parcel build src/index.html --public-url /",
"build-demo": "yarn build && mkdirp ../../packages/graphiql/cm6 && cp -r dist ../../packages/graphiql/cm6/"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"@codemirror/autocomplete": "6.0.0",
"@codemirror/commands": "6.0.0",
"@codemirror/language": "6.0.0",
"@codemirror/state": "6.1.0",
"@codemirror/theme-one-dark": "6.0.0",
"@codemirror/view": "6.1.2",
"cm6-graphql": "0.0.1",
"graphql": "^16.9.0"
},
"devDependencies": {
"parcel": "^2.6.2",
"worker-loader": "^2.0.0",
"typescript": "^4.6.3"
},
"resolutions": {
"**/@codemirror/autocomplete": "6.0.0",
"**/@codemirror/commands": "6.0.0",
"**/@codemirror/view": "6.1.2",
"**/@codemirror/state": "6.1.0",
"**/@codemirror/language": "6.0.0"
}
}
================================================
FILE: examples/cm6-graphql-parcel/src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<style>
body {
padding: 0;
margin: 0;
min-height: 100vh;
}
#root {
height: 100vh;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Code Mirror 6 GraphQL Editor Example</title>
</head>
<body>
<div id="editor"></div>
<script type="module" src="./index.ts"></script>
</body>
</html>
================================================
FILE: examples/cm6-graphql-parcel/src/index.ts
================================================
import { EditorState } from '@codemirror/state';
import { EditorView, lineNumbers } from '@codemirror/view';
import { history } from '@codemirror/commands';
import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';
import { graphql } from 'cm6-graphql';
import query from './sample-query';
import { TestSchema } from './testSchema';
const state = EditorState.create({
doc: query,
extensions: [
bracketMatching(),
closeBrackets(),
history(),
autocompletion(),
lineNumbers(),
oneDark,
syntaxHighlighting(oneDarkHighlightStyle),
graphql(TestSchema, {
onShowInDocs(field, type, parentType) {
alert(
`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`,
);
},
onFillAllFields(view, schema, _query, cursor, token) {
alert(`Filling all fields. Token: ${token}`);
},
}),
],
});
new EditorView({
state,
parent: document.querySelector('#editor')!,
});
// Hot Module Replacement
if (module.hot) {
module.hot.accept();
}
================================================
FILE: examples/cm6-graphql-parcel/src/sample-query.ts
================================================
const query = /* GraphQL */ `
# Copyright (c) 2021 GraphQL Contributors
# All rights reserved.
#
# This source code is licensed under the BSD-style license found in the
# LICENSE file in the root directory of this source tree. An additional grant
# of patent rights can be found in the PATENTS file in the same directory.
query queryName($foo: TestInput, $site: TestEnum = RED) {
testAlias: hasArgs(string: "testString")
... on Test {
hasArgs(
listEnum: [RED, GREEN, BLUE]
int: 1
listFloat: [1.23, 1.3e-1, -1.35384e+3]
boolean: true
id: 123
object: $foo
enum: $site
)
}
test @include(if: true) {
union {
__typename
}
}
...frag
... @skip(if: false) {
id
}
... {
id
}
}
mutation mutationName {
setString(value: "newString")
}
subscription subscriptionName {
subscribeToTest(id: "anId") {
... on Test {
id
}
}
}
fragment frag on Test {
test @include(if: true) {
union {
__typename
}
}
}
`;
export default query;
================================================
FILE: examples/cm6-graphql-parcel/src/testSchema.ts
================================================
/* istanbul ignore file */
/**
* Copyright (c) 2021 GraphQL Contributors
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
import {
DirectiveLocation,
GraphQLBoolean,
GraphQLDeprecatedDirective,
GraphQLDirective,
GraphQLEnumType,
GraphQLFloat,
GraphQLID,
GraphQLIncludeDirective,
GraphQLInputObjectType,
GraphQLInt,
GraphQLInterfaceType,
GraphQLList,
GraphQLObjectType,
GraphQLSchema,
GraphQLSkipDirective,
GraphQLString,
GraphQLUnionType,
} from 'graphql';
// Test Schema
export const TestEnum = new GraphQLEnumType({
name: 'TestEnum',
values: {
RED: {},
GREEN: {},
BLUE: {},
},
});
export const TestInputObject: GraphQLInputObjectType =
new GraphQLInputObjectType({
name: 'TestInput',
fields: () => ({
string: { type: GraphQLString },
int: { type: GraphQLInt },
float: { type: GraphQLFloat },
boolean: { type: GraphQLBoolean },
id: { type: GraphQLID },
enum: { type: TestEnum },
object: { type: TestInputObject },
// List
listString: { type: new GraphQLList(GraphQLString) },
listInt: { type: new GraphQLList(GraphQLInt) },
listFloat: { type: new GraphQLList(GraphQLFloat) },
listBoolean: { type: new GraphQLList(GraphQLBoolean) },
listID: { type: new GraphQLList(GraphQLID) },
listEnum: { type: new GraphQLList(TestEnum) },
listObject: { type: new GraphQLList(TestInputObject) },
}),
});
const TestInterface: GraphQLInterfaceType = new GraphQLInterfaceType({
name: 'TestInterface',
resolveType: () => UnionFirst,
fields: {
scalar: {
type: GraphQLString,
resolve: () => ({}),
},
},
});
const AnotherTestInterface: GraphQLInterfaceType = new GraphQLInterfaceType({
name: 'AnotherTestInterface',
resolveType: () => UnionFirst,
fields: {
example: {
type: GraphQLString,
resolve: () => ({}),
},
},
});
export const UnionFirst = new GraphQLObjectType({
name: 'First',
interfaces: [TestInterface, AnotherTestInterface],
fields: () => ({
scalar: {
type: GraphQLString,
resolve: () => ({}),
},
first: {
type: TestType,
resolve: () => ({}),
},
example: {
type: GraphQLString,
resolve: () => ({}),
},
}),
});
export const UnionSecond = new GraphQLObjectType({
name: 'Second',
fields: () => ({
second: {
type: TestType,
resolve: () => ({}),
},
}),
});
export const TestUnion = new GraphQLUnionType({
name: 'TestUnion',
types: [UnionFirst, UnionSecond],
resolveType() {
return UnionFirst;
},
});
export const TestType: GraphQLObjectType = new GraphQLObjectType({
name: 'Test',
fields: () => ({
test: {
type: TestType,
resolve: () => ({}),
},
deprecatedTest: {
type: TestType,
deprecationReason: 'Use test instead.',
resolve: () => ({}),
},
union: {
type: TestUnion,
resolve: () => ({}),
},
first: {
type: UnionFirst,
resolve: () => ({}),
},
id: {
type: GraphQLInt,
resolve: () => ({}),
},
isTest: {
type: GraphQLBoolean,
resolve() {
return true;
},
},
hasArgs: {
type: GraphQLString,
resolve(_value, args) {
return JSON.stringify(args);
},
args: {
string: { type: GraphQLString },
int: { type: GraphQLInt },
float: { type: GraphQLFloat },
boolean: { type: GraphQLBoolean },
id: { type: GraphQLID },
enum: { type: TestEnum },
object: { type: TestInputObject },
// List
listString: { type: new GraphQLList(GraphQLString) },
listInt: { type: new GraphQLList(GraphQLInt) },
listFloat: { type: new GraphQLList(GraphQLFloat) },
listBoolean: { type: new GraphQLList(GraphQLBoolean) },
listID: { type: new GraphQLList(GraphQLID) },
listEnum: { type: new GraphQLList(TestEnum) },
listObject: { type: new GraphQLList(TestInputObject) },
},
},
}),
});
const TestMutationType = new GraphQLObjectType({
name: 'MutationType',
description: 'This is a simple mutation type',
fields: {
setString: {
type: GraphQLString,
description: 'Set the string field',
args: {
value: { type: GraphQLString },
},
},
},
});
const TestSubscriptionType = new GraphQLObjectType({
name: 'SubscriptionType',
description: 'This is a simple subscription type',
fields: {
subscribeToTest: {
type: TestType,
description: 'Subscribe to the test type',
args: {
id: { type: GraphQLString },
},
},
},
});
const OnArgDirective = new GraphQLDirective({
name: 'onArg',
locations: [DirectiveLocation.ARGUMENT_DEFINITION],
});
const OnAllDefsDirective = new GraphQLDirective({
name: 'onAllDefs',
locations: [
DirectiveLocation.SCHEMA,
DirectiveLocation.SCALAR,
DirectiveLocation.OBJECT,
DirectiveLocation.FIELD_DEFINITION,
DirectiveLocation.INTERFACE,
DirectiveLocation.UNION,
DirectiveLocation.ENUM,
DirectiveLocation.ENUM_VALUE,
DirectiveLocation.INPUT_OBJECT,
DirectiveLocation.ARGUMENT_DEFINITION,
DirectiveLocation.INPUT_FIELD_DEFINITION,
],
});
export const TestSchema = new GraphQLSchema({
query: TestType,
mutation: TestMutationType,
subscription: TestSubscriptionType,
directives: [
GraphQLIncludeDirective,
GraphQLSkipDirective,
GraphQLDeprecatedDirective,
OnArgDirective,
OnAllDefsDirective,
],
});
================================================
FILE: examples/cm6-graphql-parcel/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"sourceMap": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"]
}
================================================
FILE: examples/graphiql-cdn/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.0.8](https://github.com/graphql/graphiql/compare/example-graphiql-cdn@0.0.8-alpha.6...example-graphiql-cdn@0.0.8) (2020-06-11)
**Note:** Version bump only for package example-graphiql-cdn
## [0.0.8-alpha.6](https://github.com/graphql/graphiql/compare/example-graphiql-cdn@0.0.8-alpha.5...example-graphiql-cdn@0.0.8-alpha.6) (2020-06-04)
**Note:** Version bump only for package example-graphiql-cdn
## [0.0.8-alpha.5](https://github.com/graphql/graphiql/compare/example-graphiql-cdn@0.0.8-alpha.4...example-graphiql-cdn@0.0.8-alpha.5) (2020-04-10)
**Note:** Version bump only for package example-graphiql-cdn
## [0.0.8-alpha.4](https://github.com/graphql/graphiql/compare/example-graphiql-cdn@0.0.8-alpha.3...example-graphiql-cdn@0.0.8-alpha.4) (2020-04-10)
**Note:** Version bump only for package example-graphiql-cdn
## [0.0.8-alpha.3](https://github.com/graphql/graphiql/compare/example-graphiql-cdn@0.0.8-alpha.2...example-graphiql-cdn@0.0.8-alpha.3) (2020-03-20)
**Note:** Version bump only for package example-graphiql-cdn
## [0.0.8-alpha.2](https://github.com/graphql/graphiql/compare/example-graphiql-cdn@0.0.8-alpha.0...example-graphiql-cdn@0.0.8-alpha.2) (2020-03-20)
**Note:** Version bump only for package example-graphiql-cdn
**Note:** Version bump only for package example-graphiql-cdn
## 0.0.8-alpha.1 (2020-01-18)
## [0.0.7](https://github.com/graphql/graphiql/compare/graphiql-example-cdn@0.0.6...graphiql-example-cdn@0.0.7) (2019-12-03)
**Note:** Version bump only for package graphiql-example-cdn
## [0.0.6](https://github.com/graphql/graphiql/compare/graphiql-example-cdn@0.0.5...graphiql-example-cdn@0.0.6) (2019-11-26)
**Note:** Version bump only for package graphiql-example-cdn
## [0.0.5](https://github.com/graphql/graphiql/compare/graphiql-example-cdn@0.0.4...graphiql-example-cdn@0.0.5) (2019-10-19)
**Note:** Version bump only for package graphiql-example-cdn
================================================
FILE: examples/graphiql-cdn/README.md
================================================
# GraphiQL CDN Example
This is a simple example of using **GraphiQL** directly from a CDN, including the [GraphiQL Explorer plugin](../../packages/graphiql-plugin-explorer/README.md).
It loads the latest GraphiQL version from [esm.sh](https://esm.sh), an ESM-based CDN that serves npm packages as ES modules.
## Setup
No installation or build step is required — just open the `index.html` file in your browser:
- macOS:
```sh
open index.html
```
- Linux:
```sh
firefox index.html
# or
chromium index.html
```
================================================
FILE: examples/graphiql-cdn/index.html
================================================
<!--
* Copyright (c) 2025 GraphQL Contributors
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE file in the root directory of this source tree.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GraphiQL 5 with React 19 and GraphiQL Explorer</title>
<style>
body {
margin: 0;
}
#graphiql {
height: 100dvh;
}
.loading {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
</style>
<link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
<link
rel="stylesheet"
href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
/>
<!--
* Note:
* The ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file.
* `@emotion/is-prop-valid` is a shim to remove the console error ` module "@emotion /is-prop-valid" not found`. Upstream issue: https://github.com/motiondivision/motion/issues/3126
-->
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@19.1.0",
"react/": "https://esm.sh/react@19.1.0/",
"react-dom": "https://esm.sh/react-dom@19.1.0",
"react-dom/": "https://esm.sh/react-dom@19.1.0/",
"graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
"graphiql/": "https://esm.sh/graphiql/",
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
"@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
"graphql": "https://esm.sh/graphql@16.11.0",
"@emotion/is-prop-valid": "data:text/javascript,"
}
}
</script>
<script type="module">
import React from 'react';
import ReactDOM from 'react-dom/client';
import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { explorerPlugin } from '@graphiql/plugin-explorer';
import 'graphiql/setup-workers/esm.sh';
const fetcher = createGraphiQLFetcher({
url: 'https://countries.trevorblades.com',
});
const plugins = [HISTORY_PLUGIN, explorerPlugin()];
function App() {
return React.createElement(GraphiQL, {
fetcher,
plugins,
defaultEditorToolsVisibility: true,
});
}
const container = document.getElementById('graphiql');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));
</script>
</head>
<body>
<div id="graphiql">
<div class="loading">Loading…</div>
</div>
</body>
</html>
================================================
FILE: examples/graphiql-cdn/package.json
================================================
{
"name": "example-graphiql-cdn",
"version": "0.0.0",
"private": true,
"license": "MIT",
"description": "An example using GraphiQL",
"scripts": {
"build-demo": "copy index.html ../../packages/graphiql/cdn/"
}
}
================================================
FILE: examples/graphiql-create-react-app/README.md
================================================
# GraphiQL `create-react-app` Example
> [!WARNING]
>
> This example has been removed. You can find its last version [here](https://github.com/graphql/graphiql/tree/3b93d27f7568d93db5cd146157220b127eeea737/examples/graphiql-create-react-app).
> We recommend using the [GraphiQL Vite](../graphiql-vite) or [GraphiQL Next.js](../graphiql-nextjs) examples instead.
================================================
FILE: examples/graphiql-nextjs/README.md
================================================
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).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
================================================
FILE: examples/graphiql-nextjs/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
================================================
FILE: examples/graphiql-nextjs/next.config.ts
================================================
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;
================================================
FILE: examples/graphiql-nextjs/package.json
================================================
{
"name": "example-graphiql-nextjs",
"version": "0.0.0",
"private": true,
"scripts": {
"types:check": "tsc --noEmit",
"dev": "next",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"graphiql": "^5.0.0-rc.0",
"next": "15.4.0",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"typescript": "^5"
}
}
================================================
FILE: examples/graphiql-nextjs/src/app/globals.css
================================================
body {
margin: 0;
}
.graphiql-container {
height: 100dvh !important;
}
================================================
FILE: examples/graphiql-nextjs/src/app/graphiql.tsx
================================================
'use client';
import type { FC } from 'react';
import { GraphiQL } from 'graphiql';
import 'graphiql/setup-workers/webpack';
import 'graphiql/style.css';
async function fetcher(graphQLParams: Record<string, unknown>) {
const response = await fetch('https://graphql.earthdata.nasa.gov/api', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(graphQLParams),
});
return response.json();
}
export const GraphiQLPage: FC = () => {
return <GraphiQL fetcher={fetcher} />;
};
================================================
FILE: examples/graphiql-nextjs/src/app/layout.tsx
================================================
import type { FC, ReactNode } from 'react';
import type { Metadata } from 'next';
import './globals.css';
export const metadata: Metadata = {
description: 'Example of using GraphiQL with the Next.js App Router',
// Empty object adds open graph and twitter meta-tags
openGraph: {},
};
const RootLayout: FC<Readonly<{ children: ReactNode }>> = ({ children }) => {
return (
<html lang="en">
<body>{children}</body>
</html>
);
};
export default RootLayout;
================================================
FILE: examples/graphiql-nextjs/src/app/page.ts
================================================
import type { Metadata } from 'next';
export { GraphiQLPage as default } from './graphiql';
export const metadata: Metadata = {
title: 'GraphiQL Next.js Example',
};
================================================
FILE: examples/graphiql-nextjs/tsconfig.json
================================================
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
================================================
FILE: examples/graphiql-parcel/README.md
================================================
# GraphiQL Parcel Example
> [!WARNING]
>
> This example has been removed. You can find its last version [here](https://github.com/graphql/graphiql/tree/3b93d27f7568d93db5cd146157220b127eeea737/examples/graphiql-parcel).
> We recommend using the [GraphiQL Vite](../graphiql-vite) or [GraphiQL Next.js](../graphiql-nextjs) examples instead.
================================================
FILE: examples/graphiql-vite/README.md
================================================
# GraphiQL Vite Example
This example demonstrates how to use GraphiQL with Vite.
## Setup
1. `yarn dev` to start Vite dev server.
1. `yarn build` to build production ready transpiled files. Find the output in `dist` folder.
================================================
FILE: examples/graphiql-vite/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GraphiQL Vite Example</title>
<style>
body {
margin: 0;
}
#graphiql {
height: 100dvh;
}
.loading {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="graphiql">
<div class="loading">Loading…</div>
</div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
================================================
FILE: examples/graphiql-vite/package.json
================================================
{
"name": "example-graphiql-vite",
"version": "0.0.0",
"private": true,
"dependencies": {
"graphiql": "^5.2.2",
"graphql": "^16.11.0",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.4.1",
"vite": "^6.3.4",
"vite-plugin-monaco-editor": "^1.1.0"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"start": "vite preview"
}
}
================================================
FILE: examples/graphiql-vite/src/App.jsx
================================================
import { GraphiQL } from 'graphiql';
import 'graphiql/style.css';
async function fetcher(graphQLParams) {
const response = await fetch('https://graphql.earthdata.nasa.gov/api', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(graphQLParams),
});
return response.json();
}
function App() {
return <GraphiQL fetcher={fetcher} />;
}
export default App;
================================================
FILE: examples/graphiql-vite/src/index.jsx
================================================
import { createRoot } from 'react-dom/client';
import App from './App';
const root = createRoot(document.getElementById('graphiql'));
root.render(<App />);
================================================
FILE: examples/graphiql-vite/vite.config.mjs
================================================
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import $monacoEditorPlugin from 'vite-plugin-monaco-editor';
const monacoEditorPlugin = $monacoEditorPlugin.default ?? $monacoEditorPlugin;
export default defineConfig({
plugins: [
react(),
monacoEditorPlugin({
languageWorkers: ['editorWorkerService', 'json'],
customWorkers: [
{
label: 'graphql',
entry: 'monaco-graphql/esm/graphql.worker.js',
},
],
}),
],
});
================================================
FILE: examples/graphiql-vite-react-router/README.md
================================================
# Usage GraphiQL with Vite, React Router and `ssr: true`
When using GraphiQL with [React Router’s SSR mode](https://reactrouter.com/api/framework-conventions/react-router.config.ts#ssr),
you need to mark the GraphiQL component as a [client module](https://reactrouter.com/api/framework-conventions/client-modules)
by adding `.client` to the file name.
```tsx
// graphiql.client.tsx
import { GraphiQL } from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
const fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });
export const graphiql = <GraphiQL fetcher={fetcher} />;
```
```ts
// route.ts
import type { FC } from 'react';
import type { LinksFunction, MetaFunction } from 'react-router';
import graphiqlStyles from 'graphiql/style.css?url';
import { graphiql } from './graphiql.client';
export const meta: MetaFunction = () => {
return [{ title: 'API Explorer' }];
};
export const links: LinksFunction = () => {
return [{ rel: 'stylesheet', href: graphiqlStyles }];
};
const Route: FC = () => {
return graphiql;
};
export default Route;
```
## Setup
1. `yarn dev` to start Vite dev server.
1. `yarn build` to build production ready transpiled files. Find the output in `dist` folder.
================================================
FILE: examples/graphiql-vite-react-router/app/root.tsx
================================================
import type { FC } from 'react';
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
const Root: FC = () => {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<Outlet />
<ScrollRestoration />
<Scripts />
</body>
</html>
);
};
export default Root;
================================================
FILE: examples/graphiql-vite-react-router/app/routes/_index/create-fetcher.ts
================================================
import type { GraphiQLProps } from 'graphiql';
export function createFetcher(apiUrl: string): GraphiQLProps['fetcher'] {
return async function (graphQLParams, opts) {
const response = await fetch(apiUrl, {
method: 'POST',
headers: {
...opts?.headers,
'Content-Type': 'application/json',
},
body: JSON.stringify(graphQLParams),
});
return response.json();
};
}
================================================
FILE: examples/graphiql-vite-react-router/app/routes/_index/globals.css
================================================
body {
margin: 0;
}
.graphiql-container {
height: 100dvh;
}
================================================
FILE: examples/graphiql-vite-react-router/app/routes/_index/graphiql.client.tsx
================================================
import type { FC } from 'react';
import { GraphiQL } from 'graphiql';
import { ToolbarButton, useGraphiQL } from '@graphiql/react';
import { createFetcher } from './create-fetcher';
import 'graphiql/setup-workers/esm.sh';
export const graphiql = (
<GraphiQL
dangerouslyAssumeSchemaIsValid
defaultEditorToolsVisibility="variables"
fetcher={createFetcher('https://graphql.earthdata.nasa.gov/api')}
isHeadersEditorEnabled={false}
>
<GraphiQL.Logo>API Explorer</GraphiQL.Logo>
<GraphiQL.Toolbar>
{({ prettify, copy, merge }) => (
<>
{prettify}
{copy}
{merge}
<Button />
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
);
const Button: FC = () => {
const { queryEditor, variableEditor } = useGraphiQL(state => ({
queryEditor: state.queryEditor,
variableEditor: state.variableEditor,
}));
async function onShareExplorer(): Promise<void> {
const shareableURL = new URL('/explorer', location.origin);
const operations = queryEditor!.getValue();
const variables = variableEditor!.getValue();
if (operations) {
shareableURL.searchParams.set('query', encodeURIComponent(operations));
}
if (variables) {
shareableURL.searchParams.set('variables', encodeURIComponent(variables));
}
const url = shareableURL.toString();
await navigator.clipboard.writeText(url);
}
return (
<ToolbarButton
label="Share your Explorer query"
onClick={onShareExplorer}
style={{ textAlign: 'center' }}
title="Share your Explorer query"
>
S
</ToolbarButton>
);
};
================================================
FILE: examples/graphiql-vite-react-router/app/routes/_index/route.ts
================================================
import type { FC } from 'react';
import type { LinksFunction, MetaFunction } from 'react-router';
import { graphiql } from './graphiql.client';
import graphiqlCss from 'graphiql/style.css?url';
import globalsCss from './globals.css?url';
export const meta: MetaFunction = () => {
return [{ title: 'API Explorer' }];
};
export const links: LinksFunction = () => {
return [
{ rel: 'stylesheet', href: graphiqlCss },
{ rel: 'stylesheet', href: globalsCss },
];
};
const Route: FC = () => graphiql;
export default Route;
================================================
FILE: examples/graphiql-vite-react-router/app/routes.ts
================================================
import { flatRoutes } from '@react-router/fs-routes';
export default flatRoutes();
================================================
FILE: examples/graphiql-vite-react-router/package.json
================================================
{
"name": "example-graphiql-vite-react-router",
"version": "1.0.0",
"private": true,
"license": "MIT",
"sideEffects": false,
"type": "module",
"scripts": {
"build": "react-router build",
"dev": "react-router dev --port 4000",
"start": "react-router-serve dist/server/index.js"
},
"dependencies": {
"@graphiql/react": "0.37.3",
"@react-router/fs-routes": "7.6.3",
"@react-router/node": "7.6.3",
"@react-router/serve": "7.6.3",
"graphiql": "5.2.2",
"isbot": "^5",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-router": "7.6.3"
},
"devDependencies": {
"@react-router/dev": "7.6.3",
"@types/node": "22.15.34",
"@types/react": "19.1.8",
"typescript": "5.8.3",
"vite": "7.0.4"
}
}
================================================
FILE: examples/graphiql-vite-react-router/public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow: /
================================================
FILE: examples/graphiql-vite-react-router/react-router.config.ts
================================================
import type { Config } from '@react-router/dev/config';
const config: Config = {
ssr: true,
buildDirectory: 'dist',
};
export default config;
================================================
FILE: examples/graphiql-vite-react-router/tsconfig.json
================================================
{
"compilerOptions": {
"target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"jsx": "react-jsx",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"module": "ESNext",
"moduleResolution": "node",
"baseUrl": "./",
"rootDirs": ["./", "./.react-router/types"],
"types": ["@react-router/node", "node", "vite/client"],
"resolveJsonModule": true,
"allowJs": true,
"inlineSourceMap": true,
"noEmit": true,
"inlineSources": true,
"isolatedModules": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"allowUnusedLabels": false,
"allowUnreachableCode": false,
"skipDefaultLibCheck": true,
"skipLibCheck": true
},
"include": [".react-router/types/**/*", "**/*.ts", "**/*.tsx"]
}
================================================
FILE: examples/graphiql-vite-react-router/vite.config.ts
================================================
import { reactRouter } from '@react-router/dev/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [reactRouter()],
});
================================================
FILE: examples/graphiql-webpack/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [1.1.1-alpha.8](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.1.1-alpha.7...example-graphiql-webpack@1.1.1-alpha.8) (2021-01-07)
**Note:** Version bump only for package example-graphiql-webpack
## [1.1.1-alpha.7](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.1.1-alpha.6...example-graphiql-webpack@1.1.1-alpha.7) (2021-01-07)
**Note:** Version bump only for package example-graphiql-webpack
## [1.1.1-alpha.6](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.1.1-alpha.5...example-graphiql-webpack@1.1.1-alpha.6) (2021-01-07)
**Note:** Version bump only for package example-graphiql-webpack
## [1.1.1-alpha.5](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.1.1-alpha.4...example-graphiql-webpack@1.1.1-alpha.5) (2021-01-03)
**Note:** Version bump only for package example-graphiql-webpack
## [1.1.1-alpha.4](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.1.1-alpha.3...example-graphiql-webpack@1.1.1-alpha.4) (2020-12-28)
**Note:** Version bump only for package example-graphiql-webpack
## [1.1.1-alpha.3](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.1.1-alpha.2...example-graphiql-webpack@1.1.1-alpha.3) (2020-08-26)
**Note:** Version bump only for package example-graphiql-webpack
## [1.1.1-alpha.2](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.1.1-alpha.1...example-graphiql-webpack@1.1.1-alpha.2) (2020-08-22)
**Note:** Version bump only for package example-graphiql-webpack
## [1.1.1-alpha.1](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.1.1-alpha.0...example-graphiql-webpack@1.1.1-alpha.1) (2020-08-12)
**Note:** Version bump only for package example-graphiql-webpack
## [1.1.1-alpha.0](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.1.0...example-graphiql-webpack@1.1.1-alpha.0) (2020-08-10)
**Note:** Version bump only for package example-graphiql-webpack
# [1.1.0](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0...example-graphiql-webpack@1.1.0) (2020-08-06)
### Features
- [RFC] GraphiQL rewrite for monaco editor, react context and redesign, i18n ([#1523](https://github.com/graphql/graphiql/issues/1523)) ([ad730cd](https://github.com/graphql/graphiql/commit/ad730cdc2e3cb7216d821a01725c60475989ee20))
# [1.0.0](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.13...example-graphiql-webpack@1.0.0) (2020-06-11)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.13](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.12...example-graphiql-webpack@1.0.0-alpha.13) (2020-06-04)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.12](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.11...example-graphiql-webpack@1.0.0-alpha.12) (2020-06-04)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.11](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.10...example-graphiql-webpack@1.0.0-alpha.11) (2020-05-28)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.10](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.9...example-graphiql-webpack@1.0.0-alpha.10) (2020-05-19)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.9](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.8...example-graphiql-webpack@1.0.0-alpha.9) (2020-05-17)
### Features
- introduce proper vscode completion kinds ([#1488](https://github.com/graphql/graphiql/issues/1488)) ([f19aa0d](https://github.com/graphql/graphiql/commit/f19aa0ddde6109526c101c8a487f43bbb8238394))
# [1.0.0-alpha.8](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.7...example-graphiql-webpack@1.0.0-alpha.8) (2020-04-10)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.7](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.6...example-graphiql-webpack@1.0.0-alpha.7) (2020-04-10)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.6](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.5...example-graphiql-webpack@1.0.0-alpha.6) (2020-04-10)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.5](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.4...example-graphiql-webpack@1.0.0-alpha.5) (2020-04-06)
### Features
- upgrade to graphql@15.0.0 for [#1191](https://github.com/graphql/graphiql/issues/1191) ([#1204](https://github.com/graphql/graphiql/issues/1204)) ([f13c8e9](https://github.com/graphql/graphiql/commit/f13c8e9d0e66df4b051b332c7d02f4bb83e07ffd))
# [1.0.0-alpha.4](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.3...example-graphiql-webpack@1.0.0-alpha.4) (2020-04-03)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.3](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.2...example-graphiql-webpack@1.0.0-alpha.3) (2020-03-20)
**Note:** Version bump only for package example-graphiql-webpack
# [1.0.0-alpha.2](https://github.com/graphql/graphiql/compare/example-graphiql-webpack@1.0.0-alpha.0...example-graphiql-webpack@1.0.0-alpha.2) (2020-03-20)
**Note:** Version bump only for package example-graphiql-webpack
# 1.0.0-alpha.1 (2020-01-18)
### Features
- deprecate support for 15, support react 16 features ([#1107](https://github.com/graphql/graphiql/issues/1107)) ([bc4b6fc](https://github.com/graphql/graphiql/commit/bc4b6fc))
### BREAKING CHANGES
- Deprecate support for React 15. Please use React 16.8 or greater for hooks support. Co-authored-by: @ryan-m-walker, @acao Reviewed-by: @benjie
## [0.0.10](https://github.com/graphql/graphiql/compare/graphiql-example-webpack@0.0.9...graphiql-example-webpack@0.0.10) (2019-12-09)
**Note:** Version bump only for package graphiql-example-webpack
## [0.0.9](https://github.com/graphql/graphiql/compare/graphiql-example-webpack@0.0.8...graphiql-example-webpack@0.0.9) (2019-12-09)
**Note:** Version bump only for package graphiql-example-webpack
## [0.0.8](https://github.com/graphql/graphiql/compare/graphiql-example-webpack@0.0.7...graphiql-example-webpack@0.0.8) (2019-12-09)
**Note:** Version bump only for package graphiql-example-webpack
## [0.0.7](https://github.com/graphql/graphiql/compare/graphiql-example-webpack@0.0.6...graphiql-example-webpack@0.0.7) (2019-12-03)
### Bug Fixes
- ensure css files move with babel dist ([ca95547](https://github.com/graphql/graphiql/commit/ca95547))
## [0.0.6](https://github.com/graphql/graphiql/compare/graphiql-example-webpack@0.0.5...graphiql-example-webpack@0.0.6) (2019-12-03)
### Bug Fixes
- convert browserify build to webpack, fixes [#976](https://github.com/graphql/graphiql/issues/976) ([#1001](https://github.com/graphql/graphiql/issues/1001)) ([3caf041](https://github.com/graphql/graphiql/commit/3caf041))
## 0.0.5 (2019-11-26)
### Bug Fixes
- webpack resolutions for [#882](https://github.com/graphql/graphiql/issues/882), add webpack example ([ea9df3e](https://github.com/graphql/graphiql/commit/ea9df3e))
================================================
FILE: examples/graphiql-webpack/README.md
================================================
## GraphiQL Webpack Example
This example demonstrates how to transpile your own custom ES6 GraphiQL
implementation with webpack and babel configuration.
It shows how to add plugins and even how to create a custom plugin.
There is also a no-config example with `create-react-app`:
[](https://codesandbox.io/s/graphiql-example-nhzvc)
It appears `create-react-app` supports all the language features we require.
### Setup
1. `yarn` and `yarn start` from this folder to start webpack dev server
================================================
FILE: examples/graphiql-webpack/babel.config.js
================================================
module.exports = require('../../resources/babel.config');
================================================
FILE: examples/graphiql-webpack/index.html.ejs
================================================
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#ffffff" />
<link rel="manifest" href="manifest.json" />
<link rel="icon" href="logo.svg" />
<title>GraphiQL Webpack Example!</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
================================================
FILE: examples/graphiql-webpack/package.json
================================================
{
"name": "example-graphiql-webpack",
"version": "0.0.0",
"private": true,
"license": "MIT",
"description": "A GraphiQL example with Webpack",
"scripts": {
"build-demo": "webpack-cli && mkdirp ../../packages/graphiql/webpack && cp -r dist/** ../../packages/graphiql/webpack",
"start": "NODE_ENV=development webpack-cli serve"
},
"dependencies": {
"@graphiql/plugin-code-exporter": "^5.1.1",
"@graphiql/plugin-explorer": "^5.1.1",
"@graphiql/react": "^0.37.3",
"@graphiql/toolkit": "^0.11.3",
"graphiql": "^5.2.2",
"graphql": "^16.9.0",
"graphql-ws": "^5.5.5",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"regenerator-runtime": "^0.13.9"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"ajv-formats": "^3.0.1",
"babel-loader": "^9.1.2",
"copy-webpack-plugin": "11.0.0",
"cross-env": "^7.0.2",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"react-hot-loader": "^4.13.1",
"style-loader": "^3.3.1",
"webpack": "5.94.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.1",
"webpack-manifest-plugin": "^5.0.0",
"workbox-webpack-plugin": "^7.0.0",
"worker-loader": "^2.0.0"
}
}
================================================
FILE: examples/graphiql-webpack/src/index.css
================================================
@import 'graphiql/style.css';
@import '@graphiql/plugin-explorer/style.css';
@import '@graphiql/plugin-code-exporter/style.css';
@import './select-server-plugin.css';
body {
padding: 0;
margin: 0;
min-height: 100vh;
background-color: hsl(var(--color-base));
}
#root {
height: 100vh;
}
.plugin-title {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-medium);
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1rem;
}
.select-server--button {
background-color: hsl(var(--color-primary));
border: 0 none;
display: block;
width: 100%;
color: hsl(var(--color-base));
padding: 0.5rem;
font-size: 1rem;
margin-bottom: 1rem;
}
.select-server--button.disabled {
background-color: hsl(var(--color-base));
color: hsl(var(--color-primary));
}
.select-server--schema-error {
color: hsl(var(--color-error));
margin-top: 0.5rem;
display: block;
}
.select-server--schema-error code {
padding: 0.5rem;
background-color: hsla(var(--color-base), var(--alpha-secondary));
}
.select-server--schema-success {
color: hsl(var(--color-success));
margin-top: 0.5rem;
display: block;
}
.select-server--schema-loading {
color: hsl(var(--color-warning));
margin-top: 0.5rem;
display: block;
}
input.select-server--input {
display: block;
width: 100%;
color: hsla(var(--color-neutral), var(--alpha-secondary));
padding: 0.5rem;
background-color: hsla(var(--color-primary), var(--alpha-background-medium));
border: 0 none;
font-size: 1.05rem;
}
.select-server--input-error {
color: hsl(var(--color-error));
margin-top: 0.5rem;
display: block;
}
li.select-server--previous-entry {
display: flex;
flex-direction: row;
flex-grow: inherit;
width: 100%;
}
li.select-server--previous-entry span {
display: flex;
cursor: pointer;
padding: 0.5rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-grow: 1;
}
li.select-server--previous-entry span:hover,
li.select-server--previous-entry button:hover {
background-color: hsl(var(--color-primary));
color: hsl(var(--color-base));
}
li.select-server--previous-entry button {
background-color: transparent;
border: hsl(var(--color-neutral));
display: flex;
color: hsl(var(--color-neutral));
font-size: 1rem;
cursor: pointer;
padding: 0.5rem;
}
================================================
FILE: examples/graphiql-webpack/src/index.jsx
================================================
import 'regenerator-runtime/runtime.js';
import React, { useState, useEffect, useMemo } from 'react';
import { createRoot } from 'react-dom/client';
import { GraphiQL } from 'graphiql';
import { explorerPlugin } from '@graphiql/plugin-explorer';
import { getSnippets } from './snippets';
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { useGraphiQL } from '@graphiql/react';
import { serverSelectPlugin, LAST_URL_KEY } from './select-server-plugin';
import 'graphiql/setup-workers/webpack';
import './index.css';
export const STARTING_URL = 'https://countries.trevorblades.com';
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then(registration => {
console.log('SW registered:', registration);
})
.catch(registrationError => {
console.error('SW registration failed:', registrationError);
});
});
}
/**
* A manual fetcher implementation example
* @returns
*/
// const fetcher = async (graphQLParams, options) => {
// const data = await fetch(
// STARTING_URL,
// {
// method: 'POST',
// headers: {
// Accept: 'application/json',
// 'Content-Type': 'application/json',
// ...options.headers,
// },
// body: JSON.stringify(graphQLParams),
// credentials: 'same-origin',
// },
// );
// return data.json().catch(() => data.text());
// };
const style = { height: '100vh' };
/**
* instantiate outside of the component lifecycle
* unless you need to pass it dynamic values from your React app,
* then use the `useMemo` hook
*/
const explorer = explorerPlugin();
function App() {
const [currentUrl, setUrl] = useState('');
// TODO: a breaking change where we make URL an internal state concern, and then expose hooks
// so that you can handle/set URL state internally from a plugin
// fetcher could then pass a dynamic URL config object to the fetcher internally
const exporter = useMemo(
() =>
codeExporterPlugin({ snippets: getSnippets({ serverUrl: currentUrl }) }),
[currentUrl],
);
const fetcher = useMemo(
() => createGraphiQLFetcher({ url: currentUrl }),
[currentUrl],
);
const serverSelect = useMemo(
() => serverSelectPlugin({ url: currentUrl, setUrl }),
[currentUrl],
);
return (
<GraphiQL
style={style}
plugins={[serverSelect, explorer, exporter]}
fetcher={fetcher}
shouldPersistHeaders
>
<GraphiQLContextBound setUrl={setUrl} />
</GraphiQL>
);
}
/**
* `useGraphiQL` is a context hook that's only available within the `<GraphiQL>`
* provider tree. `<GraphiQLContextBound>` must be rendered as a child of `<GraphiQL>`.
*/
function GraphiQLContextBound({ setUrl }) {
const storage = useGraphiQL(state => state.storage);
const lastUrl = storage.get(LAST_URL_KEY) ?? STARTING_URL;
useEffect(() => {
setUrl(lastUrl);
}, [lastUrl, setUrl]);
return null;
}
const root = createRoot(document.getElementById('root'));
root.render(<App />);
================================================
FILE: examples/graphiql-webpack/src/select-server-plugin.css
================================================
.plugin-title {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-medium);
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1rem;
}
.plugin-subheading {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-medium);
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem 0;
}
.select-server--button {
background-color: hsl(var(--color-primary));
border: 0 none;
display: block;
width: 100%;
color: hsl(var(--color-base));
padding: 0.5rem;
font-size: 1rem;
margin-bottom: 1rem;
}
.select-server--button.disabled {
background-color: hsl(var(--color-base));
color: hsl(var(--color-primary));
}
.select-server--schema-error {
color: hsl(var(--color-error));
margin-top: 0.5rem;
display: block;
}
.select-server--schema-error code {
padding: 0.5rem;
background-color: hsla(var(--color-base), var(--alpha-secondary));
}
.select-server--schema-success {
color: hsl(var(--color-success));
margin-top: 0.5rem;
display: block;
}
.select-server--schema-loading {
color: hsl(var(--color-warning));
margin-top: 0.5rem;
display: block;
}
input.select-server--input {
display: block;
width: 100%;
color: hsla(var(--color-neutral), var(--alpha-secondary));
padding: 0.5rem;
background-color: hsla(var(--color-primary), var(--alpha-background-medium));
border: 0 none;
font-size: 1.05rem;
}
.select-server--input-error {
color: hsl(var(--color-error));
margin-top: 0.5rem;
display: block;
}
li.select-server--previous-entry {
display: flex;
flex-direction: row;
flex-grow: inherit;
width: 100%;
}
li.select-server--previous-entry span {
display: flex;
cursor: pointer;
padding: 0.5rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-grow: 1;
}
li.select-server--previous-entry span:hover,
li.select-server--previous-entry button:hover {
background-color: hsl(var(--color-primary));
color: hsl(var(--color-base));
}
li.select-server--previous-entry button {
background-color: transparent;
border: hsl(var(--color-neutral));
display: flex;
color: hsl(var(--color-neutral));
font-size: 1rem;
cursor: pointer;
padding: 0.5rem;
}
================================================
FILE: examples/graphiql-webpack/src/select-server-plugin.jsx
================================================
import * as React from 'react';
import { useGraphiQL } from '@graphiql/react';
export const LAST_URL_KEY = 'lastURL';
export const PREV_URLS_KEY = 'previousURLs';
const SelectServer = ({ url, setUrl }) => {
const inputRef = React.useRef(null);
const { storage, schema, isIntrospecting, fetchError } = useGraphiQL(
state => ({
storage: state.storage,
schema: state.schema,
isIntrospecting: state.isIntrospecting,
fetchError: state.fetchError,
}),
);
const lastUrl = storage.get(LAST_URL_KEY);
const currentUrl = lastUrl ?? url;
const [inputValue, setInputValue] = React.useState(currentUrl);
const [previousUrls, setPreviousUrls] = React.useState(
JSON.parse(storage.get(PREV_URLS_KEY)) ?? [currentUrl],
);
const [error, setError] = React.useState(null);
const sameValue = inputValue.trim() === url;
return (
<div>
<div className="plugin-title">Select Server</div>
<div>
<input
className="select-server--input"
ref={inputRef}
defaultValue={currentUrl}
onChange={e => setInputValue(e.target.value)}
spellCheck={false}
pattern="https?://.+"
/>
{error && <div className="select-server--input-error">{error}</div>}
</div>
<div>
<button
className={`select-server--button ${sameValue ? 'disabled' : ''}`}
onClick={() => {
const value = inputRef?.current?.value.trim();
if (!value?.startsWith('http')) {
setError('invalid url');
return;
}
setError(null);
setUrl(value);
storage.set(LAST_URL_KEY, value);
setInputValue(value);
if (!previousUrls.includes(value)) {
previousUrls.push(value);
storage.set(PREV_URLS_KEY, JSON.stringify(previousUrls));
setPreviousUrls(previousUrls);
}
}}
disabled={sameValue}
aria-disabled={sameValue}
>
Change Schema URL
</button>
{fetchError && (
<div>
<div className="select-server--schema-error">
There was an error fetching your schema:
</div>
<div className="select-server--schema-error">
<code>
{JSON.parse(fetchError).errors.map(({ message }) => message)}
</code>
</div>
</div>
)}
{isIntrospecting ? (
<div className="select-server--schema-loading">Schema loading...</div>
) : (
schema &&
!fetchError && (
<div className="select-server--schema-success">
Schema retrieved successfully
</div>
)
)}
</div>
<div>
<div className="plugin-subheading">Previous Severs</div>
<ul style={{ padding: 0 }}>
{previousUrls.map(prev => {
return (
<li className="select-server--previous-entry" key={prev}>
<span
onClick={() => {
storage.set(LAST_URL_KEY, prev);
inputRef.current.value = prev;
setError(null);
setUrl(prev);
setInputValue(prev);
}}
title={`Switch to ${prev}`}
>
{prev}
</span>
<button
title="Delete server URL from history"
onClick={() => {
if (!previousUrls.includes(prev)) {
return;
}
const filteredPreviousUrls = previousUrls.filter(
prevUrl => prevUrl !== prev,
);
storage.set(
PREV_URLS_KEY,
JSON.stringify(filteredPreviousUrls),
);
setPreviousUrls(filteredPreviousUrls);
}}
>
<svg
width="1em"
height="5em"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
aria-hidden="true"
viewBox="0 0 23 23"
clipRule="evenodd"
style={{ height: '1em', width: '1em' }}
>
<title>trash icon</title>
<path
d="M19 24h-14c-1.104 0-2-.896-2-2v-17h-1v-2h6v-1.5c0-.827.673-1.5 1.5-1.5h5c.825 0 1.5.671 1.5 1.5v1.5h6v2h-1v17c0 1.104-.896 2-2 2zm0-19h-14v16.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-16.5zm-7 7.586l3.293-3.293 1.414 1.414-3.293 3.293 3.293 3.293-1.414 1.414-3.293-3.293-3.293 3.293-1.414-1.414 3.293-3.293-3.293-3.293 1.414-1.414 3.293 3.293zm2-10.586h-4v1h4v-1z"
fill="currentColor"
strokeWidth="0.25"
stroke="currentColor"
/>
</svg>
</button>
</li>
);
})}
</ul>
</div>
</div>
);
};
export function serverSelectPlugin({ url, setUrl }) {
return {
title: 'Select Server',
icon: () => (
<svg
height="1em"
viewBox="-1.5 0 24 24"
xmlns="http://www.w3.org/2000/svg"
strokeWidth="1.5"
>
<path
stroke="currentColor"
d="m12.731 2.751 4.935 2.849c.39-.41.94-.664 1.549-.664 1.181 0 2.138.957 2.138 2.138 0 1.001-.688 1.842-1.617 2.074l-.015.003v5.7c.949.233 1.642 1.076 1.642 2.081 0 1.182-.958 2.14-2.14 2.14-.637 0-1.208-.278-1.6-.719l-.002-.002-4.905 2.832c.069.202.109.434.109.675 0 1.182-.958 2.14-2.14 2.14s-2.14-.958-2.14-2.14c0-.216.032-.425.092-.621l-.004.015-4.941-2.844c-.39.407-.939.66-1.546.66-1.182 0-2.14-.958-2.14-2.14 0-1.002.689-1.844 1.619-2.076l.015-.003v-5.699c-.951-.231-1.646-1.076-1.646-2.082 0-1.182.958-2.14 2.14-2.14.396 0 .768.108 1.086.296l-.01-.005c.184.106.342.231.479.376l.001.001 4.938-2.85c-.056-.182-.088-.391-.088-.608 0-1.181.958-2.139 2.139-2.139s2.139.958 2.139 2.139c0 .219-.033.43-.094.629l.004-.015zm-.515.877c-.019.021-.037.039-.057.057l-.001.001 6.461 11.19c.026-.009.056-.016.082-.023v-5.707c-.938-.238-1.621-1.076-1.621-2.072 0-.183.023-.361.066-.531l-.003.015c.006-.024.012-.049.019-.072zm-3.015.059-.06-.06-4.946 2.852c.053.177.084.381.084.592 0 .969-.645 1.787-1.53 2.049l-.015.004-.076.021v5.708l.084.023 6.461-11.19zm2.076.507c-.179.053-.384.084-.596.084s-.417-.031-.611-.088l.015.004-6.46 11.189c.286.276.496.629.597 1.026l.003.015h12.911c.102-.413.313-.768.599-1.043l.001-.001-6.456-11.186zm.986 16.227 4.917-2.838c-.015-.047-.027-.094-.038-.142h-12.92l-.021.083 4.939 2.852c.39-.403.936-.653 1.54-.653.626 0 1.189.268 1.581.696l.001.002z"
/>
</svg>
),
content() {
return <SelectServer url={url} setUrl={setUrl} />;
},
};
}
================================================
FILE: examples/graphiql-webpack/src/snippets.js
================================================
const removeQueryName = query =>
query.replace(
/^[^{(]+([{(])/,
(_match, openingCurlyBracketsOrParenthesis) =>
`query ${openingCurlyBracketsOrParenthesis}`,
);
const getQuery = (arg, spaceCount) => {
const { operationDataList } = arg;
console.log(arg);
const { query } = operationDataList[0];
const anonymousQuery = removeQueryName(query);
return (
' '.repeat(spaceCount) +
anonymousQuery.replaceAll('\n', '\n' + ' '.repeat(spaceCount))
);
};
export const getSnippets = ({ serverUrl }) => {
const exampleSnippetZero = {
name: 'cURL',
language: 'shell',
codeMirrorMode: 'shell',
options: [],
generate: arg => `curl -g \
-X POST \
-H "Content-Type: application/json" \
-d '{"query": "${arg.operationDataList[0].query.replaceAll('\n', ' ')}"}' \
${serverUrl}`,
};
const exampleSnippetOne = {
name: 'Example One',
language: 'JavaScript',
codeMirrorMode: 'jsx',
options: [],
generate: arg => `export const query = graphql\`
${getQuery(arg, 2)}
\`
`,
};
const exampleSnippetTwo = {
name: 'Example Two',
language: 'JavaScript',
codeMirrorMode: 'jsx',
options: [],
generate: arg => `import { graphql } from 'graphql'
export const query = graphql\`
${getQuery(arg, 2)}
\`
`,
};
return [exampleSnippetZero, exampleSnippetOne, exampleSnippetTwo];
};
================================================
FILE: examples/graphiql-webpack/webpack.config.js
================================================
const { GenerateSW } = require('workbox-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('node:path');
const isDev = process.env.NODE_ENV === 'development';
const isHMR = process.env.WEBPACK_SERVE;
const prodPlugins = [];
if (!isHMR) {
prodPlugins.push(
new GenerateSW({
maximumFileSizeToCacheInBytes: 1024 * 1024 * 20,
}),
);
}
/**
* @type {import('webpack').Configuration}
*/
module.exports = {
entry: isDev
? [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, `only-` means to only hot reload for successful updates
'./src/index.jsx', // the entry point of our app
]
: './src/index.jsx',
mode: process.env.NODE_ENV ?? 'development',
devtool: 'inline-source-map',
performance: {
hints: false,
},
output: {
filename: '[name].[contenthash].js',
clean: true,
},
module: {
rules: [
{
test: /\.html$/,
use: ['file?name=[name].[ext]'],
},
// for graphql module, which uses mjs still
{
type: 'javascript/auto',
test: /\.mjs$/,
use: [],
include: /node_modules/,
},
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { modules: false }],
'@babel/preset-react',
],
},
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.svg$/,
use: [{ loader: 'svg-inline-loader' }],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader'],
},
],
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.css', '.mjs'],
},
plugins: [
...prodPlugins,
new CopyPlugin({
patterns: [{ from: 'public' }],
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, '/index.html.ejs'),
}),
new WebpackManifestPlugin({
seed: {
name: 'GraphiQL PWA',
icons: [
{
src: 'logo.svg',
sizes: '48x48 72x72 96x96 128x128 256x256 512x512',
type: 'image/svg+xml',
purpose: 'any',
},
],
background_color: '#ffffff',
theme_color: '#D60590',
start_url: './index.html',
display: 'standalone',
display_override: ['fullscreen', 'minimal-ui'],
'logo.svg': 'auto/logo.svg',
},
}),
],
devServer: {
hot: true,
// bypass simple localhost CORS restrictions by setting
// these to 127.0.0.1 in /etc/hosts
allowedHosts: ['local.test.com', 'graphiql.com'],
},
};
================================================
FILE: examples/monaco-graphql-nextjs/README.md
================================================
# Monaco GraphQL Next.js Example
## Getting Started
This is a working example of `monaco-editor` and `monaco-graphql` using
Next.js 15 with Turbopack.
It shows how to use the latest monaco-editor with next.js and a custom
webworker, without using `@monaco/react` or `monaco-editor-react`'s approach of
cdn (AMD) bundles. These approaches avoid using ESM `monaco-editor` or web
workers, which prevents introducing custom web workers like with
`monaco-graphql`.
For lazy loading, we use `next/dynamic` with `{ssr: false}`, but any
similar client-side-only loading (with or without dynamic import) should be
fine. For more information on loading `monaco-editor` in esm contexts, you can
[read their docs](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)
This work was sponsored by [Grafbase](https://grafbase.com)!
## Setup
1. In monorepo root directory run `yarn` and `yarn build`.
1. In this directory run `yarn dev`.
================================================
FILE: examples/monaco-graphql-nextjs/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
================================================
FILE: examples/monaco-graphql-nextjs/next.config.ts
================================================
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {};
export default nextConfig;
================================================
FILE: examples/monaco-graphql-nextjs/package.json
================================================
{
"name": "example-monaco-graphql-nextjs",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"types:check": "tsc --noEmit",
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@graphiql/toolkit": "^0.11.3",
"graphql": "^16.9.0",
"jsonc-parser": "^3.2.0",
"monaco-editor": "^0.52.2",
"monaco-graphql": "^1.7.3",
"next": "15.4.0",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"devDependencies": {
"@types/node": "^16.18.4",
"@types/react": "^19.1.2",
"typescript": "^4.6.3"
}
}
================================================
FILE: examples/monaco-graphql-nextjs/src/app/env.d.ts
================================================
declare namespace globalThis {
import type { Environment } from 'monaco-editor/esm/monaco-editor';
var MonacoEnvironment: Environment;
}
================================================
FILE: examples/monaco-graphql-nextjs/src/app/globals.css
================================================
body {
margin: 0;
height: 100vh;
}
#root {
display: flex;
height: inherit;
}
.pane {
width: 50%;
}
.left-editor {
height: 50%;
}
================================================
FILE: examples/monaco-graphql-nextjs/src/app/layout.tsx
================================================
import type { FC, ReactNode } from 'react';
import type { Metadata } from 'next';
import './globals.css';
export const metadata: Metadata = {
title: 'Monaco Next.js Example',
};
const RootLayout: FC<Readonly<{ children: ReactNode }>> = ({ children }) => {
return (
<html lang="en">
<body>{children}</body>
</html>
);
};
export default RootLayout;
================================================
FILE: examples/monaco-graphql-nextjs/src/app/page.tsx
================================================
'use client';
import type { FC } from 'react';
import dynamic from 'next/dynamic';
// dynamically import our GraphiQL component
const DynamicEditor = dynamic(() => import('../editor'), { ssr: false });
/**
* Setup Monaco Editor workers for Webpack/Turbopack projects like Next.js.
*/
globalThis.MonacoEnvironment = {
getWorker(_workerId: string, label: string) {
console.info('setup-workers/webpack', { label });
switch (label) {
case 'json':
return new Worker(
new URL(
'monaco-editor/esm/vs/language/json/json.worker.js',
import.meta.url,
),
);
case 'graphql':
return new Worker(
new URL('monaco-graphql/esm/graphql.worker.js', import.meta.url),
);
case 'typescript':
return new Worker(
new URL(
'monaco-editor/esm/vs/language/typescript/ts.worker.js',
import.meta.url,
),
);
}
return new Worker(
new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url),
);
},
};
const Page: FC = () => {
return (
<div id="root">
<DynamicEditor />
</div>
);
};
export default Page;
================================================
FILE: examples/monaco-graphql-nextjs/src/constants.ts
================================================
import { editor, Uri, languages } from 'monaco-graphql/esm/monaco-editor';
import { initializeMode } from 'monaco-graphql/esm/initializeMode';
import { parse, print } from 'graphql';
type ModelType = 'operations' | 'variables' | 'response' | 'ts';
export const GRAPHQL_URL = 'https://countries.trevorblades.com';
export const DEFAULT_EDITOR_OPTIONS: editor.IStandaloneEditorConstructionOptions =
{
theme: 'vs-dark',
minimap: {
enabled: false,
},
};
export const STORAGE_KEY = {
operations: 'operations',
variables: 'variables',
};
// allow a typo to test validation on schema load
/* cSpell:disable */
const operations =
localStorage.getItem(STORAGE_KEY.operations) ??
`# CMD/CTRL + Return/Enter will execute the operation,
# same in the variables editor below
# also available via context menu & F1 command palette
query Example($code: ID!, $filter: LanguageFilterInput!) {
country(code: $code) {
awsRegion
native
phone
emoj
}
languages(filter: $filter) {
name
}
}`;
/* cSpell:enable */
let prettyOp = '';
export const makeOpTemplate = (op: string) => {
try {
prettyOp = print(parse(op));
return `const graphql = (arg: TemplateStringsArray): string => arg[0]
const op = graphql\`\n${prettyOp}\n\``;
} catch {
return prettyOp;
}
};
export const DEFAULT_VALUE: Record<ModelType, string> = {
operations,
variables:
localStorage.getItem(STORAGE_KEY.variables) ??
`{
"code": "UA"
}`,
response: '',
ts: makeOpTemplate(operations),
};
export const OPERATIONS_URI = Uri.file('operations.graphql');
export const VARIABLES_URI = Uri.file('variables.json');
export const RESPONSE_URI = Uri.file('response.json');
export const TS_URI = Uri.file('typescript.ts');
// set these early on so that initial variables with comments don't flash an error
languages.json.jsonDefaults.setDiagnosticsOptions({
allowComments: true,
trailingCommas: 'ignore',
});
export const MONACO_GRAPHQL_API = initializeMode({
diagnosticSettings: {
validateVariablesJSON: {
[OPERATIONS_URI.toString()]: [VARIABLES_URI.toString()],
},
jsonDiagnosticSettings: {
validate: true,
schemaValidation: 'error',
// set these again, because we are entirely re-setting them here
allowComments: true,
trailingCommas: 'ignore',
},
},
});
export function getOrCreateModel({ uri, value }: { uri: Uri; value: string }) {
const { path } = uri;
let language = path.split('.').at(-1)!;
if (language === 'ts') {
language = 'typescript';
}
return editor.getModel(uri) ?? editor.createModel(value, language, uri);
}
================================================
FILE: examples/monaco-graphql-nextjs/src/editor.tsx
================================================
import { ReactElement, useEffect, useRef, useState } from 'react';
import { getIntrospectionQuery, IntrospectionQuery } from 'graphql';
import { editor, KeyMod, KeyCode } from 'monaco-graphql/esm/monaco-editor';
// to get typescript mode working
import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
import 'monaco-editor/esm/vs/editor/contrib/peekView/browser/peekView';
import 'monaco-editor/esm/vs/editor/contrib/parameterHints/browser/parameterHints';
import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import * as JSONC from 'jsonc-parser';
import {
DEFAULT_EDITOR_OPTIONS,
MONACO_GRAPHQL_API,
STORAGE_KEY,
GRAPHQL_URL,
OPERATIONS_URI,
VARIABLES_URI,
RESPONSE_URI,
TS_URI,
DEFAULT_VALUE,
makeOpTemplate,
getOrCreateModel,
} from './constants';
const fetcher = createGraphiQLFetcher({ url: GRAPHQL_URL });
async function getSchema(): Promise<IntrospectionQuery> {
const data = await fetcher({
query: getIntrospectionQuery(),
operationName: 'IntrospectionQuery',
});
const introspectionJSON =
'data' in data && (data.data as unknown as IntrospectionQuery);
if (!introspectionJSON) {
throw new Error(
'this demo does not support subscriptions or http multipart yet',
);
}
return introspectionJSON;
}
function debounce<F extends (...args: any[]) => any>(duration: number, fn: F) {
let timeout = 0;
return (...args: Parameters<F>) => {
if (timeout) {
clearTimeout(timeout);
}
timeout = window.setTimeout(() => {
timeout = 0;
fn(args);
}, duration);
};
}
export default function Editor(): ReactElement {
const operationsRef = useRef<HTMLDivElement>(null!);
const variablesRef = useRef<HTMLDivElement>(null!);
const responseRef = useRef<HTMLDivElement>(null!);
const tsRef = useRef<HTMLDivElement>(null!);
const
gitextract_nfz5esf2/
├── .browserslistrc
├── .changeset/
│ ├── README.md
│ └── config.json
├── .codecov.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── config.yml
│ │ ├── graphiql-bug.yml
│ │ ├── graphiql-feature.md
│ │ ├── language-server-bug.yml
│ │ └── language-server-feature.md
│ ├── ISSUE_TEMPLATE.md
│ └── workflows/
│ ├── main-test.yml
│ ├── pr-graphql-compat-check.yml
│ ├── pr.yml
│ └── release.yml
├── .gitignore
├── .mailmap
├── .npmignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .vscode/
│ ├── extensions.json
│ ├── launch.json
│ ├── settings.json
│ └── tasks.json
├── .yarnrc.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── DEVELOPMENT.md
├── LICENSE
├── README.md
├── RELEASING.md
├── SECURITY.md
├── babel.config.js
├── cspell.json
├── docs/
│ ├── migration/
│ │ ├── graphiql-2.0.0.md
│ │ ├── graphiql-4.0.0.md
│ │ └── graphiql-5.0.0.md
│ └── security/
│ └── 2021-introspection-schema-xss.md
├── examples/
│ ├── cm6-graphql-legacy-parcel/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ └── sample-query.ts
│ │ └── tsconfig.json
│ ├── cm6-graphql-parcel/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── sample-query.ts
│ │ │ └── testSchema.ts
│ │ └── tsconfig.json
│ ├── graphiql-cdn/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── index.html
│ │ └── package.json
│ ├── graphiql-create-react-app/
│ │ └── README.md
│ ├── graphiql-nextjs/
│ │ ├── README.md
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── app/
│ │ │ ├── globals.css
│ │ │ ├── graphiql.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.ts
│ │ └── tsconfig.json
│ ├── graphiql-parcel/
│ │ └── README.md
│ ├── graphiql-vite/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.jsx
│ │ │ └── index.jsx
│ │ └── vite.config.mjs
│ ├── graphiql-vite-react-router/
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── root.tsx
│ │ │ ├── routes/
│ │ │ │ └── _index/
│ │ │ │ ├── create-fetcher.ts
│ │ │ │ ├── globals.css
│ │ │ │ ├── graphiql.client.tsx
│ │ │ │ └── route.ts
│ │ │ └── routes.ts
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── react-router.config.ts
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── graphiql-webpack/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── index.html.ejs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ ├── select-server-plugin.css
│ │ │ ├── select-server-plugin.jsx
│ │ │ └── snippets.js
│ │ └── webpack.config.js
│ ├── monaco-graphql-nextjs/
│ │ ├── README.md
│ │ ├── next-env.d.ts
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── env.d.ts
│ │ │ │ ├── globals.css
│ │ │ │ ├── layout.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── constants.ts
│ │ │ └── editor.tsx
│ │ └── tsconfig.json
│ ├── monaco-graphql-react-vite/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── env.d.ts
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ └── monaco-graphql-webpack/
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── babel.config.js
│ ├── package.json
│ ├── src/
│ │ ├── editors.ts
│ │ ├── index.html.ejs
│ │ ├── index.ts
│ │ ├── schema.ts
│ │ └── style.css
│ ├── tsconfig.json
│ └── webpack.config.js
├── functions/
│ ├── graphql.ts
│ └── package.json
├── jest.config.base.js
├── jest.config.js
├── js-green-licenses.json
├── netlify.toml
├── package.json
├── packages/
│ ├── cm6-graphql/
│ │ ├── .gitignore
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── cases.txt
│ │ │ ├── test.spec.ts
│ │ │ └── types.txt
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── commands.ts
│ │ │ ├── completions.ts
│ │ │ ├── graphql.ts
│ │ │ ├── helpers.ts
│ │ │ ├── index.ts
│ │ │ ├── interfaces.ts
│ │ │ ├── jump.ts
│ │ │ ├── language.ts
│ │ │ ├── lint.ts
│ │ │ ├── state.ts
│ │ │ ├── syntax.grammar
│ │ │ └── syntax.grammar.d.ts
│ │ ├── tsconfig.esm.json
│ │ └── tsconfig.json
│ ├── codemirror-graphql/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── package.json
│ │ ├── resources/
│ │ │ └── checkgit.sh
│ │ ├── setup-files.ts
│ │ ├── src/
│ │ │ ├── __tests__/
│ │ │ │ ├── hint.test.ts
│ │ │ │ ├── kitchen-sink.graphql
│ │ │ │ ├── lint.test.ts
│ │ │ │ ├── mode.test.ts
│ │ │ │ ├── schema-kitchen-sink.graphql
│ │ │ │ └── testSchema.ts
│ │ │ ├── cm6-legacy/
│ │ │ │ └── mode.ts
│ │ │ ├── hint.ts
│ │ │ ├── index.d.ts
│ │ │ ├── info.ts
│ │ │ ├── jump.ts
│ │ │ ├── lint.ts
│ │ │ ├── mode.ts
│ │ │ ├── results/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── mode.test.ts
│ │ │ │ └── mode.ts
│ │ │ ├── utils/
│ │ │ │ ├── SchemaReference.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── jsonParse.test.ts
│ │ │ │ ├── collectVariables.ts
│ │ │ │ ├── forEachState.ts
│ │ │ │ ├── getTypeInfo.ts
│ │ │ │ ├── hintList.ts
│ │ │ │ ├── info-addon.ts
│ │ │ │ ├── jsonParse.ts
│ │ │ │ ├── jump-addon.ts
│ │ │ │ ├── mode-factory.ts
│ │ │ │ ├── mode-indent.ts
│ │ │ │ └── runParser.ts
│ │ │ └── variables/
│ │ │ ├── __tests__/
│ │ │ │ ├── hint.test.ts
│ │ │ │ ├── lint.test.ts
│ │ │ │ └── mode.test.ts
│ │ │ ├── hint.ts
│ │ │ ├── lint.ts
│ │ │ └── mode.ts
│ │ ├── tsconfig.esm.json
│ │ ├── tsconfig.json
│ │ └── vitest.config.mts
│ ├── graphiql/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __mocks__/
│ │ │ ├── monaco-editor.ts
│ │ │ └── zustand.ts
│ │ ├── cypress/
│ │ │ ├── e2e/
│ │ │ │ ├── docs.cy.ts
│ │ │ │ ├── errors.cy.ts
│ │ │ │ ├── graphql-ws.cy.ts
│ │ │ │ ├── headers.cy.ts
│ │ │ │ ├── history.cy.ts
│ │ │ │ ├── incremental-delivery.cy.ts
│ │ │ │ ├── init.cy.ts
│ │ │ │ ├── keyboard.cy.ts
│ │ │ │ ├── lint.cy.ts
│ │ │ │ ├── prettify.cy.ts
│ │ │ │ ├── tabs.cy.ts
│ │ │ │ └── theme.cy.ts
│ │ │ ├── env.d.ts
│ │ │ ├── fixtures/
│ │ │ │ ├── bad-schema.json
│ │ │ │ ├── example.json
│ │ │ │ └── fixtures.ts
│ │ │ ├── plugins/
│ │ │ │ └── index.ts
│ │ │ ├── support/
│ │ │ │ ├── commands.ts
│ │ │ │ └── e2e.ts
│ │ │ └── tsconfig.json
│ │ ├── cypress.config.ts
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── setup-files.ts
│ │ ├── setup-window.ts
│ │ ├── src/
│ │ │ ├── GraphiQL.spec.tsx
│ │ │ ├── GraphiQL.tsx
│ │ │ ├── cdn.ts
│ │ │ ├── e2e.ts
│ │ │ ├── graphiql.css
│ │ │ ├── index.ts
│ │ │ ├── setup-workers/
│ │ │ │ ├── esm.sh.ts
│ │ │ │ ├── vite.ts
│ │ │ │ └── webpack.ts
│ │ │ ├── style.css
│ │ │ └── ui/
│ │ │ ├── footer.tsx
│ │ │ ├── index.ts
│ │ │ ├── logo.tsx
│ │ │ ├── short-keys.tsx
│ │ │ ├── sidebar.tsx
│ │ │ └── toolbar.tsx
│ │ ├── test/
│ │ │ ├── README.md
│ │ │ ├── e2e-server.js
│ │ │ ├── execute.js
│ │ │ ├── package.json
│ │ │ └── schema.js
│ │ ├── tsconfig.json
│ │ ├── vite.config.mts
│ │ └── vitest.config.mts
│ ├── graphiql-plugin-code-exporter/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── example/
│ │ │ └── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── graphiql-code-exporter.d.ts
│ │ │ ├── index.css
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.mts
│ ├── graphiql-plugin-doc-explorer/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── setup-files.ts
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── doc-explorer.spec.tsx
│ │ │ │ │ ├── field-documentation.spec.tsx
│ │ │ │ │ ├── fixtures.ts
│ │ │ │ │ ├── test-utils.ts
│ │ │ │ │ ├── type-documentation.spec.tsx
│ │ │ │ │ └── type-link.spec.tsx
│ │ │ │ ├── argument.css
│ │ │ │ ├── argument.tsx
│ │ │ │ ├── default-value.css
│ │ │ │ ├── default-value.tsx
│ │ │ │ ├── deprecation-reason.css
│ │ │ │ ├── deprecation-reason.tsx
│ │ │ │ ├── directive.css
│ │ │ │ ├── directive.tsx
│ │ │ │ ├── doc-explorer.css
│ │ │ │ ├── doc-explorer.tsx
│ │ │ │ ├── field-documentation.tsx
│ │ │ │ ├── field-link.css
│ │ │ │ ├── field-link.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── schema-documentation.css
│ │ │ │ ├── schema-documentation.tsx
│ │ │ │ ├── search.css
│ │ │ │ ├── search.tsx
│ │ │ │ ├── section.css
│ │ │ │ ├── section.tsx
│ │ │ │ ├── type-documentation.css
│ │ │ │ ├── type-documentation.tsx
│ │ │ │ ├── type-link.css
│ │ │ │ ├── type-link.tsx
│ │ │ │ └── utils.tsx
│ │ │ ├── context.tsx
│ │ │ ├── deprecated.ts
│ │ │ ├── index.ts
│ │ │ └── schema-reference.ts
│ │ ├── tsconfig.json
│ │ ├── vite.config.mts
│ │ └── vitest.config.mts
│ ├── graphiql-plugin-explorer/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── graphiql-explorer.d.ts
│ │ │ ├── index.css
│ │ │ ├── index.tsx
│ │ │ └── vite-env.d.ts
│ │ ├── tsconfig.json
│ │ └── vite.config.mts
│ ├── graphiql-plugin-history/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── setup-files.ts
│ │ ├── src/
│ │ │ ├── __tests__/
│ │ │ │ └── components.spec.tsx
│ │ │ ├── components.tsx
│ │ │ ├── context.ts
│ │ │ ├── deprecated.ts
│ │ │ ├── index.ts
│ │ │ └── style.css
│ │ ├── tsconfig.json
│ │ ├── vite.config.mts
│ │ └── vitest.config.mts
│ ├── graphiql-react/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── font/
│ │ │ ├── fira-code.css
│ │ │ └── roboto.css
│ │ ├── package.json
│ │ ├── setup-files.ts
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── button/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── button-group/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── dialog/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── dropdown-menu/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── execute-button/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── image-preview.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── markdown-content/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── operation-editor.tsx
│ │ │ │ ├── provider.tsx
│ │ │ │ ├── request-headers-editor.tsx
│ │ │ │ ├── response-editor.tsx
│ │ │ │ ├── spinner/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── tabs/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── toolbar-button/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── toolbar-menu/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── tooltip/
│ │ │ │ │ ├── index.css
│ │ │ │ │ └── index.tsx
│ │ │ │ └── variables-editor.tsx
│ │ │ ├── constants.ts
│ │ │ ├── deprecated.ts
│ │ │ ├── env.d.ts
│ │ │ ├── icons/
│ │ │ │ └── index.tsx
│ │ │ ├── index.ts
│ │ │ ├── setup-workers/
│ │ │ │ ├── esm.sh.ts
│ │ │ │ ├── vite.ts
│ │ │ │ └── webpack.ts
│ │ │ ├── stores/
│ │ │ │ ├── editor.ts
│ │ │ │ ├── execution.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── monaco.ts
│ │ │ │ ├── plugin.ts
│ │ │ │ ├── schema.ts
│ │ │ │ ├── storage.ts
│ │ │ │ └── theme.ts
│ │ │ ├── style/
│ │ │ │ ├── auto-insertion.css
│ │ │ │ ├── editor.css
│ │ │ │ └── root.css
│ │ │ ├── types.test-d.ts
│ │ │ ├── types.ts
│ │ │ ├── utility/
│ │ │ │ ├── cleanup-disposables.ts
│ │ │ │ ├── create-bounded-use-store.ts
│ │ │ │ ├── create-editor.ts
│ │ │ │ ├── debounce.ts
│ │ │ │ ├── hooks.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── jsonc.ts
│ │ │ │ ├── markdown.ts
│ │ │ │ ├── monaco-ssr.ts
│ │ │ │ ├── pick.ts
│ │ │ │ ├── resize.ts
│ │ │ │ ├── tabs.spec.ts
│ │ │ │ ├── tabs.ts
│ │ │ │ ├── whitespace.spec.ts
│ │ │ │ └── whitespace.ts
│ │ │ └── vite-env.d.ts
│ │ ├── tsconfig.json
│ │ ├── vite.config.mts
│ │ └── vitest.config.mts
│ ├── graphiql-toolkit/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── docs/
│ │ │ └── create-fetcher.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── async-helpers/
│ │ │ │ └── index.ts
│ │ │ ├── create-fetcher/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── buildFetcher.spec.ts
│ │ │ │ │ └── lib.spec.ts
│ │ │ │ ├── createFetcher.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── lib.ts
│ │ │ │ └── types.ts
│ │ │ ├── format/
│ │ │ │ └── index.ts
│ │ │ ├── graphql-helpers/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __queries__/
│ │ │ │ │ │ ├── mergedQuery.graphql
│ │ │ │ │ │ ├── mergedQueryWithSchema.graphql
│ │ │ │ │ │ └── testQuery.graphql
│ │ │ │ │ ├── __schema__/
│ │ │ │ │ │ └── sorareSchema.graphql
│ │ │ │ │ └── merge-ast.spec.ts
│ │ │ │ ├── auto-complete.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── merge-ast.ts
│ │ │ │ └── operation-name.ts
│ │ │ ├── index.ts
│ │ │ └── storage/
│ │ │ ├── __tests__/
│ │ │ │ ├── base.spec.ts
│ │ │ │ └── query.spec.ts
│ │ │ ├── base.ts
│ │ │ ├── custom.ts
│ │ │ ├── history.ts
│ │ │ ├── index.ts
│ │ │ └── query.ts
│ │ ├── tsconfig.json
│ │ ├── tsup.config.ts
│ │ └── vitest.config.mts
│ ├── graphql-language-service/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── benchmark/
│ │ │ ├── fixtures/
│ │ │ │ ├── github.graphql
│ │ │ │ └── kitchen-sink.graphql
│ │ │ └── index.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── interface/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── __queries__/
│ │ │ │ │ │ └── testQuery.graphql
│ │ │ │ │ ├── __schema__/
│ │ │ │ │ │ ├── HoverTestSchema.graphql
│ │ │ │ │ │ └── StarWarsSchema.graphql
│ │ │ │ │ ├── getAutocompleteSuggestions.test.ts
│ │ │ │ │ ├── getDefinition.test.ts
│ │ │ │ │ ├── getDiagnostics.test.ts
│ │ │ │ │ ├── getHoverInformation.test.ts
│ │ │ │ │ ├── getOutline.test.ts
│ │ │ │ │ ├── kitchen-sink.graphql
│ │ │ │ │ └── queries/
│ │ │ │ │ ├── definitionQuery.graphql
│ │ │ │ │ └── testQuery.graphql
│ │ │ │ ├── autocompleteUtils.ts
│ │ │ │ ├── getAutocompleteSuggestions.ts
│ │ │ │ ├── getDefinition.ts
│ │ │ │ ├── getDiagnostics.ts
│ │ │ │ ├── getHoverInformation.ts
│ │ │ │ ├── getOutline.ts
│ │ │ │ └── index.ts
│ │ │ ├── parser/
│ │ │ │ ├── CharacterStream.ts
│ │ │ │ ├── RuleHelpers.ts
│ │ │ │ ├── Rules.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── CharacterStream.test.ts
│ │ │ │ │ ├── OnlineParser.test.ts
│ │ │ │ │ ├── OnlineParserUtils.ts
│ │ │ │ │ └── RuleHelpers.test.ts
│ │ │ │ ├── api.ts
│ │ │ │ ├── getTypeInfo.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── onlineParser.ts
│ │ │ │ └── types.ts
│ │ │ ├── temp-bin.ts
│ │ │ ├── types.ts
│ │ │ └── utils/
│ │ │ ├── Range.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── Range.test.ts
│ │ │ │ ├── __fixtures__/
│ │ │ │ │ ├── file.js
│ │ │ │ │ ├── invalid.fake
│ │ │ │ │ ├── noextension
│ │ │ │ │ └── package.json
│ │ │ │ ├── __schema__/
│ │ │ │ │ ├── RecursiveSchema.graphql
│ │ │ │ │ └── StarWarsSchema.graphql
│ │ │ │ ├── collectVariables.test.ts
│ │ │ │ ├── getASTNodeAtPosition.test.ts
│ │ │ │ ├── getVariablesJSONSchema.test.ts
│ │ │ │ └── validateWithCustomRules.test.ts
│ │ │ ├── collectVariables.ts
│ │ │ ├── fragmentDependencies.ts
│ │ │ ├── getASTNodeAtPosition.ts
│ │ │ ├── getOperationFacts.ts
│ │ │ ├── getVariablesJSONSchema.ts
│ │ │ ├── index.ts
│ │ │ └── validateWithCustomRules.ts
│ │ ├── tsconfig.esm.json
│ │ ├── tsconfig.json
│ │ └── vitest.config.mts
│ ├── graphql-language-service-cli/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── graphql.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __tests__/
│ │ │ │ ├── client.test.ts
│ │ │ │ └── index.test.ts
│ │ │ ├── cli.ts
│ │ │ └── client.ts
│ │ ├── tsconfig.esm.json
│ │ ├── tsconfig.json
│ │ └── vitest.config.mts
│ ├── graphql-language-service-server/
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── jest.config.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── GraphQLCache.ts
│ │ │ ├── GraphQLLanguageService.ts
│ │ │ ├── Logger.ts
│ │ │ ├── MessageProcessor.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── .graphqlrc.yml
│ │ │ │ ├── GraphQLCache.test.ts
│ │ │ │ ├── GraphQLLanguageService.test.ts
│ │ │ │ ├── Logger.test.ts
│ │ │ │ ├── MessageProcessor.spec.ts
│ │ │ │ ├── MessageProcessor.test.ts
│ │ │ │ ├── __queries__/
│ │ │ │ │ ├── test.graphql
│ │ │ │ │ ├── test2.graphql
│ │ │ │ │ ├── test3.graphql
│ │ │ │ │ └── testFragment.graphql
│ │ │ │ ├── __schema__/
│ │ │ │ │ └── StarWarsSchema.graphql
│ │ │ │ ├── __utils__/
│ │ │ │ │ ├── MockProject.ts
│ │ │ │ │ ├── runServer.js
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── findGraphQLTags.test.ts
│ │ │ │ ├── parseDocument.test.ts
│ │ │ │ ├── startServer.spec.ts
│ │ │ │ └── startServer.test.ts
│ │ │ ├── common.ts
│ │ │ ├── constants.ts
│ │ │ ├── findGraphQLTags.ts
│ │ │ ├── index.ts
│ │ │ ├── parseDocument.ts
│ │ │ ├── parsers/
│ │ │ │ ├── astro.ts
│ │ │ │ ├── babel.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── svelte.ts
│ │ │ │ ├── types.ts
│ │ │ │ └── vue.ts
│ │ │ ├── startServer.ts
│ │ │ ├── stringToHash.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.esm.json
│ │ └── tsconfig.json
│ ├── monaco-graphql/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── GraphQLWorker.ts
│ │ │ ├── LanguageService.ts
│ │ │ ├── api.ts
│ │ │ ├── full.ts
│ │ │ ├── graphql.worker.ts
│ │ │ ├── graphqlMode.ts
│ │ │ ├── initialize.ts
│ │ │ ├── initializeMode.ts
│ │ │ ├── languageFeatures.ts
│ │ │ ├── lite.ts
│ │ │ ├── monaco-editor.ts
│ │ │ ├── monaco.contribution.ts
│ │ │ ├── schemaLoader.ts
│ │ │ ├── typings/
│ │ │ │ ├── index.ts
│ │ │ │ ├── monaco-editor.d.ts
│ │ │ │ └── picomatch-browser.d.ts
│ │ │ ├── utils.ts
│ │ │ └── workerManager.ts
│ │ ├── test/
│ │ │ └── monaco-editor.test.ts
│ │ ├── tsconfig.esm.json
│ │ ├── tsconfig.json
│ │ └── vitest.config.mts
│ ├── vscode-graphql/
│ │ ├── .vscodeignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── esbuild.js
│ │ ├── package.json
│ │ ├── snippets/
│ │ │ └── graphql.json
│ │ ├── src/
│ │ │ ├── apis/
│ │ │ │ └── statusBar.ts
│ │ │ ├── extension.ts
│ │ │ ├── serverIpc/
│ │ │ │ └── index.ts
│ │ │ └── serverStdio/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── vscode-graphql-execution/
│ │ ├── .vscodeignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── esbuild.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── extension.ts
│ │ │ ├── helpers/
│ │ │ │ ├── extensions.ts
│ │ │ │ ├── network.ts
│ │ │ │ └── source.ts
│ │ │ └── providers/
│ │ │ ├── exec-codelens.ts
│ │ │ └── exec-content.ts
│ │ └── tsconfig.json
│ └── vscode-graphql-syntax/
│ ├── .vscodeignore
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── grammars/
│ │ ├── graphql.js.json
│ │ ├── graphql.json
│ │ ├── graphql.markdown.codeblock.json
│ │ ├── graphql.php.json
│ │ ├── graphql.python.json
│ │ ├── graphql.re.json
│ │ ├── graphql.rescript.json
│ │ └── graphql.scala.json
│ ├── language/
│ │ └── language-configuration.json
│ ├── package.json
│ ├── tests/
│ │ ├── __fixtures__/
│ │ │ ├── StarWarsSchema.graphql
│ │ │ ├── kitchen-sink.graphql
│ │ │ ├── query.graphql
│ │ │ ├── test-js.md
│ │ │ ├── test-py.md
│ │ │ ├── test-sfc-comp.vue
│ │ │ ├── test-sfc.vue
│ │ │ ├── test.astro
│ │ │ ├── test.js
│ │ │ ├── test.md
│ │ │ ├── test.php
│ │ │ ├── test.py
│ │ │ ├── test.re
│ │ │ ├── test.scala
│ │ │ ├── test.svelte
│ │ │ └── test.ts
│ │ ├── __snapshots__/
│ │ │ ├── graphql-grammar.spec.ts.snap
│ │ │ ├── js-grammar.spec.ts.snap
│ │ │ ├── markdown-grammar.spec.ts.snap
│ │ │ ├── php-grammar.spec.ts.snap
│ │ │ ├── python-grammar.spec.ts.snap
│ │ │ ├── reason-grammar.spec.ts.snap
│ │ │ └── scala-grammar.spec.ts.snap
│ │ ├── __utilities__/
│ │ │ ├── serializer.ts
│ │ │ └── utilities.ts
│ │ ├── graphql-grammar.spec.ts
│ │ ├── js-grammar.spec.ts
│ │ ├── markdown-grammar.spec.ts
│ │ ├── php-grammar.spec.ts
│ │ ├── python-grammar.spec.ts
│ │ ├── reason-grammar.spec.ts
│ │ └── scala-grammar.spec.ts
│ └── vitest.config.mts
├── resources/
│ ├── README.md
│ ├── babel.config.js
│ ├── custom-words.txt
│ ├── patch-monaco-editor-type.mjs
│ ├── patches/
│ │ └── @changesets+assemble-release-plan+6.0.3.patch
│ ├── tsconfig.base.cjs.json
│ ├── tsconfig.base.esm.json
│ ├── tsconfig.build.cjs.json
│ └── tsconfig.build.esm.json
├── scripts/
│ ├── canary-release.js
│ ├── prepublish.sh
│ ├── renameFileExtensions.js
│ └── set-resolution.js
├── tsconfig.json
├── turbo.json
├── typedoc.json
├── wg.config.js
└── working-group/
├── README.md
├── agendas/
│ ├── 2019/
│ │ ├── 2019-05-14.md
│ │ ├── 2019-06-18.md
│ │ └── 2019-08-21.md
│ ├── 2020/
│ │ ├── 2020-03-10.md
│ │ ├── 2020-04-14.md
│ │ └── 2020-05-21.md
│ ├── 2021/
│ │ └── 2021-10-12.md
│ ├── 2022/
│ │ ├── 2022-01-11.md
│ │ ├── 2022-02-22-monaco.md
│ │ ├── 2022-03-08.md
│ │ ├── 2022-04-12.md
│ │ ├── 2022-05-10.md
│ │ ├── 2022-06-14.md
│ │ ├── 2022-07-12.md
│ │ ├── 2022-08-09.md
│ │ ├── 2022-09-13.md
│ │ ├── 2022-10-11.md
│ │ ├── 2022-11-08.md
│ │ └── 2022-12-13.md
│ ├── 2023/
│ │ ├── 2023-01-10.md
│ │ ├── 2023-02-14.md
│ │ ├── 2023-04-11.md
│ │ ├── 2023-05-09.md
│ │ ├── 2023-06-13.md
│ │ ├── 2023-07-11.md
│ │ ├── 2023-08-08.md
│ │ ├── 2023-09-12.md
│ │ ├── 2023-10-10.md
│ │ ├── 2023-11-14.md
│ │ └── 2023-12-12.md
│ ├── 2024/
│ │ ├── 08-Aug/
│ │ │ └── 13-graphiql-wg-august-2024.md
│ │ ├── 09-Sep/
│ │ │ └── 10-graphiql-wg-september-2024.md
│ │ ├── 10-Oct/
│ │ │ └── 08-graphiql-wg-october-2024.md
│ │ ├── 11-Nov/
│ │ │ └── 12-graphiql-wg-november-2024.md
│ │ └── 12-Dec/
│ │ └── 10-graphiql-wg-december-2024.md
│ ├── 2025/
│ │ ├── 01-Jan/
│ │ │ └── 14-graphiql-wg-january-2025.md
│ │ ├── 02-Feb/
│ │ │ └── 11-graphiql-wg-february-2025.md
│ │ ├── 03-Mar/
│ │ │ └── 11-graphiql-wg-march-2025.md
│ │ ├── 04-Apr/
│ │ │ └── 08-graphiql-wg-april-2025.md
│ │ ├── 05-May/
│ │ │ └── 13-graphiql-wg-may-2025.md
│ │ ├── 06-Jun/
│ │ │ └── 10-graphiql-wg-june-2025.md
│ │ ├── 07-Jul/
│ │ │ └── 08-graphiql-wg-july-2025.md
│ │ ├── 08-Aug/
│ │ │ └── 12-graphiql-wg-august-2025.md
│ │ ├── 09-Sep/
│ │ │ └── 09-graphiql-wg-september-2025.md
│ │ ├── 10-Oct/
│ │ │ └── 14-graphiql-wg-october-2025.md
│ │ ├── 11-Nov/
│ │ │ └── 11-graphiql-wg-november-2025.md
│ │ └── 12-Dec/
│ │ └── 09-graphiql-wg-december-2025.md
│ └── 2026/
│ ├── 01-Jan/
│ │ └── 13-graphiql-wg-january-2026.md
│ ├── 02-Feb/
│ │ └── 10-graphiql-wg-february-2026.md
│ ├── 03-Mar/
│ │ └── 10-graphiql-wg-march-2026.md
│ ├── 04-Apr/
│ │ └── 14-graphiql-wg-april-2026.md
│ ├── 05-May/
│ │ └── 12-graphiql-wg-may-2026.md
│ └── 06-Jun/
│ └── 09-graphiql-wg-june-2026.md
├── minutes/
│ ├── 2019-05-14.md
│ ├── 2019-06-18.md
│ ├── 2019-08-21.md
│ ├── 2020-03-10.md
│ ├── 2021-10-12.md
│ └── 2022-01-11.md
└── proposals/
└── .gitkeep
SYMBOL INDEX (1111 symbols across 216 files)
FILE: .eslintrc.js
constant RESTRICTED_IMPORTS (line 10) | const RESTRICTED_IMPORTS = [
FILE: examples/cm6-graphql-parcel/src/index.ts
method onShowInDocs (line 22) | onShowInDocs(field, type, parentType) {
method onFillAllFields (line 27) | onFillAllFields(view, schema, _query, cursor, token) {
FILE: examples/cm6-graphql-parcel/src/testSchema.ts
method resolveType (line 118) | resolveType() {
method resolve (line 149) | resolve() {
method resolve (line 155) | resolve(_value, args) {
FILE: examples/graphiql-nextjs/src/app/graphiql.tsx
function fetcher (line 8) | async function fetcher(graphQLParams: Record<string, unknown>) {
FILE: examples/graphiql-vite-react-router/app/routes/_index/create-fetcher.ts
function createFetcher (line 3) | function createFetcher(apiUrl: string): GraphiQLProps['fetcher'] {
FILE: examples/graphiql-vite-react-router/app/routes/_index/graphiql.client.tsx
function onShareExplorer (line 34) | async function onShareExplorer(): Promise<void> {
FILE: examples/graphiql-vite/src/App.jsx
function fetcher (line 4) | async function fetcher(graphQLParams) {
function App (line 16) | function App() {
FILE: examples/graphiql-webpack/src/index.jsx
constant STARTING_URL (line 14) | const STARTING_URL = 'https://countries.trevorblades.com';
function App (line 58) | function App() {
function GraphiQLContextBound (line 93) | function GraphiQLContextBound({ setUrl }) {
FILE: examples/graphiql-webpack/src/select-server-plugin.jsx
constant LAST_URL_KEY (line 4) | const LAST_URL_KEY = 'lastURL';
constant PREV_URLS_KEY (line 6) | const PREV_URLS_KEY = 'previousURLs';
function serverSelectPlugin (line 152) | function serverSelectPlugin({ url, setUrl }) {
FILE: examples/monaco-graphql-nextjs/src/app/page.tsx
method getWorker (line 13) | getWorker(_workerId: string, label: string) {
FILE: examples/monaco-graphql-nextjs/src/constants.ts
type ModelType (line 5) | type ModelType = 'operations' | 'variables' | 'response' | 'ts';
constant GRAPHQL_URL (line 7) | const GRAPHQL_URL = 'https://countries.trevorblades.com';
constant DEFAULT_EDITOR_OPTIONS (line 9) | const DEFAULT_EDITOR_OPTIONS: editor.IStandaloneEditorConstructionOptions =
constant STORAGE_KEY (line 17) | const STORAGE_KEY = {
constant DEFAULT_VALUE (line 55) | const DEFAULT_VALUE: Record<ModelType, string> = {
constant OPERATIONS_URI (line 66) | const OPERATIONS_URI = Uri.file('operations.graphql');
constant VARIABLES_URI (line 67) | const VARIABLES_URI = Uri.file('variables.json');
constant RESPONSE_URI (line 68) | const RESPONSE_URI = Uri.file('response.json');
constant TS_URI (line 69) | const TS_URI = Uri.file('typescript.ts');
constant MONACO_GRAPHQL_API (line 77) | const MONACO_GRAPHQL_API = initializeMode({
function getOrCreateModel (line 92) | function getOrCreateModel({ uri, value }: { uri: Uri; value: string }) {
FILE: examples/monaco-graphql-nextjs/src/editor.tsx
function getSchema (line 29) | async function getSchema(): Promise<IntrospectionQuery> {
function debounce (line 45) | function debounce<F extends (...args: any[]) => any>(duration: number, f...
function Editor (line 58) | function Editor(): ReactElement {
FILE: examples/monaco-graphql-react-vite/src/index.tsx
method getWorker (line 20) | getWorker(_workerId: string, label: string) {
FILE: examples/monaco-graphql-react-vite/vite.config.ts
function watchPackages (line 30) | function watchPackages(packageNames: string[]) {
FILE: examples/monaco-graphql-webpack/src/editors.ts
constant GRAPHQL_LANGUAGE_ID (line 3) | const GRAPHQL_LANGUAGE_ID = 'graphql';
constant THEME (line 35) | const THEME = 'vs-dark';
function createEditors (line 37) | function createEditors() {
FILE: examples/monaco-graphql-webpack/src/index.ts
constant SITE_ID (line 12) | const SITE_ID = '46a6b3c8-992f-4623-9a76-f1bd5d40505c';
function render (line 18) | async function render() {
function renderToolbar (line 218) | function renderToolbar(toolbar: HTMLElement) {
function getSchemaPicker (line 251) | function getSchemaPicker(): HTMLSelectElement {
function renderGithubLoginButton (line 271) | function renderGithubLoginButton() {
FILE: examples/monaco-graphql-webpack/src/schema.ts
constant SCHEMA_URL (line 11) | const SCHEMA_URL = 'https://api.github.com/graphql';
constant API_TOKEN (line 12) | const API_TOKEN = localStorage.getItem('ghapi') || null;
class MySchemaFetcher (line 38) | class MySchemaFetcher {
method constructor (line 44) | constructor(options = schemaOptions) {
method currentSchema (line 51) | public get currentSchema() {
method token (line 54) | public get token() {
method getSchema (line 57) | async getSchema() {
method setApiToken (line 67) | async setApiToken(token: string) {
method logout (line 71) | logout() {
method loadSchema (line 75) | async loadSchema() {
method changeSchema (line 115) | async changeSchema(uri: string) {
method getOverride (line 121) | getOverride() {
method clearOverride (line 125) | clearOverride() {
method overrideSchema (line 129) | async overrideSchema(sdl: string) {
function isValid (line 137) | function isValid(sdl: string) {
FILE: functions/graphql.ts
type HandlerOptions (line 20) | type HandlerOptions<Context extends OperationContext = undefined> =
function createHandler (line 28) | function createHandler<Context extends OperationContext = undefined>(
FILE: packages/cm6-graphql/src/completions.ts
constant AUTOCOMPLETE_CHARS (line 7) | const AUTOCOMPLETE_CHARS = /^[a-zA-Z0-9_@(]$/;
method autocomplete (line 10) | autocomplete(ctx: CompletionContext) {
FILE: packages/cm6-graphql/src/graphql.ts
function graphql (line 10) | function graphql(
FILE: packages/cm6-graphql/src/helpers.ts
function posToOffset (line 3) | function posToOffset(doc: Text, pos: IPosition) {
function offsetToPos (line 6) | function offsetToPos(doc: Text, offset: number): Position {
type IPosition (line 11) | interface IPosition {
class Position (line 19) | class Position implements IPosition {
method constructor (line 20) | constructor(
method setLine (line 25) | setLine(line: number) {
method setCharacter (line 29) | setCharacter(character: number) {
method lessThanOrEqualTo (line 33) | lessThanOrEqualTo(position: IPosition) {
FILE: packages/cm6-graphql/src/interfaces.ts
type GqlExtensionsOptions (line 10) | interface GqlExtensionsOptions {
FILE: packages/cm6-graphql/src/jump.ts
method click (line 7) | click(evt, view) {
FILE: packages/cm6-graphql/src/language.ts
function graphqlLanguageSupport (line 57) | function graphqlLanguageSupport() {
FILE: packages/cm6-graphql/src/lint.ts
constant SEVERITY (line 13) | const SEVERITY = ['error', 'warning', 'info'] as const;
method needsRefresh (line 78) | needsRefresh(vu) {
FILE: packages/cm6-graphql/src/state.ts
method create (line 8) | create() {}
method update (line 9) | update(schema, tr) {
method create (line 23) | create() {}
method update (line 24) | update(opts, tr) {
FILE: packages/codemirror-graphql/setup-files.ts
method setEnd (line 4) | setEnd() {}
method setStart (line 5) | setStart() {}
method getClientRects (line 6) | getClientRects() {
method getBoundingClientRect (line 9) | getBoundingClientRect() {
FILE: packages/codemirror-graphql/src/__tests__/hint.test.ts
function createEditorWithHint (line 37) | function createEditorWithHint() {
function getHintSuggestions (line 49) | function getHintSuggestions(
function getExpectedSuggestions (line 74) | function getExpectedSuggestions(list: IHint[]) {
FILE: packages/codemirror-graphql/src/__tests__/lint.test.ts
function createEditorWithLint (line 19) | function createEditorWithLint(lintConfig?: any) {
function printLintErrors (line 26) | function printLintErrors(queryString: string, configOverrides = {}) {
method OperationDefinition (line 62) | OperationDefinition(node: OperationDefinitionNode) {
FILE: packages/codemirror-graphql/src/__tests__/testSchema.ts
method resolveType (line 118) | resolveType() {
method resolve (line 149) | resolve() {
method resolve (line 155) | resolve(_value, args) {
FILE: packages/codemirror-graphql/src/hint.ts
type GraphQLHintOptions (line 22) | interface GraphQLHintOptions {
type IHint (line 28) | interface IHint extends Hint {
type IHints (line 35) | interface IHints extends Hints {
type ShowHintOptions (line 40) | interface ShowHintOptions {
type CodeMirrorHintMap (line 45) | interface CodeMirrorHintMap {
FILE: packages/codemirror-graphql/src/index.d.ts
type Editor (line 6) | interface Editor {
type ShowHintOptions (line 12) | interface ShowHintOptions {
FILE: packages/codemirror-graphql/src/info.ts
type GraphQLInfoOptions (line 35) | interface GraphQLInfoOptions {
function renderField (line 125) | function renderField(
function renderQualifiedField (line 134) | function renderQualifiedField(
function renderDirective (line 143) | function renderDirective(
function renderArg (line 152) | function renderArg(
function renderEnumValue (line 162) | function renderEnumValue(
function renderTypeAnnotation (line 173) | function renderTypeAnnotation(
function renderType (line 200) | function renderType(
function renderDescription (line 224) | function renderDescription(
function renderDeprecation (line 249) | function renderDeprecation(
function text (line 281) | function text(
FILE: packages/codemirror-graphql/src/jump.ts
type GraphQLJumpOptions (line 24) | interface GraphQLJumpOptions {
FILE: packages/codemirror-graphql/src/lint.ts
constant SEVERITY (line 14) | const SEVERITY = ['error', 'warning', 'information', 'hint'];
constant TYPE (line 15) | const TYPE: Record<string, string> = {
type GraphQLLintOptions (line 21) | interface GraphQLLintOptions {
FILE: packages/codemirror-graphql/src/results/mode.ts
method Value (line 64) | Value(token: Token) {
FILE: packages/codemirror-graphql/src/utils/SchemaReference.ts
type SchemaReference (line 23) | type SchemaReference =
type FieldReference (line 30) | type FieldReference = {
type DirectiveReference (line 37) | type DirectiveReference = {
type ArgumentReference (line 43) | type ArgumentReference = {
type EnumValueReference (line 52) | type EnumValueReference = {
type TypeReference (line 59) | type TypeReference = {
function getFieldReference (line 65) | function getFieldReference(typeInfo: any): FieldReference {
function getDirectiveReference (line 74) | function getDirectiveReference(typeInfo: any): DirectiveReference {
function getArgumentReference (line 82) | function getArgumentReference(typeInfo: any): ArgumentReference {
function getEnumValueReference (line 99) | function getEnumValueReference(typeInfo: TypeInfo): EnumValueReference {
function getTypeReference (line 111) | function getTypeReference(
function isMetaField (line 122) | function isMetaField(fieldDef: GraphQLField<any, any>) {
FILE: packages/codemirror-graphql/src/utils/__tests__/jsonParse.test.ts
function expectEscapedString (line 12) | function expectEscapedString(
FILE: packages/codemirror-graphql/src/utils/collectVariables.ts
function collectVariables (line 20) | function collectVariables(
FILE: packages/codemirror-graphql/src/utils/forEachState.ts
function forEachState (line 13) | function forEachState(stack: State, fn: (state: State) => void) {
FILE: packages/codemirror-graphql/src/utils/getTypeInfo.ts
type TypeInfo (line 33) | interface TypeInfo {
function getTypeInfo (line 50) | function getTypeInfo(schema: GraphQLSchema, tokenState: State) {
function getFieldDef (line 163) | function getFieldDef(
function find (line 183) | function find<T>(array: T[], predicate: (item: T) => boolean) {
FILE: packages/codemirror-graphql/src/utils/hintList.ts
function hintList (line 14) | function hintList(
function filterAndSortList (line 38) | function filterAndSortList(list: IHint[], text: string) {
function filterNonEmpty (line 65) | function filterNonEmpty<T>(array: T[], predicate: (item: T) => boolean) {
function normalizeText (line 70) | function normalizeText(text: string) {
function getProximity (line 75) | function getProximity(suggestion: string, text: string) {
function lexicalDistance (line 101) | function lexicalDistance(a: string, b: string) {
FILE: packages/codemirror-graphql/src/utils/info-addon.ts
function createState (line 36) | function createState(options: GraphQLInfoOptions) {
function getHoverTime (line 47) | function getHoverTime(cm: CodeMirror.Editor) {
function onMouseOver (line 52) | function onMouseOver(cm: CodeMirror.Editor, e: MouseEvent) {
function onMouseHover (line 92) | function onMouseHover(cm: CodeMirror.Editor, box: DOMRect) {
function showPopup (line 115) | function showPopup(cm: CodeMirror.Editor, box: DOMRect, info: HTMLDivEle...
FILE: packages/codemirror-graphql/src/utils/jsonParse.ts
function jsonParse (line 22) | function jsonParse(str: string) {
type BaseParseOutput (line 41) | interface BaseParseOutput {
type ParseTokenOutput (line 46) | interface ParseTokenOutput extends BaseParseOutput {
type ParseObjectOutput (line 49) | interface ParseObjectOutput extends BaseParseOutput {
type ParseArrayOutput (line 53) | interface ParseArrayOutput extends BaseParseOutput {
type ParseMemberOutput (line 57) | interface ParseMemberOutput extends BaseParseOutput {
type ParseValueOutput (line 61) | type ParseValueOutput =
function parseObj (line 67) | function parseObj(): ParseObjectOutput {
function parseMember (line 85) | function parseMember(): ParseMemberOutput {
function parseArr (line 100) | function parseArr(): ParseArrayOutput {
function parseVal (line 118) | function parseVal(): ParseValueOutput | undefined {
function curToken (line 135) | function curToken(): ParseTokenOutput {
function expect (line 139) | function expect(str: string) {
type SyntaxErrorPosition (line 158) | type SyntaxErrorPosition = { start: number; end: number };
class JSONSyntaxError (line 160) | class JSONSyntaxError extends Error {
method constructor (line 162) | constructor(message: string, position: SyntaxErrorPosition) {
function syntaxError (line 168) | function syntaxError(message: string) {
function skip (line 172) | function skip(k: string) {
function ch (line 179) | function ch() {
function lex (line 187) | function lex() {
function readString (line 256) | function readString() {
function readHex (line 298) | function readHex() {
function readNumber (line 309) | function readNumber() {
function readDigits (line 339) | function readDigits() {
FILE: packages/codemirror-graphql/src/utils/jump-addon.ts
function onMouseOver (line 45) | function onMouseOver(cm: CodeMirror.Editor, event: MouseEvent) {
function onMouseOut (line 67) | function onMouseOut(cm: CodeMirror.Editor) {
function onKeyDown (line 78) | function onKeyDown(cm: CodeMirror.Editor, event: KeyboardEvent) {
function isJumpModifier (line 126) | function isJumpModifier(key: string) {
function enableJumpMode (line 130) | function enableJumpMode(cm: CodeMirror.Editor) {
function disableJumpMode (line 154) | function disableJumpMode(cm: CodeMirror.Editor) {
FILE: packages/codemirror-graphql/src/utils/mode-indent.ts
function indent (line 14) | function indent(
FILE: packages/codemirror-graphql/src/utils/runParser.ts
function runParser (line 17) | function runParser(
FILE: packages/codemirror-graphql/src/variables/__tests__/hint.test.ts
function createEditorWithHint (line 19) | function createEditorWithHint(query: string) {
function getHintSuggestions (line 30) | function getHintSuggestions(
function expectSuggestions (line 51) | function expectSuggestions(source: string[], suggestions?: IHint[]) {
FILE: packages/codemirror-graphql/src/variables/__tests__/lint.test.ts
function createEditorWithLint (line 19) | function createEditorWithLint(lintConfig?: any) {
function printLintErrors (line 26) | function printLintErrors(query: Maybe<string>, variables: string) {
FILE: packages/codemirror-graphql/src/variables/hint.ts
type VariableToType (line 27) | type VariableToType = Record<string, GraphQLInputType>;
type GraphQLVariableHintOptions (line 28) | interface GraphQLVariableHintOptions {
type ShowHintOptions (line 33) | interface ShowHintOptions {
type CodeMirrorHintMap (line 37) | interface CodeMirrorHintMap {
function getVariablesHint (line 83) | function getVariablesHint(
type VariableTypeInfo (line 175) | interface VariableTypeInfo {
function getTypeInfo (line 182) | function getTypeInfo(
FILE: packages/codemirror-graphql/src/variables/lint.ts
type GraphQLVariableLintOptions (line 28) | interface GraphQLVariableLintOptions {
function validateVariables (line 81) | function validateVariables(
function validateValue (line 112) | function validateValue(
function lintError (line 221) | function lintError(
function isNullish (line 235) | function isNullish(value: any): boolean {
function mapCat (line 240) | function mapCat<T, R>(array: T[], mapper: (item: T) => R[]): R[] {
FILE: packages/codemirror-graphql/src/variables/mode.ts
method Value (line 72) | Value(token: Token) {
function namedKey (line 107) | function namedKey(style: string) {
FILE: packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
type OperationData (line 10) | type OperationData = {
type GenerateOptions (line 21) | type GenerateOptions = {
type Snippet (line 29) | type Snippet = {
type GraphiQLCodeExporterProps (line 41) | type GraphiQLCodeExporterProps = {
FILE: packages/graphiql-plugin-code-exporter/src/index.tsx
type GraphiQLCodeExporterPluginProps (line 8) | type GraphiQLCodeExporterPluginProps = Omit<GraphiQLCodeExporterProps, '...
function codeExporterPlugin (line 23) | function codeExporterPlugin(
FILE: packages/graphiql-plugin-doc-explorer/src/components/__tests__/doc-explorer.spec.tsx
function makeSchema (line 24) | function makeSchema(fieldName = 'field') {
method introspect (line 44) | introspect() {}
FILE: packages/graphiql-plugin-doc-explorer/src/components/__tests__/test-utils.ts
function unwrapType (line 4) | function unwrapType(type: GraphQLType): GraphQLNamedType {
FILE: packages/graphiql-plugin-doc-explorer/src/components/argument.tsx
type ArgumentProps (line 8) | type ArgumentProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/default-value.tsx
type DefaultValueProps (line 13) | type DefaultValueProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.tsx
type DeprecationReasonProps (line 5) | type DeprecationReasonProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/directive.tsx
type DirectiveProps (line 5) | type DirectiveProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/field-documentation.tsx
type FieldDocumentationProps (line 11) | type FieldDocumentationProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/field-link.tsx
type FieldLinkProps (line 5) | type FieldLinkProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/schema-documentation.tsx
type SchemaDocumentationProps (line 8) | type SchemaDocumentationProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/search.tsx
type TypeMatch (line 147) | type TypeMatch = { type: GraphQLNamedType };
type FieldMatch (line 149) | type FieldMatch = {
function useSearchResults (line 155) | function useSearchResults() {
function isMatch (line 237) | function isMatch(sourceText: string, searchValue: string): boolean {
type FieldProps (line 250) | type FieldProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/section.tsx
type ExplorerSectionProps (line 16) | type ExplorerSectionProps = {
constant TYPE_TO_ICON (line 54) | const TYPE_TO_ICON: Record<ExplorerSectionProps['title'], FC> = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/type-documentation.tsx
type TypeDocumentationProps (line 22) | type TypeDocumentationProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/type-link.tsx
type TypeLinkProps (line 7) | type TypeLinkProps = {
FILE: packages/graphiql-plugin-doc-explorer/src/components/utils.tsx
function renderType (line 11) | function renderType(
FILE: packages/graphiql-plugin-doc-explorer/src/context.tsx
constant DOC_EXPLORER_PLUGIN (line 32) | const DOC_EXPLORER_PLUGIN: GraphiQLPlugin = {
type DocExplorerFieldDef (line 45) | type DocExplorerFieldDef =
type DocExplorerNavStackItem (line 50) | type DocExplorerNavStackItem = {
type DocExplorerNavStack (line 63) | type DocExplorerNavStack = [
type DocExplorerStoreType (line 68) | type DocExplorerStoreType = {
constant INITIAL_NAV_STACK (line 99) | const INITIAL_NAV_STACK: DocExplorerNavStack = [{ name: 'Docs' }];
method push (line 105) | push(item) {
method pop (line 116) | pop() {
method reset (line 126) | reset() {
method resolveSchemaReferenceToNavItem (line 133) | resolveSchemaReferenceToNavItem(schemaReference) {
method rebuildNavStackWithSchema (line 186) | rebuildNavStackWithSchema(schema: GraphQLSchema) {
function handleKeyDown (line 297) | function handleKeyDown(event: KeyboardEvent) {
FILE: packages/graphiql-plugin-doc-explorer/src/deprecated.ts
function useExplorerContext (line 6) | function useExplorerContext() {
FILE: packages/graphiql-plugin-doc-explorer/src/schema-reference.ts
function getSchemaReference (line 19) | function getSchemaReference(kind: string, typeInfo: any) {
function getArgumentReference (line 40) | function getArgumentReference(typeInfo: any): ArgumentReference {
function getDirectiveReference (line 57) | function getDirectiveReference(typeInfo: any): DirectiveReference {
function getFieldReference (line 65) | function getFieldReference(typeInfo: any): FieldReference {
function getTypeReference (line 76) | function getTypeReference(
function getEnumValueReference (line 87) | function getEnumValueReference(typeInfo: TypeInfo): EnumValueReference {
function isMetaField (line 97) | function isMetaField(fieldDef: GraphQLField<unknown, unknown>) {
type ArgumentReference (line 101) | type ArgumentReference = {
type DirectiveReference (line 110) | type DirectiveReference = {
type EnumValueReference (line 116) | type EnumValueReference = {
type FieldReference (line 123) | type FieldReference = {
type TypeReference (line 130) | type TypeReference = {
type TypeInfo (line 136) | interface TypeInfo {
FILE: packages/graphiql-plugin-explorer/src/graphiql-explorer.d.ts
type GraphiQLExplorerProps (line 14) | type GraphiQLExplorerProps = {
FILE: packages/graphiql-plugin-explorer/src/index.tsx
type GraphiQLExplorerPluginProps (line 58) | type GraphiQLExplorerPluginProps = Omit<
function explorerPlugin (line 102) | function explorerPlugin(
FILE: packages/graphiql-plugin-history/src/__tests__/components.spec.tsx
method useGraphiQL (line 15) | useGraphiQL() {
type QueryHistoryItemProps (line 43) | type QueryHistoryItemProps = ComponentProps<typeof HistoryItem>;
function getMockProps (line 66) | function getMockProps(
FILE: packages/graphiql-plugin-history/src/components.tsx
function handleDelete (line 20) | function handleDelete(
type QueryHistoryItemProps (line 109) | type QueryHistoryItemProps = {
function formatQuery (line 250) | function formatQuery(query?: string) {
FILE: packages/graphiql-plugin-history/src/context.ts
method addToHistory (line 12) | addToHistory(operation) {
method editLabel (line 17) | editLabel(operation, index) {
method toggleFavorite (line 22) | toggleFavorite(operation) {
method deleteFromHistory (line 28) | deleteFromHistory(item, clearFavorites) {
type HistoryStoreType (line 36) | type HistoryStoreType = {
type HistoryStoreProps (line 101) | type HistoryStoreProps = {
constant EMPTY_ARRAY (line 149) | const EMPTY_ARRAY: QueryStoreItem[] = [];
FILE: packages/graphiql-plugin-history/src/deprecated.ts
function useHistoryContext (line 6) | function useHistoryContext() {
FILE: packages/graphiql-plugin-history/src/index.ts
constant HISTORY_PLUGIN (line 6) | const HISTORY_PLUGIN: GraphiQLPlugin = {
FILE: packages/graphiql-react/src/components/button/index.tsx
type UnStyledButtonProps (line 5) | type UnStyledButtonProps = ComponentPropsWithoutRef<'button'>;
type ButtonProps (line 19) | interface ButtonProps extends UnStyledButtonProps {
FILE: packages/graphiql-react/src/components/image-preview.tsx
type ImagePreviewProps (line 3) | interface ImagePreviewProps {
type Dimensions (line 7) | interface Dimensions {
method shouldRender (line 61) | shouldRender(path: string) {
function pathToURL (line 67) | function pathToURL(path: string) {
FILE: packages/graphiql-react/src/components/markdown-content/index.tsx
type MarkdownContentProps (line 5) | interface MarkdownContentProps
FILE: packages/graphiql-react/src/components/operation-editor.tsx
type OperationEditorProps (line 31) | interface OperationEditorProps extends EditorProps {
function getAndUpdateOperationFacts (line 163) | function getAndUpdateOperationFacts(editorInstance: MonacoEditor) {
method provideDefinition (line 294) | provideDefinition(model, position, _token) {
method provideReferences (line 330) | provideReferences(model, { lineNumber, column }, _context, _token) {
FILE: packages/graphiql-react/src/components/provider.tsx
type GraphiQLProviderProps (line 46) | interface GraphiQLProviderProps
type GraphiQLStore (line 56) | type GraphiQLStore = UseBoundStore<StoreApi<SlicesWithActions>>;
function getInitialVisiblePlugin (line 178) | function getInitialVisiblePlugin() {
function getInitialTheme (line 192) | function getInitialTheme() {
function getInitialState (line 208) | function getInitialState() {
function runIntrospection (line 356) | function runIntrospection(event: KeyboardEvent) {
function useGraphiQL (line 376) | function useGraphiQL<T>(selector: (state: SlicesWithActions) => T): T {
function getExternalFragments (line 393) | function getExternalFragments(
FILE: packages/graphiql-react/src/components/request-headers-editor.tsx
type RequestHeadersEditorProps (line 16) | interface RequestHeadersEditorProps extends EditorProps {
FILE: packages/graphiql-react/src/components/response-editor.tsx
type ResponseTooltipType (line 20) | type ResponseTooltipType = ComponentType<{
type ResponseEditorProps (line 31) | interface ResponseEditorProps extends EditorProps {
FILE: packages/graphiql-react/src/components/tabs/index.tsx
type TabProps (line 8) | interface TabProps extends ComponentPropsWithoutRef<typeof Reorder.Item> {
type TabsProps (line 69) | interface TabsProps {
FILE: packages/graphiql-react/src/components/toolbar-button/index.tsx
type ToolbarButtonProps (line 12) | interface ToolbarButtonProps extends ComponentPropsWithoutRef<'button'> {
FILE: packages/graphiql-react/src/components/toolbar-menu/index.tsx
type ToolbarMenuProps (line 5) | interface ToolbarMenuProps extends DropdownMenuProps {
FILE: packages/graphiql-react/src/components/variables-editor.tsx
type VariablesEditorProps (line 16) | interface VariablesEditorProps extends EditorProps {
FILE: packages/graphiql-react/src/constants.ts
function formatShortcutForOS (line 10) | function formatShortcutForOS(key: string, replaced = '⌘') {
constant KEY_MAP (line 14) | const KEY_MAP = Object.freeze({
constant STORAGE_KEY (line 45) | const STORAGE_KEY = {
constant DEFAULT_QUERY (line 55) | const DEFAULT_QUERY = `# Welcome to GraphiQL
constant KEY_BINDINGS (line 88) | const KEY_BINDINGS = {
constant URI_NAME (line 115) | const URI_NAME = {
constant JSON_DIAGNOSTIC_OPTIONS (line 125) | const JSON_DIAGNOSTIC_OPTIONS: monaco.languages.json.DiagnosticsOptions =
constant MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS (line 133) | const MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS: DiagnosticSettings = {
constant MONACO_THEME_NAME (line 168) | const MONACO_THEME_NAME = {
constant MONACO_THEME_DATA (line 228) | const MONACO_THEME_DATA: Record<
FILE: packages/graphiql-react/src/deprecated.ts
function usePrettifyEditors (line 10) | function usePrettifyEditors() {
function useCopyQuery (line 18) | function useCopyQuery() {
function useMergeQuery (line 26) | function useMergeQuery() {
function useEditorContext (line 34) | function useEditorContext() {
function useExecutionContext (line 87) | function useExecutionContext() {
function usePluginContext (line 104) | function usePluginContext() {
function useSchemaContext (line 116) | function useSchemaContext() {
function useTheme (line 143) | function useTheme() {
FILE: packages/graphiql-react/src/env.d.ts
type WorkerCtor (line 25) | type WorkerCtor = typeof import('*?worker').default;
FILE: packages/graphiql-react/src/icons/index.tsx
function generateIcon (line 67) | function generateIcon(
FILE: packages/graphiql-react/src/setup-workers/esm.sh.ts
method getWorker (line 7) | getWorker(_workerId: string, label: string) {
FILE: packages/graphiql-react/src/setup-workers/vite.ts
method getWorker (line 16) | getWorker(_workerId: string, label: string) {
FILE: packages/graphiql-react/src/setup-workers/webpack.ts
method getWorker (line 5) | getWorker(_workerId: string, label: string) {
FILE: packages/graphiql-react/src/stores/editor.ts
type EditorSlice (line 23) | interface EditorSlice extends TabsState {
type EditorActions (line 151) | interface EditorActions {
type EditorProps (line 232) | interface EditorProps
type CreateEditorSlice (line 279) | type CreateEditorSlice = (
function setEditorValues (line 305) | function setEditorValues({
function synchronizeActiveTabValues (line 329) | function synchronizeActiveTabValues(tabsState: TabsState): TabsState {
method addTab (line 347) | addTab() {
method changeTab (line 364) | changeTab(index) {
method moveTab (line 377) | moveTab(newOrder) {
method closeTab (line 390) | closeTab(index) {
method updateActiveTabValues (line 405) | updateActiveTabValues(partialTab) {
method setEditor (line 416) | setEditor({ headerEditor, queryEditor, responseEditor, variableEditor }) {
method setOperationName (line 426) | setOperationName(operationName) {
method setShouldPersistHeaders (line 433) | setShouldPersistHeaders(persist) {
method storeTabs (line 449) | storeTabs({ tabs, activeTabIndex }) {
method setOperationFacts (line 456) | setOperationFacts({ documentAST, operationName, operations }) {
method copyQuery (line 463) | async copyQuery() {
method prettifyEditors (line 478) | async prettifyEditors() {
method mergeQuery (line 528) | mergeQuery() {
FILE: packages/graphiql-react/src/stores/execution.ts
type ExecutionSlice (line 20) | interface ExecutionSlice {
type ExecutionActions (line 72) | interface ExecutionActions {
type ExecutionProps (line 84) | interface ExecutionProps
type CreateExecutionSlice (line 92) | type CreateExecutionSlice = (
function getAutoCompleteLeafs (line 108) | function getAutoCompleteLeafs() {
method stop (line 181) | stop() {
method run (line 187) | async run() {
type IncrementalResult (line 335) | interface IncrementalResult {
function mergeIncrementalResult (line 364) | function mergeIncrementalResult(
FILE: packages/graphiql-react/src/stores/monaco.ts
type MonacoStoreType (line 11) | interface MonacoStoreType {
function patchFirefox (line 33) | async function patchFirefox() {
method initialize (line 68) | async initialize() {
FILE: packages/graphiql-react/src/stores/plugin.ts
type GraphiQLPlugin (line 6) | interface GraphiQLPlugin {
type PluginSlice (line 25) | interface PluginSlice {
type PluginActions (line 52) | interface PluginActions {
type PluginProps (line 65) | interface PluginProps
type CreatePluginSlice (line 83) | type CreatePluginSlice = (
method setVisiblePlugin (line 99) | setVisiblePlugin(plugin = null) {
method setPlugins (line 119) | setPlugins(plugins) {
FILE: packages/graphiql-react/src/stores/schema.ts
type MaybeGraphQLSchema (line 20) | type MaybeGraphQLSchema = GraphQLSchema | null | undefined;
type CreateSchemaSlice (line 22) | type CreateSchemaSlice = (
method setSchemaReference (line 53) | setSchemaReference(schemaReference) {
method introspect (line 56) | async introspect() {
type SchemaSlice (line 168) | interface SchemaSlice
type SchemaActions (line 215) | interface SchemaActions {
type SchemaProps (line 232) | interface SchemaProps {
FILE: packages/graphiql-react/src/stores/storage.ts
type StorageSlice (line 5) | interface StorageSlice {
type StorageProps (line 9) | interface StorageProps {
type CreateStorageSlice (line 19) | type CreateStorageSlice = (
FILE: packages/graphiql-react/src/stores/theme.ts
type MonacoTheme (line 7) | type MonacoTheme =
type ThemeSlice (line 12) | interface ThemeSlice {
type ThemeActions (line 18) | interface ThemeActions {
type ThemeProps (line 25) | interface ThemeProps {
type CreateThemeSlice (line 41) | type CreateThemeSlice = (
method setTheme (line 57) | setTheme(theme) {
function getSystemTheme (line 77) | function getSystemTheme() {
FILE: packages/graphiql-react/src/types.test-d.ts
type OverlapError (line 18) | interface OverlapError<K extends PropertyKey> {
type MergeWithoutOverlap (line 23) | type MergeWithoutOverlap<A, B> = keyof A & keyof B extends never
type MergeMany (line 27) | type MergeMany<T extends any[], Acc = unknown> = T extends [
type Actual (line 39) | type Actual = MergeMany<
type Actual (line 54) | type Actual = MergeMany<
FILE: packages/graphiql-react/src/types.ts
type EditorProps (line 20) | type EditorProps = ComponentPropsWithoutRef<'div'>;
type SchemaReference (line 22) | interface SchemaReference {
type MonacoEditor (line 27) | type MonacoEditor = monaco.editor.IStandaloneCodeEditor;
type AllSlices (line 29) | type AllSlices = EditorSlice &
type AllActions (line 36) | type AllActions = EditorActions &
type SlicesWithActions (line 42) | interface SlicesWithActions extends AllSlices {
type Theme (line 50) | type Theme = 'light' | 'dark' | null;
FILE: packages/graphiql-react/src/utility/cleanup-disposables.ts
function cleanupDisposables (line 3) | function cleanupDisposables(disposables: monaco.IDisposable[]) {
FILE: packages/graphiql-react/src/utility/create-editor.ts
function getOrCreateModel (line 18) | function getOrCreateModel({
function createEditor (line 35) | function createEditor(
FILE: packages/graphiql-react/src/utility/debounce.ts
function debounce (line 7) | function debounce<F extends (...args: any[]) => any>(
FILE: packages/graphiql-react/src/utility/hooks.ts
function useChangeHandler (line 6) | function useChangeHandler(
function onChange (line 64) | function onChange() {
function handleChange (line 76) | function handleChange(newValue: string) {
function useOptimisticState (line 129) | function useOptimisticState([
FILE: packages/graphiql-react/src/utility/jsonc.ts
function formatJSONC (line 7) | async function formatJSONC(content: string): Promise<string> {
function parseJSONC (line 38) | function parseJSONC(content: string) {
function tryParseJSONC (line 58) | function tryParseJSONC(json = '') {
FILE: packages/graphiql-react/src/utility/pick.ts
function pick (line 4) | function pick<T, K extends keyof T>(...keys: K[]) {
FILE: packages/graphiql-react/src/utility/resize.ts
type ResizableElement (line 5) | type ResizableElement = 'first' | 'second';
type UseDragResizeArgs (line 7) | interface UseDragResizeArgs {
function useDragResize (line 49) | function useDragResize({
constant HIDE_FIRST (line 266) | const HIDE_FIRST = 'hide-first';
constant HIDE_SECOND (line 267) | const HIDE_SECOND = 'hide-second';
FILE: packages/graphiql-react/src/utility/tabs.ts
type TabDefinition (line 6) | interface TabDefinition {
type TabState (line 24) | interface TabState extends TabDefinition {
type TabsState (line 57) | type TabsState = {
function getDefaultTabState (line 69) | function getDefaultTabState({
function isTabsState (line 151) | function isTabsState(obj: any): obj is TabsState {
function isTabState (line 163) | function isTabState(obj: any): obj is TabState {
function hasNumberKey (line 179) | function hasNumberKey(obj: Record<string, any>, key: string) {
function hasStringKey (line 183) | function hasStringKey(obj: Record<string, any>, key: string) {
function hasStringOrNullKey (line 187) | function hasStringOrNullKey(obj: Record<string, any>, key: string) {
function serializeTabState (line 191) | function serializeTabState(
function createTab (line 204) | function createTab({
function setPropertiesInActiveTab (line 222) | function setPropertiesInActiveTab(
function guid (line 247) | function guid(): string {
function hashFromTabContents (line 257) | function hashFromTabContents(args: {
function fuzzyExtractOperationName (line 265) | function fuzzyExtractOperationName(str: string): string | null {
function clearHeadersFromTabs (line 273) | function clearHeadersFromTabs(storage: AllSlices['storage']) {
constant DEFAULT_TITLE (line 286) | const DEFAULT_TITLE = '<untitled>';
FILE: packages/graphiql-react/src/utility/whitespace.ts
function normalizeWhitespace (line 11) | function normalizeWhitespace(line: string) {
FILE: packages/graphiql-toolkit/src/async-helpers/index.ts
function isPromise (line 8) | function isPromise<T>(value: Promise<T> | any): value is Promise<T> {
function observableToPromise (line 17) | function observableToPromise<T>(observable: Observable<T>): Promise<T> {
function isObservable (line 33) | function isObservable<T>(value: any): value is Observable<T> {
function isAsyncIterable (line 42) | function isAsyncIterable(
function asyncIterableToPromise (line 55) | async function asyncIterableToPromise<T>(
function fetcherReturnToPromise (line 75) | async function fetcherReturnToPromise(
FILE: packages/graphiql-toolkit/src/create-fetcher/createFetcher.ts
function createGraphiQLFetcher (line 15) | function createGraphiQLFetcher(options: CreateFetcherOptions): Fetcher {
FILE: packages/graphiql-toolkit/src/create-fetcher/lib.ts
method OperationDefinition (line 40) | OperationDefinition(node) {
function createWebsocketsFetcherFromUrl (line 72) | async function createWebsocketsFetcherFromUrl(
method error (line 106) | error(err) {
function getWsFetcher (line 182) | async function getWsFetcher(
FILE: packages/graphiql-toolkit/src/create-fetcher/types.ts
type Observable (line 4) | type Observable<T> = {
type Unsubscribable (line 23) | type Unsubscribable = {
type FetcherParams (line 27) | type FetcherParams = {
type FetcherOpts (line 33) | type FetcherOpts = {
type ExecutionResultPayload (line 38) | type ExecutionResultPayload =
type FetcherResultPayload (line 55) | type FetcherResultPayload = ExecutionResultPayload;
type MaybePromise (line 57) | type MaybePromise<T> = T | Promise<T>;
type FetcherResult (line 59) | type FetcherResult = ExecutionResult | { data: IntrospectionQuery };
type SyncExecutionResult (line 61) | type SyncExecutionResult =
type SyncFetcherResult (line 66) | type SyncFetcherResult = SyncExecutionResult;
type FetcherReturnType (line 68) | type FetcherReturnType = MaybePromise<SyncExecutionResult>;
type Fetcher (line 70) | type Fetcher = (
type CreateFetcherOptions (line 78) | interface CreateFetcherOptions {
FILE: packages/graphiql-toolkit/src/format/index.ts
function stringify (line 1) | function stringify(obj: unknown): string {
function formatSingleError (line 5) | function formatSingleError(error: Error): Error {
function handleSingleError (line 14) | function handleSingleError(error: unknown) {
function formatError (line 21) | function formatError(error: unknown): string {
function formatResult (line 30) | function formatResult(result: any): string {
FILE: packages/graphiql-toolkit/src/graphql-helpers/__tests__/merge-ast.spec.ts
function parseMergeAndPrint (line 207) | function parseMergeAndPrint(query: string, maybeSchema?: GraphQLSchema) {
function stripWhitespace (line 211) | function stripWhitespace(str: string) {
function removeParametersCommas (line 215) | function removeParametersCommas(str: string) {
FILE: packages/graphiql-toolkit/src/graphql-helpers/auto-complete.ts
type Insertion (line 16) | type Insertion = {
type GetDefaultFieldNamesFn (line 21) | type GetDefaultFieldNamesFn = (type: GraphQLType) => string[];
function fillLeafs (line 33) | function fillLeafs(
function defaultGetDefaultFieldNames (line 86) | function defaultGetDefaultFieldNames(type: GraphQLType) {
function buildSelectionSet (line 122) | function buildSelectionSet(
function withInsertions (line 168) | function withInsertions(initial: string, insertions: Insertion[]) {
function getIndentation (line 184) | function getIndentation(str: string, index: number) {
function isFieldType (line 202) | function isFieldType(
FILE: packages/graphiql-toolkit/src/graphql-helpers/merge-ast.ts
function uniqueBy (line 16) | function uniqueBy<T>(
function inlineRelevantFragmentSpreads (line 48) | function inlineRelevantFragmentSpreads(
function mergeAst (line 109) | function mergeAst(
FILE: packages/graphiql-toolkit/src/graphql-helpers/operation-name.ts
function getSelectedOperationName (line 7) | function getSelectedOperationName(
FILE: packages/graphiql-toolkit/src/storage/__tests__/base.spec.ts
method setItem (line 75) | setItem() {
method setItem (line 89) | setItem() {
FILE: packages/graphiql-toolkit/src/storage/__tests__/query.spec.ts
class StorageMock (line 4) | class StorageMock {
method constructor (line 12) | constructor(shouldThrow: () => boolean) {
method set (line 16) | set(key: string, value: string) {
method get (line 34) | get(key: string) {
FILE: packages/graphiql-toolkit/src/storage/base.ts
type Storage (line 6) | type Storage = {
function isQuotaError (line 37) | function isQuotaError(storage: Storage, e: unknown) {
class StorageAPI (line 54) | class StorageAPI {
method constructor (line 57) | constructor(storage?: Storage | null) {
method get (line 93) | get(name: string): string | null {
method set (line 109) | set(
method clear (line 134) | clear() {
constant STORAGE_NAMESPACE (line 141) | const STORAGE_NAMESPACE = 'graphiql';
FILE: packages/graphiql-toolkit/src/storage/custom.ts
type CreateLocalStorageOptions (line 7) | type CreateLocalStorageOptions = {
function createLocalStorage (line 16) | function createLocalStorage({
FILE: packages/graphiql-toolkit/src/storage/history.ts
constant MAX_QUERY_SIZE (line 6) | const MAX_QUERY_SIZE = 100000;
class HistoryStore (line 8) | class HistoryStore {
method constructor (line 13) | constructor(
method shouldSaveQuery (line 28) | private shouldSaveQuery(
method toggleFavorite (line 98) | toggleFavorite({
method editLabel (line 125) | editLabel(
method deleteFromStore (line 155) | function deleteFromStore(store: QueryStore) {
FILE: packages/graphiql-toolkit/src/storage/query.ts
type QueryStoreItem (line 3) | type QueryStoreItem = {
class QueryStore (line 12) | class QueryStore {
method constructor (line 15) | constructor(
method length (line 23) | get length() {
method contains (line 27) | contains(item: QueryStoreItem) {
method edit (line 37) | edit(item: QueryStoreItem, index?: number) {
method delete (line 65) | delete(item: QueryStoreItem) {
method fetchRecent (line 79) | fetchRecent() {
method fetchAll (line 83) | fetchAll() {
method push (line 91) | push(item: QueryStoreItem) {
method save (line 114) | save() {
FILE: packages/graphiql/__mocks__/monaco-editor.ts
method observe (line 30) | observe() {}
method disconnect (line 31) | disconnect() {}
FILE: packages/graphiql/__mocks__/zustand.ts
function createStoreUncurried (line 43) | function createStoreUncurried<T>(stateCreator: StateCreator<T>) {
FILE: packages/graphiql/cypress.config.ts
constant PORT (line 3) | const PORT = process.env.CI === 'true' ? 8080 : 5173;
FILE: packages/graphiql/cypress/e2e/headers.cy.ts
constant DEFAULT_HEADERS (line 1) | const DEFAULT_HEADERS = '{"foo":2}';
FILE: packages/graphiql/cypress/env.d.ts
type Window (line 4) | interface Window {
FILE: packages/graphiql/cypress/support/commands.ts
type Op (line 11) | interface Op {
type MockResult (line 20) | type MockResult =
type Chainable (line 26) | interface Chainable {
function normalizeMonacoWhitespace (line 141) | function normalizeMonacoWhitespace(str: string): string {
FILE: packages/graphiql/src/GraphiQL.spec.tsx
function firstFetcher (line 68) | function firstFetcher() {
function secondFetcher (line 75) | function secondFetcher() {
function firstFetcher (line 108) | function firstFetcher() {
function secondFetcher (line 112) | function secondFetcher() {
class MyClassComponent (line 583) | class MyClassComponent extends Component {
method render (line 584) | render() {
FILE: packages/graphiql/src/GraphiQL.tsx
type GraphiQLProps (line 49) | interface GraphiQLProps
type AddSuffix (line 135) | type AddSuffix<Obj extends Record<string, any>, Suffix extends string> = {
type QueryEditorProps (line 139) | type QueryEditorProps = ComponentPropsWithoutRef<typeof QueryEditor>;
type VariableEditorProps (line 140) | type VariableEditorProps = ComponentPropsWithoutRef<typeof VariableEditor>;
type HeaderEditorProps (line 141) | type HeaderEditorProps = ComponentPropsWithoutRef<typeof HeaderEditor>;
type ResponseEditorProps (line 142) | type ResponseEditorProps = ComponentPropsWithoutRef<typeof ResponseEditor>;
type GraphiQLInterfaceProps (line 144) | interface GraphiQLInterfaceProps
constant TAB_CLASS_PREFIX (line 185) | const TAB_CLASS_PREFIX = 'graphiql-session-tab-';
type ButtonHandler (line 187) | type ButtonHandler = MouseEventHandler<HTMLButtonElement>;
constant LABEL (line 189) | const LABEL = {
method onHiddenElementChange (line 233) | onHiddenElementChange(resizableElement) {
function onClickReference (line 306) | function onClickReference() {
function getChildComponentType (line 534) | function getChildComponentType(child: ReactNode) {
FILE: packages/graphiql/src/e2e.ts
type Params (line 21) | interface Params {
function onEditQuery (line 42) | function onEditQuery(newQuery: string): void {
function onEditVariables (line 47) | function onEditVariables(newVariables: string): void {
function onEditHeaders (line 52) | function onEditHeaders(newHeaders: string): void {
function onTabChange (line 57) | function onTabChange(tabsState: TabsState): void {
function confirmCloseTab (line 65) | function confirmCloseTab(index: number): boolean {
function onPrettifyQuery (line 70) | function onPrettifyQuery(query: string): string {
function updateURL (line 74) | function updateURL(): void {
function getSchemaUrl (line 85) | function getSchemaUrl(): string {
function App (line 130) | function App() {
FILE: packages/graphiql/src/ui/short-keys.tsx
constant SHORT_KEYS (line 4) | const SHORT_KEYS = Object.entries({
FILE: packages/graphiql/src/ui/sidebar.tsx
type ButtonHandler (line 22) | type ButtonHandler = MouseEventHandler<HTMLButtonElement>;
constant LABEL (line 24) | const LABEL = {
constant THEMES (line 30) | const THEMES = ['light', 'dark', 'system'] as const;
type SidebarProps (line 32) | interface SidebarProps {
function openSettings (line 92) | function openSettings(event: KeyboardEvent) {
function handleOpenShortKeysDialog (line 105) | function handleOpenShortKeysDialog(isOpen: boolean) {
function handleOpenSettingsDialog (line 111) | function handleOpenSettingsDialog(isOpen: boolean) {
function handleClearData (line 118) | function handleClearData() {
FILE: packages/graphiql/test/e2e-server.js
function handler (line 30) | async function handler(req, res) {
FILE: packages/graphiql/test/execute.js
function createExecute (line 1) | function createExecute({
FILE: packages/graphiql/test/schema.js
function createSchema (line 12) | function createSchema({
FILE: packages/graphql-language-service-cli/src/client.ts
constant GRAPHQL_SUCCESS_CODE (line 25) | const GRAPHQL_SUCCESS_CODE = 0;
constant GRAPHQL_FAILURE_CODE (line 26) | const GRAPHQL_FAILURE_CODE = 1;
type EXIT_CODE (line 28) | type EXIT_CODE = 0 | 1;
function main (line 41) | function main(
type AutocompleteResultsMap (line 76) | interface AutocompleteResultsMap {
function formatUnknownError (line 80) | function formatUnknownError(error: unknown) {
function _getAutocompleteSuggestions (line 88) | function _getAutocompleteSuggestions(
type DiagnosticResultsMap (line 118) | interface DiagnosticResultsMap {
function _getDiagnostics (line 122) | function _getDiagnostics(
function _getOutline (line 147) | function _getOutline(queryText: string): EXIT_CODE {
function ensureText (line 162) | function ensureText(queryText: string, filePath: string): string {
function generateSchema (line 176) | function generateSchema(schemaPath: string): GraphQLSchema {
FILE: packages/graphql-language-service-server/src/GraphQLCache.ts
constant MAX_READS (line 77) | const MAX_READS = 200;
type OnSchemaChange (line 79) | type OnSchemaChange = (project: GraphQLProjectConfig) => void;
function getGraphQLCache (line 81) | async function getGraphQLCache({
class GraphQLCache (line 118) | class GraphQLCache {
method constructor (line 131) | constructor({
method FragmentDefinition (line 216) | FragmentDefinition(node) {
method FragmentSpread (line 219) | FragmentSpread(node) {
method FragmentSpread (line 237) | FragmentSpread(node) {
method ObjectTypeDefinition (line 293) | ObjectTypeDefinition(node) {
method InputObjectTypeDefinition (line 296) | InputObjectTypeDefinition(node) {
method EnumTypeDefinition (line 299) | EnumTypeDefinition(node) {
method NamedType (line 302) | NamedType(node) {
method UnionTypeDefinition (line 307) | UnionTypeDefinition(node) {
method ScalarTypeDefinition (line 310) | ScalarTypeDefinition(node) {
method InterfaceTypeDefinition (line 313) | InterfaceTypeDefinition(node) {
method NamedType (line 329) | NamedType(node) {
method updateFragmentDefinition (line 446) | async updateFragmentDefinition(
method _setFragmentCache (line 479) | _setFragmentCache(
method updateObjectTypeDefinition (line 501) | async updateObjectTypeDefinition(
method _setDefinitionCache (line 530) | _setDefinitionCache(
method _extendSchema (line 552) | _extendSchema(
method invalidateSchemaCacheForProject (line 670) | invalidateSchemaCacheForProject(projectConfig: GraphQLProjectConfig) {
method _getSchemaCacheKeyForProject (line 679) | _getSchemaCacheKeyForProject(
method _getProjectName (line 685) | _getProjectName(projectConfig: GraphQLProjectConfig) {
FILE: packages/graphql-language-service-server/src/GraphQLLanguageService.ts
constant KIND_TO_SYMBOL_KIND (line 63) | const KIND_TO_SYMBOL_KIND: { [key: string]: SymbolKind } = {
function getKind (line 80) | function getKind(tree: OutlineTree) {
class GraphQLLanguageService (line 91) | class GraphQLLanguageService {
method constructor (line 96) | constructor(cache: GraphQLCache, logger: Logger) {
method getConfigForURI (line 103) | getConfigForURI(uri: Uri) {
method getDiagnostics (line 110) | public async getDiagnostics(
method getAutocompleteSuggestions (line 217) | public async getAutocompleteSuggestions(
method getHoverInformation (line 254) | public async getHoverInformation(
method getDefinition (line 272) | public async getDefinition(
method getDocumentSymbols (line 359) | public async getDocumentSymbols(
method _getDefinitionForNamedType (line 408) | async _getDefinitionForNamedType(
method _getDefinitionForField (line 439) | async _getDefinitionForField(
method _getDefinitionForArgument (line 472) | async _getDefinitionForArgument(
method _getDefinitionForFragmentSpread (line 505) | async _getDefinitionForFragmentSpread(
method getOutline (line 542) | async getOutline(documentText: string): Promise<Outline | null> {
FILE: packages/graphql-language-service-server/src/Logger.ts
class Logger (line 13) | class Logger implements VSCodeLogger {
method constructor (line 17) | constructor(
method error (line 24) | error(message: string): void {
method warn (line 28) | warn(message: string): void {
method info (line 32) | info(message: string): void {
method log (line 36) | log(message: string): void {
method level (line 41) | set level(level: number) {
method level (line 44) | get level() {
class NoopLogger (line 49) | class NoopLogger implements VSCodeLogger {
method error (line 50) | error() {}
method warn (line 51) | warn() {}
method info (line 52) | info() {}
method log (line 53) | log() {}
method level (line 54) | set level(_level: number) {}
method level (line 55) | get level() {
FILE: packages/graphql-language-service-server/src/MessageProcessor.ts
type CachedDocumentType (line 83) | type CachedDocumentType = {
function toPosition (line 88) | function toPosition(position: VscodePosition): IPosition {
class MessageProcessor (line 92) | class MessageProcessor {
method constructor (line 109) | constructor({
method connection (line 149) | get connection(): Connection {
method connection (line 152) | set connection(connection: Connection) {
method handleInitializeRequest (line 156) | public async handleInitializeRequest(
method _initializeGraphQLCaches (line 204) | async _initializeGraphQLCaches() {
method _handleConfigError (line 298) | private _handleConfigError({ err }: { err: unknown; uri?: string }) {
method _logConfigError (line 329) | private _logConfigError(errorMessage: string) {
method _isGraphQLConfigFile (line 336) | private async _isGraphQLConfigFile(uri: string) {
method _loadConfigOrSkip (line 356) | private async _loadConfigOrSkip(uri: string) {
method handleDidOpenOrSaveNotification (line 382) | public async handleDidOpenOrSaveNotification(
method handleDidChangeNotification (line 462) | public async handleDidChangeNotification(
method handleDidChangeConfiguration (line 541) | async handleDidChangeConfiguration(
method handleDidCloseNotification (line 554) | public handleDidCloseNotification(params: DidCloseTextDocumentParams):...
method handleShutdownRequest (line 582) | public handleShutdownRequest(): void {
method handleExitNotification (line 586) | public handleExitNotification(): void {
method validateDocumentAndPosition (line 590) | private validateDocumentAndPosition(params: CompletionParams): void {
method handleCompletionRequest (line 598) | public async handleCompletionRequest(
method handleHoverRequest (line 657) | public async handleHoverRequest(
method _parseAndCacheFile (line 702) | private async _parseAndCacheFile(
method handleWatchedFilesChangedNotification (line 722) | public async handleWatchedFilesChangedNotification(
method handleDefinitionRequest (line 786) | public async handleDefinitionRequest(
method _getCustomLocateResult (line 901) | _getCustomLocateResult(
method handleDocumentSymbolRequest (line 937) | public async handleDocumentSymbolRequest(
method handleWorkspaceSymbolRequest (line 997) | public async handleWorkspaceSymbolRequest(
method _getTextDocuments (line 1027) | private _getTextDocuments() {
method _cacheSchemaText (line 1031) | private async _cacheSchemaText(
method _cacheSchemaFile (line 1047) | private async _cacheSchemaFile(
method _getTmpProjectPath (line 1074) | private _getTmpProjectPath(
method getCachedSchemaSettings (line 1097) | private getCachedSchemaSettings(project: GraphQLProjectConfig) {
method _cacheSchemaFilesForProject (line 1118) | private async _cacheSchemaFilesForProject(project: GraphQLProjectConfi...
method cacheConfigSchemaFile (line 1174) | private async cacheConfigSchemaFile(project: GraphQLProjectConfig) {
method _cacheDocumentFilesforProject (line 1228) | private async _cacheDocumentFilesforProject(project: GraphQLProjectCon...
method _cacheAllProjectFiles (line 1271) | private async _cacheAllProjectFiles(config: GraphQLConfig) {
method _isRelayCompatMode (line 1293) | _isRelayCompatMode(query: string): boolean {
method _updateFragmentDefinition (line 1299) | private async _updateFragmentDefinition(
method _updateSchemaIfChanged (line 1314) | private async _updateSchemaIfChanged(
method _updateObjectTypeDefinition (line 1336) | private async _updateObjectTypeDefinition(
method _getCachedDocument (line 1353) | private _getCachedDocument(uri: string): CachedDocumentType | null {
method _invalidateCache (line 1363) | private async _invalidateCache(
function processDiagnosticsMessage (line 1390) | function processDiagnosticsMessage(
FILE: packages/graphql-language-service-server/src/__tests__/GraphQLCache.test.ts
function withoutASTNode (line 31) | function withoutASTNode(definition: any) {
FILE: packages/graphql-language-service-server/src/__tests__/GraphQLLanguageService.test.ts
constant MOCK_CONFIG (line 19) | const MOCK_CONFIG = {
method getSchema (line 29) | async getSchema() {
method getGraphQLConfig (line 34) | getGraphQLConfig() {
method getProjectForFile (line 38) | getProjectForFile(uri: string) {
method getFragmentDefinitions (line 41) | getFragmentDefinitions() {
method getFragmentDependenciesForAST (line 61) | getFragmentDependenciesForAST() {
method getObjectTypeDefinitions (line 64) | getObjectTypeDefinitions() {
method getObjectTypeDependenciesForAST (line 120) | getObjectTypeDependenciesForAST() {
FILE: packages/graphql-language-service-server/src/__tests__/MessageProcessor.spec.ts
function mockSchema (line 36) | function mockSchema(schema: GraphQLSchema) {
FILE: packages/graphql-language-service-server/src/__tests__/MessageProcessor.test.ts
method getAutocompleteSuggestions (line 77) | getAutocompleteSuggestions(query, position, uri) {
method getDiagnostics (line 81) | getDiagnostics(_query, _uri) {
method getHoverInformation (line 84) | async getHoverInformation(_query, position, _uri) {
method getDocumentSymbols (line 90) | async getDocumentSymbols(_query: string, uri: string) {
method getOutline (line 105) | async getOutline(_query: string): Promise<Outline> {
method getDefinition (line 118) | async getDefinition(
method workspace (line 141) | get workspace() {
method getConfiguration (line 564) | getConfiguration() {
FILE: packages/graphql-language-service-server/src/__tests__/__utils__/MockProject.ts
type MockFile (line 8) | type MockFile = [filename: string, text: string];
class MockLogger (line 10) | class MockLogger implements VSCodeLogger {
type File (line 45) | type File = [filename: string, text: string];
type Files (line 46) | type Files = File[];
class MockProject (line 48) | class MockProject {
method constructor (line 52) | constructor({
method init (line 82) | public async init(filename?: string, fileText?: string) {
method mockFiles (line 101) | private mockFiles() {
method filePath (line 112) | public filePath(filename: string) {
method uri (line 115) | public uri(filename: string) {
method changeFile (line 118) | changeFile(filename: string, text: string) {
method addFile (line 122) | async addFile(filename: string, text: string, watched = false) {
method changeWatchedFile (line 148) | async changeWatchedFile(filename: string, text: string) {
method saveOpenFile (line 159) | async saveOpenFile(filename: string, text: string) {
method addWatchedFile (line 169) | async addWatchedFile(filename: string, text: string) {
method deleteFile (line 184) | async deleteFile(filename: string) {
method lsp (line 197) | get lsp() {
FILE: packages/graphql-language-service-server/src/common.ts
function unwrapProjectSchema (line 8) | function unwrapProjectSchema(project: GraphQLProjectConfig): string[] {
function globIfFilePattern (line 31) | function globIfFilePattern(pattern: string) {
function isProjectSDLOnly (line 45) | function isProjectSDLOnly(unwrappedSchema: string[]): boolean {
FILE: packages/graphql-language-service-server/src/constants.ts
constant PARSER_OPTIONS (line 4) | const PARSER_OPTIONS: ParserOptions = {
constant DEFAULT_SUPPORTED_GRAPHQL_EXTENSIONS (line 26) | const DEFAULT_SUPPORTED_GRAPHQL_EXTENSIONS = [
constant TAG_MAP (line 36) | const TAG_MAP: Record<string, true> = {
constant DEFAULT_SUPPORTED_EXTENSIONS (line 46) | const DEFAULT_SUPPORTED_EXTENSIONS = [
type SupportedExtensions (line 63) | type SupportedExtensions = typeof DEFAULT_SUPPORTED_EXTENSIONS;
type SupportedExtensionsEnum (line 64) | type SupportedExtensionsEnum =
constant BABEL_PLUGINS (line 70) | const BABEL_PLUGINS: ParserPlugin[] = [
FILE: packages/graphql-language-service-server/src/findGraphQLTags.ts
type TagResult (line 24) | type TagResult = { tag: string; template: string; range: Range };
type TagVisitors (line 26) | interface TagVisitors {
function findGraphQLTags (line 30) | async function findGraphQLTags(
function parseTemplateLiteral (line 172) | function parseTemplateLiteral(node: TemplateLiteral, rangeMapper: RangeM...
function getGraphQLTagName (line 207) | function getGraphQLTagName(tag: Expression): string | null {
function visit (line 223) | function visit(node: { [key: string]: any }, visitors: TagVisitors) {
constant IGNORED_KEYS (line 231) | const IGNORED_KEYS: { [key: string]: boolean } = {
function traverse (line 242) | function traverse(node: { [key: string]: any }, visitors: TagVisitors) {
FILE: packages/graphql-language-service-server/src/parseDocument.ts
function parseDocument (line 21) | async function parseDocument(
FILE: packages/graphql-language-service-server/src/parsers/astro.ts
type ParseAstroResult (line 6) | type ParseAstroResult =
function parseAstro (line 14) | async function parseAstro(source: string): Promise<ParseAstroResult> {
FILE: packages/graphql-language-service-server/src/parsers/index.ts
type ParserMap (line 9) | type ParserMap = {
FILE: packages/graphql-language-service-server/src/parsers/types.ts
type RangeMapper (line 4) | type RangeMapper = (range: Range) => Range;
type SourceParserResult (line 6) | type SourceParserResult = null | {
type SourceParser (line 11) | type SourceParser = (
FILE: packages/graphql-language-service-server/src/parsers/vue.ts
type ParseVueSFCResult (line 6) | type ParseVueSFCResult =
function parseVueSFC (line 15) | function parseVueSFC(source: string): ParseVueSFCResult {
FILE: packages/graphql-language-service-server/src/startServer.ts
type MappedServerOptions (line 55) | type MappedServerOptions = Omit<ServerOptions, 'loadConfigOptions'> & {
function startServer (line 93) | async function startServer(
type InitializerParams (line 137) | type InitializerParams = {
function initializeHandlers (line 143) | async function initializeHandlers({
function reportDiagnostics (line 161) | function reportDiagnostics(
type HandlerOptions (line 173) | type HandlerOptions = {
function addHandlers (line 190) | async function addHandlers({
FILE: packages/graphql-language-service-server/src/stringToHash.ts
function stringToHash (line 11) | function stringToHash(str: string): number {
FILE: packages/graphql-language-service-server/src/types.ts
type LoadConfigOptions (line 6) | type LoadConfigOptions = Parameters<typeof loadConfig>[0];
type RangeType (line 13) | type RangeType = {
type AdditionalLocateInfo (line 24) | type AdditionalLocateInfo = {
type LineNumber (line 30) | type LineNumber = string;
type CharacterNumber (line 31) | type CharacterNumber = string;
type RelayLSPLocateCommand (line 32) | type RelayLSPLocateCommand = (
type GraphQLLocateCommand (line 42) | type GraphQLLocateCommand = (
type LocateCommand (line 51) | type LocateCommand = RelayLSPLocateCommand | GraphQLLocateCommand;
type ServerOptions (line 53) | interface ServerOptions {
FILE: packages/graphql-language-service/benchmark/index.ts
type IStats (line 8) | interface IStats {
method onStart (line 39) | onStart() {
method fn (line 42) | fn() {
method onComplete (line 57) | onComplete(e) {
method fn (line 112) | fn() {
FILE: packages/graphql-language-service/src/interface/__tests__/getAutocompleteSuggestions.test.ts
function testSuggestions (line 89) | function testSuggestions(
FILE: packages/graphql-language-service/src/interface/__tests__/getDiagnostics.test.ts
method Document (line 85) | Document(node) {
method OperationDefinition (line 164) | OperationDefinition(node) {
FILE: packages/graphql-language-service/src/interface/__tests__/getHoverInformation.test.ts
function testHover (line 29) | function testHover(query: string, point: Position): Hover['contents'] {
FILE: packages/graphql-language-service/src/interface/autocompleteUtils.ts
function objectValues (line 22) | function objectValues<T>(object: Record<string, T>): Array<T> {
function hintList (line 33) | function hintList<T extends CompletionItemBase>(
function filterAndSortList (line 42) | function filterAndSortList<T extends CompletionItemBase>(
function filterNonEmpty (line 75) | function filterNonEmpty<T>(
function normalizeText (line 83) | function normalizeText(text: string): string {
function getProximity (line 88) | function getProximity(suggestion: string, text: string): number {
function lexicalDistance (line 114) | function lexicalDistance(a: string, b: string): number {
FILE: packages/graphql-language-service/src/interface/getAutocompleteSuggestions.ts
method FragmentDefinition (line 93) | FragmentDefinition(def) {
type AutocompleteSuggestionOptions (line 104) | type AutocompleteSuggestionOptions = {
type InternalAutocompleteOptions (line 124) | type InternalAutocompleteOptions = AutocompleteSuggestionOptions & {
function getAutocompleteSuggestions (line 132) | function getAutocompleteSuggestions(
function getSuggestionsForTypeSystemDefinitions (line 463) | function getSuggestionsForTypeSystemDefinitions(
function getSuggestionsForExecutableDefinitions (line 472) | function getSuggestionsForExecutableDefinitions(
function getSuggestionsForUnknownDocumentMode (line 478) | function getSuggestionsForUnknownDocumentMode(
function getSuggestionsForExtensionDefinitions (line 488) | function getSuggestionsForExtensionDefinitions(
function getSuggestionsForFieldNames (line 494) | function getSuggestionsForFieldNames(
function getSuggestionsForInputValues (line 569) | function getSuggestionsForInputValues(
function getSuggestionsForImplements (line 626) | function getSuggestionsForImplements(
function getSuggestionsForFragmentTypeConditions (line 737) | function getSuggestionsForFragmentTypeConditions(
function getSuggestionsForFragmentSpread (line 781) | function getSuggestionsForFragmentSpread(
function getVariableCompletions (line 851) | function getVariableCompletions(
function getFragmentDefinitions (line 898) | function getFragmentDefinitions(
function getSuggestionsForVariableDefinition (line 934) | function getSuggestionsForVariableDefinition(
function getSuggestionsForDirective (line 952) | function getSuggestionsForDirective(
function getSuggestionsForDirectiveArguments (line 976) | function getSuggestionsForDirectiveArguments(
function canUseDirective (line 993) | function canUseDirective(
function unwrapType (line 1051) | function unwrapType(state: State): State {
FILE: packages/graphql-language-service/src/interface/getDefinition.ts
type DefinitionQueryResult (line 31) | type DefinitionQueryResult = {
type DefinitionQueryResponse (line 37) | type DefinitionQueryResponse = DefinitionQueryResult & {
constant LANGUAGE (line 42) | const LANGUAGE = 'GraphQL';
function assert (line 44) | function assert(value: any, message: string) {
function getRange (line 50) | function getRange(text: string, node: ASTNode): Range {
function getPosition (line 56) | function getPosition(text: string, node: ASTNode): Position {
function getDefinitionQueryResultForNamedType (line 62) | async function getDefinitionQueryResultForNamedType(
function getDefinitionQueryResultForField (line 87) | async function getDefinitionQueryResultForField(
function getDefinitionQueryResultForArgument (line 124) | async function getDefinitionQueryResultForArgument(
function getDefinitionQueryResultForFragmentSpread (line 156) | async function getDefinitionQueryResultForFragmentSpread(
function getDefinitionQueryResultForDefinitionNode (line 180) | function getDefinitionQueryResultForDefinitionNode(
function getDefinitionForFragmentDefinition (line 192) | function getDefinitionForFragmentDefinition(
function getDefinitionForNodeDefinition (line 215) | function getDefinitionForNodeDefinition(
function getDefinitionForFieldDefinition (line 234) | function getDefinitionForFieldDefinition(
function getDefinitionForArgumentDefinition (line 253) | function getDefinitionForArgumentDefinition(
FILE: packages/graphql-language-service/src/interface/getDiagnostics.ts
constant SEVERITY (line 35) | const SEVERITY = {
type Severity (line 42) | type Severity = typeof SEVERITY;
type SeverityEnum (line 44) | type SeverityEnum = keyof Severity;
constant DIAGNOSTIC_SEVERITY (line 46) | const DIAGNOSTIC_SEVERITY = {
function getDiagnostics (line 59) | function getDiagnostics(
function validateQuery (line 102) | function validateQuery(
function annotations (line 131) | function annotations(
function getRange (line 172) | function getRange(location: SourceLocation, queryText: string): IRange {
function getLocation (line 210) | function getLocation(node: any): Location {
FILE: packages/graphql-language-service/src/interface/getHoverInformation.ts
type HoverConfig (line 29) | type HoverConfig = { useMarkdown?: boolean };
function getHoverInformation (line 31) | function getHoverInformation(
function renderMdCodeStart (line 108) | function renderMdCodeStart(into: string[], options: HoverConfig) {
function renderMdCodeEnd (line 113) | function renderMdCodeEnd(into: string[], options: any) {
function renderField (line 119) | function renderField(
function renderQualifiedField (line 128) | function renderQualifiedField(
function renderDirective (line 144) | function renderDirective(
function renderArg (line 156) | function renderArg(
function renderTypeAnnotation (line 178) | function renderTypeAnnotation(
function renderEnumValue (line 188) | function renderEnumValue(
function renderType (line 202) | function renderType(
function renderDescription (line 224) | function renderDescription(
function renderDeprecation (line 242) | function renderDeprecation(
function text (line 260) | function text(into: string[], content: string) {
FILE: packages/graphql-language-service/src/interface/getOutline.ts
type OutlineableKinds (line 42) | type OutlineableKinds =
type OutlineTreeResult (line 59) | type OutlineTreeResult =
type OutlineTreeConverterType (line 73) | type OutlineTreeConverterType = Partial<{
function getOutline (line 77) | function getOutline(documentText: string): Outline | null {
function outlineTreeConverter (line 99) | function outlineTreeConverter(docText: string): OutlineTreeConverterType {
function buildToken (line 203) | function buildToken(kind: TokenKind, value: string | NameNode): TextToken {
function concatMap (line 207) | function concatMap<V>(arr: Readonly<V[]>, fn: Function): Readonly<V[]> {
FILE: packages/graphql-language-service/src/parser/CharacterStream.ts
class CharacterStream (line 22) | class CharacterStream implements CharacterStreamInterface {
method constructor (line 27) | constructor(sourceText: string) {
method _testNextCharacter (line 35) | private _testNextCharacter(pattern: TokenPattern): boolean {
FILE: packages/graphql-language-service/src/parser/RuleHelpers.ts
function opt (line 15) | function opt(ofRule: Rule | string): Rule {
function list (line 20) | function list(ofRule: Rule | string, separator?: string | Rule): Rule {
function butNot (line 25) | function butNot(rule: Rule, exclusions: Array<Rule>) {
function t (line 42) | function t(kind: string, style: string) {
function p (line 47) | function p(value: string, style?: string): Rule {
FILE: packages/graphql-language-service/src/parser/Rules.ts
method Definition (line 55) | Definition(token: Token): RuleKind | void {
method Selection (line 118) | Selection(token: Token, stream: CharacterStream) {
method Value (line 164) | Value(token: Token) {
method update (line 201) | update(state: State, token: Token) {
method Type (line 214) | Type(token: Token) {
method ExtensionDefinition (line 307) | ExtensionDefinition(token: Token): RuleKind | void {
function word (line 335) | function word(value: string) {
function name (line 343) | function name(style: string): Rule {
function type (line 354) | function type(style: string) {
FILE: packages/graphql-language-service/src/parser/__tests__/OnlineParserUtils.ts
type TokenAssertArgs (line 23) | type TokenAssertArgs = {
type SimpleRules (line 30) | type SimpleRules =
type SimpleRuleAssertOptions (line 41) | type SimpleRuleAssertOptions = {
type SimpleRule (line 45) | type SimpleRule = (
type IAssertRules (line 50) | type IAssertRules = {
type Utils (line 62) | type Utils = { t: IAssertRules; stream?: CharacterStream };
type Args (line 64) | type Args = { name?: string; onKind?: RuleKind; args?: any[]; vars?: any...
method token (line 75) | token(
method keyword (line 87) | keyword(pattern, options = {}) {
method name (line 90) | name(pattern, options = {}) {
method property (line 93) | property(pattern, options = {}) {
method qualifier (line 96) | qualifier(pattern, options = {}) {
method variable (line 99) | variable(pattern, options = {}) {
method meta (line 102) | meta(pattern, options = {}) {
method def (line 105) | def(pattern, options = {}) {
method punctuation (line 108) | punctuation(pattern, options = {}) {
method attribute (line 111) | attribute(pattern, options = {}) {
method value (line 114) | value(kind, pattern, options) {
method eol (line 117) | eol(eatSpace = true) {
FILE: packages/graphql-language-service/src/parser/api.ts
type ParserCallbackFn (line 20) | type ParserCallbackFn = (
function runOnlineParser (line 34) | function runOnlineParser(
type GraphQLDocumentMode (line 73) | enum GraphQLDocumentMode {
constant TYPE_SYSTEM_KINDS (line 79) | const TYPE_SYSTEM_KINDS: Kind[] = [
method enter (line 105) | enter(node) {
function getDocumentMode (line 124) | function getDocumentMode(
function getTokenAtPosition (line 137) | function getTokenAtPosition(
function getContextAtPosition (line 173) | function getContextAtPosition(
FILE: packages/graphql-language-service/src/parser/getTypeInfo.ts
function getFieldDef (line 34) | function getFieldDef(
function forEachState (line 56) | function forEachState(
function getDefinitionState (line 73) | function getDefinitionState(
function getTypeInfo (line 96) | function getTypeInfo(
FILE: packages/graphql-language-service/src/parser/onlineParser.ts
type ParserOptions (line 36) | type ParserOptions = {
function onlineParser (line 43) | function onlineParser(
function getToken (line 76) | function getToken(
function assign (line 214) | function assign(to: object, from: object): object {
function pushRule (line 231) | function pushRule(
function popRule (line 249) | function popRule(state: State): undefined {
function advanceRule (line 264) | function advanceRule(state: State, successful: boolean): undefined {
function isList (line 313) | function isList(state: State): boolean | null | undefined {
function unsuccessful (line 322) | function unsuccessful(state: State): void {
function lex (line 342) | function lex(
FILE: packages/graphql-language-service/src/parser/types.ts
type ContextToken (line 5) | type ContextToken = {
type ContextTokenForCodeMirror (line 13) | type ContextTokenForCodeMirror = {
type ContextTokenUnion (line 21) | type ContextTokenUnion = ContextToken | ContextTokenForCodeMirror;
type RuleOrString (line 23) | type RuleOrString = Rule | string;
type ParseRule (line 25) | type ParseRule =
type Token (line 29) | type Token = {
type Rule (line 34) | type Rule = {
type State (line 43) | type State = {
type _AdditionalRuleKinds (line 90) | type _AdditionalRuleKinds = {
type _RuleKinds (line 127) | type _RuleKinds = Omit<typeof Kind, 'VARIABLE'> &
type RuleKind (line 130) | type RuleKind = _RuleKinds[keyof _RuleKinds];
type RuleKindEnum (line 131) | type RuleKindEnum = RuleKind;
type TokenPattern (line 132) | type TokenPattern = string | ((char: string) => boolean) | RegExp;
type CharacterStreamInterface (line 134) | interface CharacterStreamInterface {
FILE: packages/graphql-language-service/src/temp-bin.ts
function bright (line 4) | function bright(str: string) {
function yellow (line 8) | function yellow(str: string) {
FILE: packages/graphql-language-service/src/types.ts
type Maybe (line 34) | type Maybe<T> = T | null | undefined;
type GraphQLCache (line 50) | interface GraphQLCache {
type IPosition (line 96) | interface IPosition {
type IRange (line 104) | interface IRange {
type CachedContent (line 111) | type CachedContent = {
type Uri (line 117) | type Uri = string;
type GraphQLFileMetadata (line 119) | type GraphQLFileMetadata = {
type GraphQLFileInfo (line 125) | type GraphQLFileInfo = {
type AllTypeInfo (line 134) | type AllTypeInfo = {
type FragmentInfo (line 148) | type FragmentInfo = {
type NamedTypeInfo (line 154) | type NamedTypeInfo = {
type ObjectTypeInfo (line 160) | type ObjectTypeInfo = {
type Diagnostic (line 166) | type Diagnostic = DiagnosticType;
type CompletionItemBase (line 168) | type CompletionItemBase = {
type CompletionItem (line 173) | type CompletionItem = CompletionItemType & {
type Definition (line 185) | type Definition = {
type TokenKind (line 197) | type TokenKind =
type TextToken (line 207) | type TextToken = {
type TokenizedText (line 212) | type TokenizedText = TextToken[];
type OutlineTree (line 213) | type OutlineTree = {
type Outline (line 224) | type Outline = {
type FileEvent (line 228) | interface FileEvent {
type FileChangeTypeKind (line 239) | type FileChangeTypeKind = {
type FileChangeTypeKeys (line 245) | type FileChangeTypeKeys = keyof FileChangeTypeKind;
type FileChangeType (line 247) | type FileChangeType = FileChangeTypeKind[FileChangeTypeKeys];
type CompletionItemKind (line 282) | type CompletionItemKind =
FILE: packages/graphql-language-service/src/utils/Range.ts
class Range (line 13) | class Range implements IRange {
method constructor (line 16) | constructor(start: IPosition, end: IPosition) {
method setStart (line 21) | setStart(line: number, character: number) {
method setEnd (line 25) | setEnd(line: number, character: number) {
class Position (line 40) | class Position implements IPosition {
method constructor (line 43) | constructor(line: number, character: number) {
method setLine (line 48) | setLine(line: number) {
method setCharacter (line 52) | setCharacter(character: number) {
function offsetToPosition (line 61) | function offsetToPosition(text: string, loc: number): Position {
function locToRange (line 69) | function locToRange(text: string, loc: Location): Range {
FILE: packages/graphql-language-service/src/utils/__tests__/validateWithCustomRules.test.ts
method Argument (line 35) | Argument(node: ArgumentNode) {
FILE: packages/graphql-language-service/src/utils/collectVariables.ts
type VariableToType (line 11) | type VariableToType = {
function collectVariables (line 23) | function collectVariables(
FILE: packages/graphql-language-service/src/utils/fragmentDependencies.ts
method FragmentDefinition (line 43) | FragmentDefinition(node) {
method FragmentSpread (line 46) | FragmentSpread(node) {
method FragmentSpread (line 64) | FragmentSpread(node) {
FILE: packages/graphql-language-service/src/utils/getASTNodeAtPosition.ts
function getASTNodeAtPosition (line 13) | function getASTNodeAtPosition(
function pointToOffset (line 43) | function pointToOffset(text: string, point: TPosition): number {
FILE: packages/graphql-language-service/src/utils/getOperationFacts.ts
type OperationASTFacts (line 17) | type OperationASTFacts = {
function getOperationASTFacts (line 43) | function getOperationASTFacts(
type OperationFacts (line 63) | type OperationFacts = {
type QueryFacts (line 67) | type QueryFacts = OperationFacts;
function getOperationFacts (line 79) | function getOperationFacts(
FILE: packages/graphql-language-service/src/utils/getVariablesJSONSchema.ts
type JsonSchemaOptions (line 28) | type JsonSchemaOptions = {
type PropertiedJSON6 (line 35) | type PropertiedJSON6 = JSONSchema6 & {
type JSONSchemaOptions (line 41) | type JSONSchemaOptions = {
type JSONSchemaRunningOptions (line 51) | type JSONSchemaRunningOptions = JSONSchemaOptions & {
type MonacoEditorJSONSchema (line 59) | type MonacoEditorJSONSchema = JSONSchema6 & {
type CombinedSchema (line 63) | type CombinedSchema = JSONSchema6 | MonacoEditorJSONSchema;
type Definitions (line 65) | type Definitions = { [k: string]: JSONSchema6Definition };
type DefinitionResult (line 67) | type DefinitionResult = {
function text (line 73) | function text(into: string[], newText: string) {
function renderType (line 77) | function renderType(into: string[], t: GraphQLInputType | GraphQLInputFi...
function renderDefinitionDescription (line 91) | function renderDefinitionDescription(
function renderTypeToString (line 129) | function renderTypeToString(
class Marker (line 154) | class Marker {
method mark (line 157) | mark(name: string): boolean {
function getJSONSchemaFromGraphQLType (line 172) | function getJSONSchemaFromGraphQLType(
function getVariablesJSONSchema (line 349) | function getVariablesJSONSchema(
FILE: packages/graphql-language-service/src/utils/validateWithCustomRules.ts
function validateWithCustomRules (line 62) | function validateWithCustomRules(
FILE: packages/monaco-graphql/src/GraphQLWorker.ts
class GraphQLWorker (line 20) | class GraphQLWorker {
method constructor (line 25) | constructor(ctx: monaco.worker.IWorkerContext, createData: ICreateData) {
method doValidation (line 31) | public async doValidation(uri: string) {
method doComplete (line 50) | public async doComplete(
method doHover (line 74) | public async doHover(uri: string, position: monaco.Position) {
method doGetVariablesJSONSchema (line 102) | public async doGetVariablesJSONSchema(uri: string): Promise<unknown> {
method doFormat (line 124) | async doFormat(uri: string): Promise<string | null> {
method _getTextModel (line 144) | private _getTextModel(uri: string): monaco.worker.IMirrorModel | null {
method doUpdateSchema (line 154) | public doUpdateSchema(schema: SchemaConfig) {
method doUpdateSchemas (line 158) | public doUpdateSchemas(schemas: SchemaConfig[]) {
function create (line 167) | function create(
FILE: packages/monaco-graphql/src/LanguageService.ts
type SchemaCacheItem (line 34) | type SchemaCacheItem = Omit<SchemaConfig, 'schema'> & { schema: GraphQLS...
type SchemaCache (line 36) | type SchemaCache = Map<string, SchemaCacheItem>;
class LanguageService (line 42) | class LanguageService {
method constructor (line 53) | constructor({
method _cacheSchemas (line 91) | private _cacheSchemas() {
method _cacheSchema (line 97) | private _cacheSchema(schemaConfig: SchemaConfig) {
method getSchemaForFile (line 110) | public getSchemaForFile(uri: string): SchemaCacheItem | undefined {
method getExternalFragmentDefinitions (line 136) | public getExternalFragmentDefinitions(): FragmentDefinitionNode[] {
method updateSchemas (line 162) | public async updateSchemas(schemas: SchemaConfig[]): Promise<void> {
method updateSchema (line 170) | public updateSchema(schema: SchemaConfig): void {
method addSchema (line 187) | public addSchema(schema: SchemaConfig): void {
method parse (line 197) | public parse(text: string | Source, options?: ParseOptions): DocumentN...
FILE: packages/monaco-graphql/src/api.ts
type MonacoGraphQLAPIOptions (line 21) | interface MonacoGraphQLAPIOptions
type SchemaEntry (line 38) | type SchemaEntry = {
class MonacoGraphQLAPI (line 44) | class MonacoGraphQLAPI {
method constructor (line 55) | constructor({
method onDidChange (line 74) | public get onDidChange(): monaco.IEvent<MonacoGraphQLAPI> {
method languageId (line 78) | public get languageId(): string {
method modeConfiguration (line 82) | public get modeConfiguration(): ModeConfiguration {
method schemas (line 86) | public get schemas(): SchemaConfig[] | null {
method schemasById (line 90) | public schemasById(): Record<string, SchemaConfig> {
method formattingOptions (line 94) | public get formattingOptions(): FormattingOptions {
method diagnosticSettings (line 98) | public get diagnosticSettings(): DiagnosticSettings {
method completionSettings (line 102) | public get completionSettings(): CompletionSettings {
method externalFragmentDefinitions (line 111) | public get externalFragmentDefinitions() {
method setSchemaConfig (line 118) | public setSchemaConfig(schemas: SchemaConfig[]): void {
method setExternalFragmentDefinitions (line 127) | public setExternalFragmentDefinitions(
method setModeConfiguration (line 133) | public setModeConfiguration(modeConfiguration: ModeConfiguration): void {
method setFormattingOptions (line 138) | public setFormattingOptions(formattingOptions: FormattingOptions): void {
method setDiagnosticSettings (line 143) | public setDiagnosticSettings(diagnosticSettings: DiagnosticSettings): ...
method setCompletionSettings (line 148) | public setCompletionSettings(completionSettings: CompletionSettings): ...
function create (line 154) | function create(
FILE: packages/monaco-graphql/src/graphqlMode.ts
function setupMode (line 14) | function setupMode(defaults: MonacoGraphQLAPI): IDisposable {
function asDisposable (line 109) | function asDisposable(disposables: IDisposable[]): IDisposable {
function disposeAll (line 113) | function disposeAll(disposables: IDisposable[]) {
FILE: packages/monaco-graphql/src/initialize.ts
constant LANGUAGE_ID (line 13) | const LANGUAGE_ID = 'graphql';
function initializeMode (line 20) | function initializeMode(
function getMode (line 35) | function getMode(): Promise<typeof GraphQLMode> {
FILE: packages/monaco-graphql/src/languageFeatures.ts
type WorkerAccessor (line 16) | interface WorkerAccessor {
class DiagnosticsAdapter (line 22) | class DiagnosticsAdapter {
method constructor (line 27) | constructor(
method dispose (line 107) | public dispose(): void {
method _doValidate (line 114) | private async _doValidate(
function toCompletionItemKind (line 198) | function toCompletionItemKind(
function toCompletion (line 204) | function toCompletion(
class CompletionAdapter (line 225) | class CompletionAdapter implements languages.CompletionItemProvider {
method constructor (line 226) | constructor(private _worker: WorkerAccessor) {
method triggerCharacters (line 230) | public get triggerCharacters(): string[] {
method provideCompletionItems (line 237) | async provideCompletionItems(
class DocumentFormattingAdapter (line 261) | class DocumentFormattingAdapter
method constructor (line 264) | constructor(private _worker: WorkerAccessor) {
method provideDocumentFormattingEdits (line 268) | async provideDocumentFormattingEdits(
class HoverAdapter (line 288) | class HoverAdapter implements languages.HoverProvider {
method constructor (line 289) | constructor(private _worker: WorkerAccessor) {}
method provideHover (line 291) | async provideHover(
method dispose (line 312) | dispose() {}
FILE: packages/monaco-graphql/src/typings/index.ts
type SchemaConfig (line 26) | type SchemaConfig = {
type SchemaLoader (line 83) | type SchemaLoader = (
type GraphQLLanguageConfig (line 92) | type GraphQLLanguageConfig = {
type FormattingOptions (line 131) | type FormattingOptions = { prettierConfig?: PrettierConfig };
type ModeConfiguration (line 133) | interface ModeConfiguration {
type DiagnosticSettings (line 185) | type DiagnosticSettings = {
type CompletionSettings (line 208) | type CompletionSettings = AutocompleteSuggestionOptions & {
type MonacoGraphQLInitializeConfig (line 218) | interface MonacoGraphQLInitializeConfig
type ICreateData (line 244) | interface ICreateData {
FILE: packages/monaco-graphql/src/utils.ts
function toMonacoRange (line 30) | function toMonacoRange(range: GraphQLRange): monaco.IRange {
function toGraphQLPosition (line 39) | function toGraphQLPosition(position: monaco.Position): GraphQLPosition {
type GraphQLWorkerCompletionItem (line 43) | type GraphQLWorkerCompletionItem = Omit<
function toCompletion (line 52) | function toCompletion(
function toMonacoSeverity (line 84) | function toMonacoSeverity(
function toMarkerData (line 97) | function toMarkerData(
FILE: packages/monaco-graphql/src/workerManager.ts
constant STOP_WHEN_IDLE_FOR (line 13) | const STOP_WHEN_IDLE_FOR = 2 * 60 * 1000;
class WorkerManager (line 15) | class WorkerManager {
method constructor (line 23) | constructor(defaults: MonacoGraphQLAPI) {
method _stopWorker (line 35) | private _stopWorker(): void {
method dispose (line 43) | dispose(): void {
method _checkIfIdle (line 49) | private _checkIfIdle(): void {
method _getClient (line 59) | private async _getClient(): Promise<GraphQLWorker> {
method getLanguageServiceWorker (line 100) | async getLanguageServiceWorker(...resources: Uri[]): Promise<GraphQLWo...
FILE: packages/monaco-graphql/test/monaco-editor.test.ts
constant ANSI_COLOR_REGEX (line 4) | const ANSI_COLOR_REGEX = /\u001b\[\d+m/g;
FILE: packages/vscode-graphql-execution/src/extension.ts
function getConfig (line 16) | function getConfig() {
function activate (line 23) | function activate(context: ExtensionContext) {
function deactivate (line 113) | function deactivate() {
FILE: packages/vscode-graphql-execution/src/helpers/extensions.ts
type WithList (line 4) | type WithList<T> = T | T[];
type Endpoint (line 6) | interface Endpoint {
type Endpoints (line 17) | type Endpoints = Record<string, Endpoint>;
FILE: packages/vscode-graphql-execution/src/helpers/network.ts
class NetworkHelper (line 28) | class NetworkHelper {
method constructor (line 32) | constructor(outputChannel: OutputChannel, sourceHelper: SourceHelper) {
method buildClient (line 37) | private buildClient({
method executeOperation (line 107) | async executeOperation({
type ExecuteOperationOptions (line 178) | interface ExecuteOperationOptions {
function formatData (line 186) | function formatData({ data, errors }: any) {
FILE: packages/vscode-graphql-execution/src/helpers/source.ts
type FragmentInfo (line 17) | type FragmentInfo = {
class SourceHelper (line 23) | class SourceHelper {
method constructor (line 27) | constructor(outputChannel: OutputChannel) {
method getTypeForVariableDefinitionNode (line 32) | getTypeForVariableDefinitionNode(
method validate (line 57) | validate(value: string, type: GraphQLScalarType) {
method typeCast (line 96) | typeCast(value: string, type: GraphQLScalarType) {
method getFragmentDefinitions (line 127) | async getFragmentDefinitions(
method extractAllTemplateLiterals (line 160) | extractAllTemplateLiterals(
type GraphQLScalarType (line 227) | type GraphQLScalarType = 'String' | 'Float' | 'Int' | 'Boolean' | string;
type GraphQLScalarTSType (line 228) | type GraphQLScalarTSType = string | number | boolean;
type ExtractedTemplateLiteral (line 230) | interface ExtractedTemplateLiteral {
method FragmentDefinition (line 270) | FragmentDefinition(node) {
method FragmentSpread (line 273) | FragmentSpread(node) {
method FragmentSpread (line 291) | FragmentSpread(node) {
FILE: packages/vscode-graphql-execution/src/providers/exec-codelens.ts
class GraphQLCodeLensProvider (line 15) | class GraphQLCodeLensProvider implements CodeLensProvider {
method constructor (line 19) | constructor(outputChannel: OutputChannel) {
method provideCodeLenses (line 24) | public provideCodeLenses(
FILE: packages/vscode-graphql-execution/src/providers/exec-content.ts
type UserVariables (line 25) | type UserVariables = { [key: string]: GraphQLScalarTSType };
class GraphQLContentProvider (line 29) | class GraphQLContentProvider implements TextDocumentContentProvider {
method getCurrentHtml (line 46) | getCurrentHtml(): string {
method updatePanel (line 50) | updatePanel() {
method getVariablesFromUser (line 54) | async getVariablesFromUser(
method getEndpointName (line 78) | async getEndpointName(endpointNames: string[]) {
method constructor (line 95) | constructor(
method validUrlFromSchema (line 119) | validUrlFromSchema(pathOrUrl: string) {
method reportError (line 123) | reportError(message: string) {
method setContentAndUpdate (line 128) | setContentAndUpdate(html: string) {
method loadEndpoint (line 134) | async loadEndpoint(): Promise<Endpoint | null> {
method loadProvider (line 181) | async loadProvider() {
method loadConfig (line 247) | async loadConfig() {
method onDidChange (line 269) | get onDidChange(): Event<Uri> {
method update (line 273) | public update(uri: Uri) {
method provideTextDocumentContent (line 277) | provideTextDocumentContent(_: Uri): ProviderResult<string> {
FILE: packages/vscode-graphql-syntax/tests/__utilities__/serializer.ts
function formatTokens (line 3) | function formatTokens(tokens: Token[]): string {
FILE: packages/vscode-graphql-syntax/tests/__utilities__/utilities.ts
type Token (line 7) | type Token = {
function tokenizeFile (line 12) | async function tokenizeFile(
function getGrammar (line 42) | async function getGrammar(scopeName: string) {
function vscodeOnigurumaLib (line 91) | async function vscodeOnigurumaLib() {
function loadConfiguration (line 105) | function loadConfiguration() {
FILE: packages/vscode-graphql/src/apis/statusBar.ts
type Status (line 12) | enum Status {
function initStatusBar (line 72) | function initStatusBar(
function updateStatusBar (line 115) | function updateStatusBar(
FILE: packages/vscode-graphql/src/extension.ts
function activate (line 22) | async function activate(context: ExtensionContext) {
function deactivate (line 151) | function deactivate() {
function getConfig (line 160) | function getConfig() {
FILE: packages/vscode-graphql/src/serverIpc/index.ts
function start (line 9) | async function start() {
FILE: packages/vscode-graphql/src/serverStdio/index.ts
function start (line 9) | async function start() {
FILE: scripts/canary-release.js
function getNewVersion (line 14) | function getNewVersion(version, type) {
function getRelevantChangesets (line 50) | function getRelevantChangesets(baseBranch) {
function updateVersions (line 68) | async function updateVersions() {
FILE: scripts/set-resolution.js
function setResolution (line 4) | async function setResolution() {
Condensed preview — 735 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (3,465K chars).
[
{
"path": ".browserslistrc",
"chars": 58,
"preview": "last 2 versions\nFirefox ESR\nnot dead\nnot IE 11\nnot ios 10\n"
},
{
"path": ".changeset/README.md",
"chars": 512,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 627,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@2.0.1/schema.json\",\n \"changelog\": [\"@changesets/changelog-github\","
},
{
"path": ".codecov.yml",
"chars": 505,
"preview": "codecov:\n notify:\n require_ci_to_pass: yes\n\ncoverage:\n precision: 2\n round: down\n range: '30...100'\n\n status:\n "
},
{
"path": ".editorconfig",
"chars": 199,
"preview": "# EditorConfig is awesome: https://EditorConfig.org\n\n# top-most EditorConfig file\nroot = true\n\n# Unix-style newlines wit"
},
{
"path": ".eslintignore",
"chars": 341,
"preview": ".changeset/*.md\n\n# ignore working-group dir markdown so it's easier for people to edit from the UI\nworking-group/\npackag"
},
{
"path": ".eslintrc.js",
"chars": 21455,
"preview": "/**\n * Copyright (c) Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the license foun"
},
{
"path": ".gitattributes",
"chars": 326,
"preview": "# Set the default behavior, in case people don't have core.autocrlf set.\n* text=auto\n\n*.js text eol=lf\n*.jsx text eol=lf"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 1189,
"preview": "blank_issues_enabled: true\ncontact_links:\n - name: '📚 Support/Q&A'\n url: https://github.com/graphql/graphiql/discuss"
},
{
"path": ".github/ISSUE_TEMPLATE/graphiql-bug.yml",
"chars": 1949,
"preview": "name: GraphiQL 🐞 Bug\ndescription: File a bug with the graphiql web editor\ntitle: '[graphiql] <title>'\nlabels: [bug, need"
},
{
"path": ".github/ISSUE_TEMPLATE/graphiql-feature.md",
"chars": 1925,
"preview": "---\nname: GraphiQL Feature Request\nabout: Request a feature for the graphiql web editor\ntitle: '[graphiql] <title>'\nlabe"
},
{
"path": ".github/ISSUE_TEMPLATE/language-server-bug.yml",
"chars": 1984,
"preview": "name: Generic IDE (LSP Server) Bug 🐞\ndescription: File any non syntax highlighting related bugs in vscode or any IDE lsp"
},
{
"path": ".github/ISSUE_TEMPLATE/language-server-feature.md",
"chars": 840,
"preview": "---\nname: LSP/CLI Feature Request\nabout: Request a feature for the `graphql-language-service-server` and/or cli\ntitle: '"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 182,
"preview": "<!--\n1. Have you tried searching issues and discussions to see if your question was already answered?\n\n2. If you want to"
},
{
"path": ".github/workflows/main-test.yml",
"chars": 1408,
"preview": "name: Main Tests\n# report coverage on main for codecov baseline\non:\n push:\n branches: [main]\njobs:\n install:\n na"
},
{
"path": ".github/workflows/pr-graphql-compat-check.yml",
"chars": 1432,
"preview": "name: Build & Test PR w/ GraphQL Regressions\non:\n push:\n # only on merge to main.\n # it's rare that this workflow"
},
{
"path": ".github/workflows/pr.yml",
"chars": 8053,
"preview": "name: PR\non:\n pull_request:\n types: [opened, synchronize]\n\njobs:\n install:\n name: Install\n runs-on: ubuntu-la"
},
{
"path": ".github/workflows/release.yml",
"chars": 1715,
"preview": "name: Release\n\non:\n push:\n branches: [main, graphiql-5]\npermissions: {}\njobs:\n release:\n permissions:\n cont"
},
{
"path": ".gitignore",
"chars": 856,
"preview": "*.swp\n*~\n.*.haste_cache.*\n.DS_Store\n.secrets\n*.log\n\n.yarn/*\n!.yarn/releases/*\n!.yarn/plugins/*\n\nnode_modules/\ncoverage/\n"
},
{
"path": ".mailmap",
"chars": 280,
"preview": "Angel Gomez Salazar <agomezs@fb.com>\nAngel Gomez Salazar <agomezs@fb.com> Angel Gomez <AGS-@users.noreply.github.com>\nAn"
},
{
"path": ".npmignore",
"chars": 207,
"preview": ".*\n*.swp\n*~\n*.iml\n.*.haste_cache.*\n.DS_Store\n.idea\nnpm-debug.log\n\n.babelrc\nCONTRIBUTING.md\nnode_modules\ncoverage\nresourc"
},
{
"path": ".npmrc",
"chars": 33,
"preview": "engine-strict=true\naccess=public\n"
},
{
"path": ".nvmrc",
"chars": 3,
"preview": "20\n"
},
{
"path": ".prettierignore",
"chars": 165,
"preview": "# removing this will break tests b/c of whitespace changes + format on save/commit, etc\npackages/graphql-language-servic"
},
{
"path": ".prettierrc",
"chars": 344,
"preview": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\",\n \"arrowParens\": \"avoid\",\n \"proseWrap\": \"never\",\n \"overrides\": [\n "
},
{
"path": ".vscode/extensions.json",
"chars": 78,
"preview": "{\n \"recommendations\": [\"dbaeumer.vscode-eslint\", \"esbenp.prettier-vscode\"]\n}\n"
},
{
"path": ".vscode/launch.json",
"chars": 1640,
"preview": "// A launch configuration that compiles the extension and then opens it inside a new window\n// Use IntelliSense to learn"
},
{
"path": ".vscode/settings.json",
"chars": 433,
"preview": "{\n \"npm.packageManager\": \"yarn\",\n \"editor.formatOnSave\": true,\n \"files.insertFinalNewline\": true,\n \"editor.trimAutoW"
},
{
"path": ".vscode/tasks.json",
"chars": 654,
"preview": "{\n \"version\": \"2.0.0\",\n \"tasks\": [\n {\n \"label\": \"watch-vscode\",\n \"type\": \"npm\",\n \"script\": \"watch-vs"
},
{
"path": ".yarnrc.yml",
"chars": 113,
"preview": "compressionLevel: 0\n\nenableGlobalCache: false\n\nnodeLinker: node-modules\n\nyarnPath: .yarn/releases/yarn-4.9.1.cjs\n"
},
{
"path": "CHANGELOG.md",
"chars": 5472,
"preview": "> **Archived** For up to date changelogs that are automatically generated by [changesets](https://github.com/atlassian/c"
},
{
"path": "CONTRIBUTING.md",
"chars": 1841,
"preview": "# Contributing\n\nWe welcome contributions and assistance! If you want to know where to start,\ncheck out our\n[Github Proje"
},
{
"path": "DEVELOPMENT.md",
"chars": 3355,
"preview": "# Getting Started\n\nPlease note that we require a signed GraphQL Specification Membership agreement\nbefore landing a cont"
},
{
"path": "LICENSE",
"chars": 1072,
"preview": "MIT License\n\nCopyright (c) GraphQL Contributors\n\nPermission is hereby granted, free of charge, to any person obtaining a"
},
{
"path": "README.md",
"chars": 12723,
"preview": "<!-- @format -->\n\n# GraphQL IDE Monorepo\n\n> **Security Notice:** All versions of `graphiql` < `1.4.7` are vulnerable to "
},
{
"path": "RELEASING.md",
"chars": 103,
"preview": "# Cutting New Releases\n\nTODO: Redo for `changesets`. See [`Changesets Readme`](./.changeset/README.md)\n"
},
{
"path": "SECURITY.md",
"chars": 224,
"preview": "# GraphiQL Ecosystem Security Advisories\n\nSecurity Advisories for packages in this repository will be listed here\n\n## Gr"
},
{
"path": "babel.config.js",
"chars": 1183,
"preview": "// for ESM don't transpile modules\n\nconst envConfig = {\n modules: 'commonjs',\n};\n\nif (process.env.ESM) {\n envConfig.mo"
},
{
"path": "cspell.json",
"chars": 667,
"preview": "{\n \"$schema\": \"https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json\",\n \"language\": \"en\""
},
{
"path": "docs/migration/graphiql-2.0.0.md",
"chars": 13351,
"preview": "# Upgrading `graphiql` from `1.x` to `2.0.0`\n\nHello GraphiQL user and thanks for upgrading!\n\nThis migration guide walks "
},
{
"path": "docs/migration/graphiql-4.0.0.md",
"chars": 3920,
"preview": "# Upgrading `graphiql` from `3.x` to `4.0.0`\n\n---\n\n## `graphiql`\n\n- Dropped support for **React 16/17**, added support f"
},
{
"path": "docs/migration/graphiql-5.0.0.md",
"chars": 7302,
"preview": "# Upgrading `graphiql` from `4.x` to `5.0.0`\n\nStarting from GraphiQL 5, you need to set up Monaco workers in your projec"
},
{
"path": "docs/security/2021-introspection-schema-xss.md",
"chars": 12009,
"preview": "- [1. GraphiQL introspection schema template injection attack: Advisory Statement](#1-graphiql-introspection-schema-temp"
},
{
"path": "examples/cm6-graphql-legacy-parcel/.gitignore",
"chars": 8,
"preview": ".cache/\n"
},
{
"path": "examples/cm6-graphql-legacy-parcel/README.md",
"chars": 282,
"preview": "## Codemirror 6 Parcel Example\n\nThis example demonstrates how to transpile your own custom ES6 Codemirror 6\nGraphQL impl"
},
{
"path": "examples/cm6-graphql-legacy-parcel/package.json",
"chars": 816,
"preview": "{\n \"name\": \"example-cm6-graphql-legacy-parcel\",\n \"version\": \"0.0.0\",\n \"license\": \"MIT\",\n \"description\": \"GraphiQL Pa"
},
{
"path": "examples/cm6-graphql-legacy-parcel/src/index.html",
"chars": 516,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <style>\n body {\n padding: 0;\n margin: 0;\n min-he"
},
{
"path": "examples/cm6-graphql-legacy-parcel/src/index.ts",
"chars": 493,
"preview": "import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup';\nimport { StreamLanguage } from '@codemirr"
},
{
"path": "examples/cm6-graphql-legacy-parcel/src/sample-query.ts",
"chars": 1142,
"preview": "const query = /* GraphQL */ `\n # Copyright (c) 2021 GraphQL Contributors\n # All rights reserved.\n #\n # This source c"
},
{
"path": "examples/cm6-graphql-legacy-parcel/tsconfig.json",
"chars": 482,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
},
{
"path": "examples/cm6-graphql-parcel/.gitignore",
"chars": 23,
"preview": ".cache/\n.parcel-cache/\n"
},
{
"path": "examples/cm6-graphql-parcel/README.md",
"chars": 282,
"preview": "## Codemirror 6 Parcel Example\n\nThis example demonstrates how to transpile your own custom ES6 Codemirror 6\nGraphQL impl"
},
{
"path": "examples/cm6-graphql-parcel/package.json",
"chars": 1269,
"preview": "{\n \"name\": \"example-cm6-graphql-parcel\",\n \"version\": \"0.0.0\",\n \"license\": \"MIT\",\n \"description\": \"GraphiQL Parcel Ex"
},
{
"path": "examples/cm6-graphql-parcel/src/index.html",
"chars": 540,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <style>\n body {\n padding: 0;\n margin: 0;\n min-he"
},
{
"path": "examples/cm6-graphql-parcel/src/index.ts",
"chars": 1212,
"preview": "import { EditorState } from '@codemirror/state';\nimport { EditorView, lineNumbers } from '@codemirror/view';\nimport { hi"
},
{
"path": "examples/cm6-graphql-parcel/src/sample-query.ts",
"chars": 1142,
"preview": "const query = /* GraphQL */ `\n # Copyright (c) 2021 GraphQL Contributors\n # All rights reserved.\n #\n # This source c"
},
{
"path": "examples/cm6-graphql-parcel/src/testSchema.ts",
"chars": 5793,
"preview": "/* istanbul ignore file */\n/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source c"
},
{
"path": "examples/cm6-graphql-parcel/tsconfig.json",
"chars": 482,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
},
{
"path": "examples/graphiql-cdn/CHANGELOG.md",
"chars": 2079,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file. See [Conventional Commits](https://co"
},
{
"path": "examples/graphiql-cdn/README.md",
"chars": 533,
"preview": "# GraphiQL CDN Example\n\nThis is a simple example of using **GraphiQL** directly from a CDN, including the [GraphiQL Expl"
},
{
"path": "examples/graphiql-cdn/index.html",
"chars": 3175,
"preview": "<!--\n * Copyright (c) 2025 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the "
},
{
"path": "examples/graphiql-cdn/package.json",
"chars": 229,
"preview": "{\n \"name\": \"example-graphiql-cdn\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"license\": \"MIT\",\n \"description\": \"An ex"
},
{
"path": "examples/graphiql-create-react-app/README.md",
"chars": 362,
"preview": "# GraphiQL `create-react-app` Example\n\n> [!WARNING]\n>\n> This example has been removed. You can find its last version [he"
},
{
"path": "examples/graphiql-nextjs/README.md",
"chars": 467,
"preview": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-re"
},
{
"path": "examples/graphiql-nextjs/next-env.d.ts",
"chars": 211,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": "examples/graphiql-nextjs/next.config.ts",
"chars": 133,
"preview": "import type { NextConfig } from 'next';\n\nconst nextConfig: NextConfig = {\n /* config options here */\n};\n\nexport default"
},
{
"path": "examples/graphiql-nextjs/package.json",
"chars": 497,
"preview": "{\n \"name\": \"example-graphiql-nextjs\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"types:check\": \"tsc -"
},
{
"path": "examples/graphiql-nextjs/src/app/globals.css",
"chars": 76,
"preview": "body {\n margin: 0;\n}\n\n.graphiql-container {\n height: 100dvh !important;\n}\n"
},
{
"path": "examples/graphiql-nextjs/src/app/graphiql.tsx",
"chars": 574,
"preview": "'use client';\n\nimport type { FC } from 'react';\nimport { GraphiQL } from 'graphiql';\nimport 'graphiql/setup-workers/webp"
},
{
"path": "examples/graphiql-nextjs/src/app/layout.tsx",
"chars": 480,
"preview": "import type { FC, ReactNode } from 'react';\nimport type { Metadata } from 'next';\nimport './globals.css';\n\nexport const "
},
{
"path": "examples/graphiql-nextjs/src/app/page.ts",
"chars": 170,
"preview": "import type { Metadata } from 'next';\n\nexport { GraphiQLPage as default } from './graphiql';\n\nexport const metadata: Met"
},
{
"path": "examples/graphiql-nextjs/tsconfig.json",
"chars": 552,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ES2017\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n "
},
{
"path": "examples/graphiql-parcel/README.md",
"chars": 340,
"preview": "# GraphiQL Parcel Example\n\n> [!WARNING]\n>\n> This example has been removed. You can find its last version [here](https://"
},
{
"path": "examples/graphiql-vite/README.md",
"chars": 227,
"preview": "# GraphiQL Vite Example\n\nThis example demonstrates how to use GraphiQL with Vite.\n\n## Setup\n\n1. `yarn dev` to start Vite"
},
{
"path": "examples/graphiql-vite/index.html",
"chars": 771,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "examples/graphiql-vite/package.json",
"chars": 432,
"preview": "{\n \"name\": \"example-graphiql-vite\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"graphiql\": \"^5.2."
},
{
"path": "examples/graphiql-vite/src/App.jsx",
"chars": 457,
"preview": "import { GraphiQL } from 'graphiql';\nimport 'graphiql/style.css';\n\nasync function fetcher(graphQLParams) {\n const respo"
},
{
"path": "examples/graphiql-vite/src/index.jsx",
"chars": 157,
"preview": "import { createRoot } from 'react-dom/client';\nimport App from './App';\n\nconst root = createRoot(document.getElementById"
},
{
"path": "examples/graphiql-vite/vite.config.mjs",
"chars": 513,
"preview": "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport $monacoEditorPlugin from 'vite-plu"
},
{
"path": "examples/graphiql-vite-react-router/README.md",
"chars": 1245,
"preview": "# Usage GraphiQL with Vite, React Router and `ssr: true`\n\nWhen using GraphiQL with [React Router’s SSR mode](https://rea"
},
{
"path": "examples/graphiql-vite-react-router/app/root.tsx",
"chars": 558,
"preview": "import type { FC } from 'react';\nimport { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';\n\nconst "
},
{
"path": "examples/graphiql-vite-react-router/app/routes/_index/create-fetcher.ts",
"chars": 418,
"preview": "import type { GraphiQLProps } from 'graphiql';\n\nexport function createFetcher(apiUrl: string): GraphiQLProps['fetcher'] "
},
{
"path": "examples/graphiql-vite-react-router/app/routes/_index/globals.css",
"chars": 65,
"preview": "body {\n margin: 0;\n}\n\n.graphiql-container {\n height: 100dvh;\n}\n"
},
{
"path": "examples/graphiql-vite-react-router/app/routes/_index/graphiql.client.tsx",
"chars": 1634,
"preview": "import type { FC } from 'react';\nimport { GraphiQL } from 'graphiql';\nimport { ToolbarButton, useGraphiQL } from '@graph"
},
{
"path": "examples/graphiql-vite-react-router/app/routes/_index/route.ts",
"chars": 535,
"preview": "import type { FC } from 'react';\nimport type { LinksFunction, MetaFunction } from 'react-router';\nimport { graphiql } fr"
},
{
"path": "examples/graphiql-vite-react-router/app/routes.ts",
"chars": 84,
"preview": "import { flatRoutes } from '@react-router/fs-routes';\n\nexport default flatRoutes();\n"
},
{
"path": "examples/graphiql-vite-react-router/package.json",
"chars": 770,
"preview": "{\n \"name\": \"example-graphiql-vite-react-router\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"license\": \"MIT\",\n \"sideEf"
},
{
"path": "examples/graphiql-vite-react-router/public/robots.txt",
"chars": 69,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow: /\n"
},
{
"path": "examples/graphiql-vite-react-router/react-router.config.ts",
"chars": 148,
"preview": "import type { Config } from '@react-router/dev/config';\n\nconst config: Config = {\n ssr: true,\n buildDirectory: 'dist',"
},
{
"path": "examples/graphiql-vite-react-router/tsconfig.json",
"chars": 1078,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"jsx\": \"react-jsx\",\n "
},
{
"path": "examples/graphiql-vite-react-router/vite.config.ts",
"chars": 155,
"preview": "import { reactRouter } from '@react-router/dev/vite';\n\nimport { defineConfig } from 'vite';\n\nexport default defineConfig"
},
{
"path": "examples/graphiql-webpack/CHANGELOG.md",
"chars": 7616,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file. See [Conventional Commits](https://co"
},
{
"path": "examples/graphiql-webpack/README.md",
"chars": 578,
"preview": "## GraphiQL Webpack Example\n\nThis example demonstrates how to transpile your own custom ES6 GraphiQL\nimplementation with"
},
{
"path": "examples/graphiql-webpack/babel.config.js",
"chars": 58,
"preview": "module.exports = require('../../resources/babel.config');\n"
},
{
"path": "examples/graphiql-webpack/index.html.ejs",
"chars": 439,
"preview": "<!doctype html>\n<html lang=\"en\" dir=\"ltr\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta\n name=\"viewport\"\n c"
},
{
"path": "examples/graphiql-webpack/package.json",
"chars": 1403,
"preview": "{\n \"name\": \"example-graphiql-webpack\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"license\": \"MIT\",\n \"description\": \"A"
},
{
"path": "examples/graphiql-webpack/src/index.css",
"chars": 2357,
"preview": "@import 'graphiql/style.css';\n@import '@graphiql/plugin-explorer/style.css';\n@import '@graphiql/plugin-code-exporter/sty"
},
{
"path": "examples/graphiql-webpack/src/index.jsx",
"chars": 3160,
"preview": "import 'regenerator-runtime/runtime.js';\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { createRoo"
},
{
"path": "examples/graphiql-webpack/src/select-server-plugin.css",
"chars": 2252,
"preview": ".plugin-title {\n font-size: var(--font-size-h2);\n font-weight: var(--font-weight-medium);\n display: flex;\n justify-c"
},
{
"path": "examples/graphiql-webpack/src/select-server-plugin.jsx",
"chars": 7028,
"preview": "import * as React from 'react';\nimport { useGraphiQL } from '@graphiql/react';\n\nexport const LAST_URL_KEY = 'lastURL';\n\n"
},
{
"path": "examples/graphiql-webpack/src/snippets.js",
"chars": 1400,
"preview": "const removeQueryName = query =>\n query.replace(\n /^[^{(]+([{(])/,\n (_match, openingCurlyBracketsOrParenthesis) ="
},
{
"path": "examples/graphiql-webpack/webpack.config.js",
"chars": 3099,
"preview": "const { GenerateSW } = require('workbox-webpack-plugin');\nconst { WebpackManifestPlugin } = require('webpack-manifest-pl"
},
{
"path": "examples/monaco-graphql-nextjs/README.md",
"chars": 951,
"preview": "# Monaco GraphQL Next.js Example\n\n## Getting Started\n\nThis is a working example of `monaco-editor` and `monaco-graphql` "
},
{
"path": "examples/monaco-graphql-nextjs/next-env.d.ts",
"chars": 211,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": "examples/monaco-graphql-nextjs/next.config.ts",
"chars": 104,
"preview": "import type { NextConfig } from 'next';\n\nconst nextConfig: NextConfig = {};\n\nexport default nextConfig;\n"
},
{
"path": "examples/monaco-graphql-nextjs/package.json",
"chars": 605,
"preview": "{\n \"name\": \"example-monaco-graphql-nextjs\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {"
},
{
"path": "examples/monaco-graphql-nextjs/src/app/env.d.ts",
"chars": 141,
"preview": "declare namespace globalThis {\n import type { Environment } from 'monaco-editor/esm/monaco-editor';\n var MonacoEnviron"
},
{
"path": "examples/monaco-graphql-nextjs/src/app/globals.css",
"chars": 144,
"preview": "body {\n margin: 0;\n height: 100vh;\n}\n\n#root {\n display: flex;\n height: inherit;\n}\n\n.pane {\n width: 50%;\n}\n\n.left-ed"
},
{
"path": "examples/monaco-graphql-nextjs/src/app/layout.tsx",
"chars": 370,
"preview": "import type { FC, ReactNode } from 'react';\nimport type { Metadata } from 'next';\nimport './globals.css';\n\nexport const "
},
{
"path": "examples/monaco-graphql-nextjs/src/app/page.tsx",
"chars": 1203,
"preview": "'use client';\n\nimport type { FC } from 'react';\nimport dynamic from 'next/dynamic';\n\n// dynamically import our GraphiQL "
},
{
"path": "examples/monaco-graphql-nextjs/src/constants.ts",
"chars": 2641,
"preview": "import { editor, Uri, languages } from 'monaco-graphql/esm/monaco-editor';\nimport { initializeMode } from 'monaco-graphq"
},
{
"path": "examples/monaco-graphql-nextjs/src/editor.tsx",
"chars": 5690,
"preview": "import { ReactElement, useEffect, useRef, useState } from 'react';\nimport { getIntrospectionQuery, IntrospectionQuery } "
},
{
"path": "examples/monaco-graphql-nextjs/tsconfig.json",
"chars": 662,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
},
{
"path": "examples/monaco-graphql-react-vite/README.md",
"chars": 488,
"preview": "# Monaco-GraphQL React Vite Example\n\n## Getting Started\n\nThis is an extremely naive & minimalist implementation of `mona"
},
{
"path": "examples/monaco-graphql-react-vite/index.html",
"chars": 615,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "examples/monaco-graphql-react-vite/package.json",
"chars": 547,
"preview": "{\n \"name\": \"example-monaco-graphql-react-vite\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"dependencies\": {\n \"@grap"
},
{
"path": "examples/monaco-graphql-react-vite/src/env.d.ts",
"chars": 141,
"preview": "declare namespace globalThis {\n import type { Environment } from 'monaco-editor/esm/monaco-editor';\n var MonacoEnviron"
},
{
"path": "examples/monaco-graphql-react-vite/src/index.tsx",
"chars": 1236,
"preview": "/* eslint-disable import-x/default */\nimport { createRoot } from 'react-dom/client';\nimport JsonWorker from 'monaco-edit"
},
{
"path": "examples/monaco-graphql-react-vite/tsconfig.json",
"chars": 506,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"DOM\", \"DOM.Iterable\","
},
{
"path": "examples/monaco-graphql-react-vite/vite.config.ts",
"chars": 947,
"preview": "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n build: {"
},
{
"path": "examples/monaco-graphql-webpack/CHANGELOG.md",
"chars": 5008,
"preview": "# Change Log\n\n## 1.1.1\n\n### Patch Changes\n\n- Updated dependencies [[`e68cb8bc`](https://github.com/graphql/graphiql/comm"
},
{
"path": "examples/monaco-graphql-webpack/README.md",
"chars": 518,
"preview": "A simple example of `monaco-graphql` using webpack 4\n\n[live demo](https://monaco-graphql.netlify.com) of the monaco webp"
},
{
"path": "examples/monaco-graphql-webpack/babel.config.js",
"chars": 399,
"preview": "module.exports = {\n presets: [\n require.resolve('@babel/preset-env'),\n require.resolve('@babel/preset-typescript'"
},
{
"path": "examples/monaco-graphql-webpack/package.json",
"chars": 1497,
"preview": "{\n \"name\": \"example-monaco-graphql-webpack\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"license\": \"MIT\",\n \"descriptio"
},
{
"path": "examples/monaco-graphql-webpack/src/editors.ts",
"chars": 2425,
"preview": "import { editor, Uri } from 'monaco-graphql/esm/monaco-editor';\n\nconst GRAPHQL_LANGUAGE_ID = 'graphql';\n\nconst operation"
},
{
"path": "examples/monaco-graphql-webpack/src/index.html.ejs",
"chars": 919,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta\n name=\"viewport\"\n c"
},
{
"path": "examples/monaco-graphql-webpack/src/index.ts",
"chars": 9227,
"preview": "/* global netlify */\n\nimport { editor, KeyMod, KeyCode } from 'monaco-graphql/esm/monaco-editor';\nimport * as JSONC from"
},
{
"path": "examples/monaco-graphql-webpack/src/schema.ts",
"chars": 3741,
"preview": "import {\n buildClientSchema,\n getIntrospectionQuery,\n printSchema,\n parse,\n buildASTSchema,\n} from 'graphql';\nimpor"
},
{
"path": "examples/monaco-graphql-webpack/src/style.css",
"chars": 1634,
"preview": "body {\n background-color: #1e1e1e;\n margin: 0;\n padding: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-"
},
{
"path": "examples/monaco-graphql-webpack/tsconfig.json",
"chars": 534,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"esnext\",\n \"module\": \"esnext\",\n \"rootDir\": \"./src\",\n \"outDir\": \"./dist\","
},
{
"path": "examples/monaco-graphql-webpack/webpack.config.js",
"chars": 2410,
"preview": "const path = require('node:path');\n\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { BundleAnalyzerPlug"
},
{
"path": "functions/graphql.ts",
"chars": 1953,
"preview": "import {\n createHandler as createRawHandler,\n HandlerOptions as RawHandlerOptions,\n OperationContext,\n} from 'graphql"
},
{
"path": "functions/package.json",
"chars": 134,
"preview": "{\n \"name\": \"netlify-function\",\n \"private\": true,\n \"dependencies\": {\n \"graphql\": \"^16.11.0\",\n \"graphql-http\": \"^"
},
{
"path": "jest.config.base.js",
"chars": 1239,
"preview": "module.exports = dir => {\n const package = require(`${dir}/package.json`);\n return {\n globals: {\n 'ts-jest': {"
},
{
"path": "jest.config.js",
"chars": 75,
"preview": "module.exports = {\n projects: ['<rootDir>/packages/*/jest.config.js'],\n};\n"
},
{
"path": "js-green-licenses.json",
"chars": 122,
"preview": "{\n \"packageAllowlist\": [\n // MIT, just lacking SPDX in manifest\n \"valid-url\",\n \"argparse\"\n ],\n \"dev\": false\n"
},
{
"path": "netlify.toml",
"chars": 351,
"preview": "# Settings in the [build] context are global and are applied to\n# all contexts unless otherwise overridden by more speci"
},
{
"path": "package.json",
"chars": 5961,
"preview": "{\n \"name\": \"graphiql-monorepo\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"license\": \"MIT\",\n \"workspaces\": {\n \"pac"
},
{
"path": "packages/cm6-graphql/.gitignore",
"chars": 81,
"preview": "/node_modules\npackage-lock.json\n/dist\n/src/*.js\n/src/*.d.ts\n!syntax.grammar.d.ts\n"
},
{
"path": "packages/cm6-graphql/.npmignore",
"chars": 56,
"preview": "/src\n/test\n/node_modules\nrollup.config.js\ntsconfig.json\n"
},
{
"path": "packages/cm6-graphql/CHANGELOG.md",
"chars": 9475,
"preview": "# cm6-graphql\n\n## 0.2.1\n\n### Patch Changes\n\n- [#3920](https://github.com/graphql/graphiql/pull/3920) [`c6fddac`](https:/"
},
{
"path": "packages/cm6-graphql/LICENSE",
"chars": 1080,
"preview": "MIT License\n\nCopyright (C) 2021 by GraphQL Contributors\n\nPermission is hereby granted, free of charge, to any person obt"
},
{
"path": "packages/cm6-graphql/README.md",
"chars": 1666,
"preview": "# CodeMirror 6 GraphQL Language extension\n\n[](http"
},
{
"path": "packages/cm6-graphql/__tests__/cases.txt",
"chars": 3593,
"preview": "# Simple query\n\n{ hello }\n\n==>\n\nDocument(OperationDefinition(SelectionSet(\"{\",Selection(Field(FieldName)),\"}\")))\n\n# Name"
},
{
"path": "packages/cm6-graphql/__tests__/test.spec.ts",
"chars": 969,
"preview": "import { describe, it } from 'vitest';\nimport { graphqlLanguage } from '../dist/index.js';\nimport { fileTests } from '@l"
},
{
"path": "packages/cm6-graphql/__tests__/types.txt",
"chars": 1500,
"preview": "# String\n\n{ test(v1: \"abc\") }\n\n==>\n\nDocument(OperationDefinition(SelectionSet(\"{\",Selection(Field(FieldName,Arguments(\"("
},
{
"path": "packages/cm6-graphql/package.json",
"chars": 1274,
"preview": "{\n \"name\": \"cm6-graphql\",\n \"version\": \"0.2.1\",\n \"description\": \"GraphQL language support for CodeMirror 6\",\n \"script"
},
{
"path": "packages/cm6-graphql/src/commands.ts",
"chars": 1309,
"preview": "import { EditorView } from '@codemirror/view';\nimport { getTokenAtPosition, getTypeInfo } from 'graphql-language-service"
},
{
"path": "packages/cm6-graphql/src/completions.ts",
"chars": 1798,
"preview": "import { Completion, CompletionContext } from '@codemirror/autocomplete';\nimport { getAutocompleteSuggestions } from 'gr"
},
{
"path": "packages/cm6-graphql/src/graphql.ts",
"chars": 562,
"preview": "import { Extension } from '@codemirror/state';\nimport { GraphQLSchema } from 'graphql';\nimport { completion } from './co"
},
{
"path": "packages/cm6-graphql/src/helpers.ts",
"chars": 1086,
"preview": "import { Text } from '@codemirror/state';\n\nexport function posToOffset(doc: Text, pos: IPosition) {\n return doc.line(po"
},
{
"path": "packages/cm6-graphql/src/index.ts",
"chars": 214,
"preview": "export * from './commands';\nexport * from './completions';\nexport * from './graphql';\nexport * from './helpers';\nexport "
},
{
"path": "packages/cm6-graphql/src/interfaces.ts",
"chars": 836,
"preview": "import { Completion, CompletionContext } from '@codemirror/autocomplete';\nimport { EditorView } from '@codemirror/view';"
},
{
"path": "packages/cm6-graphql/src/jump.ts",
"chars": 957,
"preview": "import { EditorView } from '@codemirror/view';\nimport { getTokenAtPosition, getTypeInfo } from 'graphql-language-service"
},
{
"path": "packages/cm6-graphql/src/language.ts",
"chars": 1738,
"preview": "import { parser } from './syntax.grammar';\nimport {\n LRLanguage,\n LanguageSupport,\n indentNodeProp,\n foldNodeProp,\n "
},
{
"path": "packages/cm6-graphql/src/lint.ts",
"chars": 2376,
"preview": "import { Diagnostic, linter } from '@codemirror/lint';\nimport { getDiagnostics } from 'graphql-language-service';\nimport"
},
{
"path": "packages/cm6-graphql/src/state.ts",
"chars": 1641,
"preview": "import { EditorState, StateField, StateEffect } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';"
},
{
"path": "packages/cm6-graphql/src/syntax.grammar",
"chars": 11820,
"preview": "\n// https://spec.graphql.org/October2021/#sec-Document-Syntax\n\n// https://github.com/antlr/grammars-v4/blob/49469cb6906f"
},
{
"path": "packages/cm6-graphql/src/syntax.grammar.d.ts",
"chars": 78,
"preview": "import { LRParser } from '@lezer/lr';\n\nexport declare const parser: LRParser;\n"
},
{
"path": "packages/cm6-graphql/tsconfig.esm.json",
"chars": 254,
"preview": "{\n \"extends\": \"../../resources/tsconfig.base.esm.json\",\n \"compilerOptions\": {\n \"strict\": true,\n \"newLine\": \"lf\","
},
{
"path": "packages/cm6-graphql/tsconfig.json",
"chars": 414,
"preview": "{\n \"extends\": \"../../resources/tsconfig.base.cjs.json\",\n \"compilerOptions\": {\n \"strict\": true,\n \"target\": \"es6\","
},
{
"path": "packages/codemirror-graphql/.npmignore",
"chars": 41,
"preview": "babel.config.js\n.gitignore\nresources\nsrc\n"
},
{
"path": "packages/codemirror-graphql/CHANGELOG.md",
"chars": 30700,
"preview": "# Change Log\n\n## 2.2.4\n\n### Patch Changes\n\n- Updated dependencies [[`3a0a755`](https://github.com/graphql/graphiql/commi"
},
{
"path": "packages/codemirror-graphql/LICENSE",
"chars": 1077,
"preview": "MIT License\n\nCopyright (c) 2021 GraphQL Contributors\n\nPermission is hereby granted, free of charge, to any person obtain"
},
{
"path": "packages/codemirror-graphql/README.md",
"chars": 3272,
"preview": "# GraphQL mode for CodeMirror\n\n[](https://n"
},
{
"path": "packages/codemirror-graphql/babel.config.js",
"chars": 48,
"preview": "module.exports = require('../../babel.config');\n"
},
{
"path": "packages/codemirror-graphql/package.json",
"chars": 1609,
"preview": "{\n \"name\": \"codemirror-graphql\",\n \"version\": \"2.2.4\",\n \"description\": \"GraphQL mode and helpers for CodeMirror.\",\n \""
},
{
"path": "packages/codemirror-graphql/resources/checkgit.sh",
"chars": 996,
"preview": "#\n# This script determines if current git state is the up to date main. If so\n# it exits normally. If not it prompts for"
},
{
"path": "packages/codemirror-graphql/setup-files.ts",
"chars": 261,
"preview": "// @ts-expect-error\ndocument.createRange = function () {\n return {\n setEnd() {},\n setStart() {},\n getClientRec"
},
{
"path": "packages/codemirror-graphql/src/__tests__/hint.test.ts",
"chars": 32129,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/__tests__/kitchen-sink.graphql",
"chars": 988,
"preview": "# Copyright (c) 2021 GraphQL Contributors\n# All rights reserved.\n#\n# This source code is licensed under the BSD-style li"
},
{
"path": "packages/codemirror-graphql/src/__tests__/lint.test.ts",
"chars": 2495,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/__tests__/mode.test.ts",
"chars": 3385,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/__tests__/schema-kitchen-sink.graphql",
"chars": 1553,
"preview": "# Copyright (c) 2021 GraphQL Contributors\n# All rights reserved.\n#\n# This source code is licensed under the BSD-style li"
},
{
"path": "packages/codemirror-graphql/src/__tests__/testSchema.ts",
"chars": 5793,
"preview": "/* istanbul ignore file */\n/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source c"
},
{
"path": "packages/codemirror-graphql/src/cm6-legacy/mode.ts",
"chars": 398,
"preview": "import type { StreamParser } from '@codemirror/language';\nimport graphqlModeFactory from '../utils/mode-factory';\n\n// Ty"
},
{
"path": "packages/codemirror-graphql/src/hint.ts",
"chars": 3446,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/index.d.ts",
"chars": 378,
"preview": "import 'codemirror/addon/hint/show-hint';\n\ndeclare module 'codemirror' {\n let Init: any;\n\n interface Editor {\n doc:"
},
{
"path": "packages/codemirror-graphql/src/info.ts",
"chars": 9301,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/jump.ts",
"chars": 2295,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/lint.ts",
"chars": 2077,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/mode.ts",
"chars": 445,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/results/__tests__/mode.test.ts",
"chars": 1408,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/results/mode.ts",
"chars": 2627,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/SchemaReference.ts",
"chars": 3054,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/__tests__/jsonParse.test.ts",
"chars": 1284,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/collectVariables.ts",
"chars": 1113,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/forEachState.ts",
"chars": 786,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/getTypeInfo.ts",
"chars": 5655,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/hintList.ts",
"chars": 3838,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/info-addon.ts",
"chars": 5072,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/jsonParse.ts",
"chars": 6626,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/jump-addon.ts",
"chars": 4257,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/mode-factory.ts",
"chars": 2122,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/mode-indent.ts",
"chars": 1058,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/utils/runParser.ts",
"chars": 918,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/variables/__tests__/hint.test.ts",
"chars": 5802,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/variables/__tests__/lint.test.ts",
"chars": 2763,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/variables/__tests__/mode.test.ts",
"chars": 2656,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
},
{
"path": "packages/codemirror-graphql/src/variables/hint.ts",
"chars": 6149,
"preview": "/**\n * Copyright (c) 2021 GraphQL Contributors\n * All rights reserved.\n *\n * This source code is licensed under the B"
}
]
// ... and 535 more files (download for full content)
About this extraction
This page contains the full source code of the graphql/graphiql GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 735 files (3.2 MB), approximately 866.7k tokens, and a symbol index with 1111 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.