{"owner":"graphql","repo":"graphiql","hasSkills":true,"totalSkillsCount":18,"totalTokensCount":21144,"categories":["plugin-manifest","anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["packages/cm6-graphql/README.md","packages/codemirror-graphql/README.md","packages/graphiql-plugin-code-exporter/README.md","packages/graphiql-plugin-doc-explorer/README.md","packages/graphiql-plugin-explorer/README.md","packages/graphiql-plugin-history/README.md","packages/graphiql-react/README.md","packages/graphiql-toolkit/README.md","packages/graphiql-toolkit/docs/create-fetcher.md","packages/graphiql/README.md","packages/graphiql/test/README.md","packages/graphql-language-service-cli/README.md","packages/graphql-language-service-server/README.md","packages/graphql-language-service/README.md","packages/monaco-graphql/README.md","packages/vscode-graphql-execution/README.md","packages/vscode-graphql-syntax/README.md","packages/vscode-graphql/README.md"],"skills":{"packages/cm6-graphql/README.md":"# CodeMirror 6 GraphQL Language extension\n\n[![NPM](https://img.shields.io/npm/v/cm6-graphql.svg?style=flat-square)](https://npmjs.com/cm6-graphql)\n![npm downloads](https://img.shields.io/npm/dm/cm6-graphql?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/cm6-graphql.svg?style=flat-square)](LICENSE)\n[Discord Channel](https://discord.gg/cffZwk8NJW)\n\nProvides CodeMirror 6 extension with a parser mode for GraphQL along with\nautocomplete and linting powered by your GraphQL Schema.\n\n### Getting Started\n\n```sh\nnpm install cm6-graphql\n```\n\n[CodeMirror 6](https://codemirror.net/) customization is done through\n[extensions](https://codemirror.net/docs/guide/#extension). This package is\nan extension that customizes CodeMirror 6 for GraphQL.\n\n```js\nimport { basicSetup, EditorView } from 'codemirror';\nimport { graphql } from 'cm6-graphql';\n\nconst view = new EditorView({\n  doc: `mutation mutationName {\n    setString(value: \"newString\")\n  }`,\n  extensions: [basicSetup, graphql(myGraphQLSchema)],\n  parent: document.body,\n});\n```\n\n_**Note:** You have to provide a theme to CodeMirror 6 for the styling you want. You\ncan take a look at\n[this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts)\nor see the CodeMirror 6\n[documentation examples](https://codemirror.net/examples/styling/) for more\ndetails._\n\n### Updating schema\n\nIf you need to dynamically update the GraphQL schema used in the editor, you can\ncall `updateSchema` with the CodeMirror `EditorView` instance and the new schema\n\n```js\nimport { updateSchema } from 'cm6-graphql';\n\nconst onNewSchema = schema => {\n  updateSchema(view, schema);\n};\n```\n","packages/codemirror-graphql/README.md":"# GraphQL mode for CodeMirror\n\n[![NPM](https://img.shields.io/npm/v/codemirror-graphql.svg?style=flat-square)](https://npmjs.com/codemirror-graphql)\n![npm downloads](https://img.shields.io/npm/dm/codemirror-graphql?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/codemirror-graphql.svg?style=flat-square)](LICENSE)\n[Discord Channel](https://discord.gg/cffZwk8NJW)\n\n**NOTE: For CodeMirror 6, use [cm6-graphql](/packages/cm6-graphql/) instead**\n\nProvides CodeMirror with a parser mode for GraphQL along with a live linter and\ntypeahead hinter powered by your GraphQL Schema.\n\n![Demo .gif of GraphQL Codemirror Mode](https://raw.githubusercontent.com/graphql/graphiql/main/packages/codemirror-graphql/resources/example.gif)\n\n### Getting Started\n\n```sh\nnpm install codemirror-graphql\n```\n\nCodeMirror helpers install themselves to the global CodeMirror when they are\nimported.\n\n```ts\nimport type { ValidationContext, SDLValidationContext } from 'graphql';\n\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n    validationRules: [ExampleRule],\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n  },\n});\n```\n\n## External Fragments Example\n\nIf you want to have autocompletion for external fragment definitions, there's a\nnew configuration setting available\n\n```ts\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nconst externalFragments = /* GraphQL */ `\n  fragment MyFragment on Example {\n    id: ID!\n    name: String!\n  }\n   fragment AnotherFragment on Example {\n    id: ID!\n    title: String!\n  }\n`;\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n    // here we use a string, but\n    // you can also provide an array of FragmentDefinitionNodes\n    externalFragments,\n  },\n});\n```\n\n### Custom Validation Rules\n\nIf you want to show custom validation, you can do that too! It uses the\n`ValidationRule` interface.\n\n```ts\nimport type { ValidationRule } from 'graphql';\n\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nconst ExampleRule: ValidationRule = context => {\n  // your custom rules here\n  const schema = context.getSchema();\n  const document = context.getDocument();\n  return {\n    NamedType(node) {\n      if (node.name.value !== node.name.value.toLowercase()) {\n        context.reportError('only lowercase type names allowed!');\n      }\n    },\n  };\n};\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n    validationRules: [ExampleRule],\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n  },\n});\n```\n\nBuild for the web with [webpack](http://webpack.github.io) or\n[browserify](http://browserify.org).\n","packages/graphiql-plugin-code-exporter/README.md":"# GraphiQL Code Exporter Plugin\n\nThis package provides a plugin that integrates the\n[GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.\n\n## Installation\n\nInstall the plugin using your preferred package manager:\n\n```sh\nnpm install @graphiql/plugin-code-exporter\n```\n\nMake sure to also install the required peer dependencies:\n\n```sh\nnpm install react react-dom graphql\n```\n\n## Usage\n\nRefer to the\n[GraphiQL Code Exporter README](https://github.com/OneGraph/graphiql-code-exporter) for full details on available `props` and how to [create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).\n\nExample integration:\n\n```jsx\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { codeExporterPlugin } from '@graphiql/plugin-code-exporter';\nimport 'graphiql/style.css';\nimport '@graphiql/plugin-code-exporter/style.css';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://countries.trevorblades.com',\n});\nfunction getQuery(arg, spaceCount = 2) {\n  const spaces = ' '.repeat(spaceCount);\n  const { query } = arg.operationDataList[0];\n  return spaces + query.replaceAll('\\n', '\\n' + spaces);\n}\n\nconst codeExporter = codeExporterPlugin({\n  /**\n   * Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details.\n   */\n  snippets: [\n    {\n      name: 'Example One',\n      language: 'JavaScript',\n      codeMirrorMode: 'jsx',\n      options: [],\n      generate: arg =>\n        ['export const query = graphql`', getQuery(arg), '`'].join('\\n'),\n    },\n    {\n      name: 'Example Two',\n      language: 'JavaScript',\n      codeMirrorMode: 'jsx',\n      options: [],\n      generate: arg =>\n        [\n          \"import { graphql } from 'graphql'\",\n          '',\n          'export const query = graphql`',\n          getQuery(arg),\n          '`',\n        ].join('\\n'),\n    },\n  ],\n});\nfunction App() {\n  return <GraphiQL fetcher={fetcher} plugins={[codeExporter]} />;\n}\n```\n\n## CDN bundles\n\nYou can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh).\n\nSee the [CDN example](./example/index.html) for a working demo.\n","packages/graphiql-plugin-doc-explorer/README.md":"# `@graphiql/plugin-doc-explorer`\n\n## API\n\n- `useDocExplorer`: Handles the state for the doc explorer\n- `useDocExplorerActions`: Actions related to the doc explorer\n","packages/graphiql-plugin-explorer/README.md":"# GraphiQL Explorer Plugin\n\nThis package provides a plugin that integrates the\n[`GraphiQL Explorer`](https://github.com/OneGraph/graphiql-explorer) into the GraphiQL UI.\n\n## Installation\n\nUse your preferred package manager to install the plugin:\n\n```sh\nnpm install @graphiql/plugin-explorer\n```\n\nMake sure to also install the required peer dependencies:\n\n```sh\nnpm install react react-dom graphql\n```\n\n## Usage\n\n```jsx\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { explorerPlugin } from '@graphiql/plugin-explorer';\nimport 'graphiql/style.css';\nimport '@graphiql/plugin-explorer/style.css';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',\n});\n\n// Pass the explorer props here if you want\nconst explorer = explorerPlugin();\n\nfunction GraphiQLWithExplorer() {\n  return <GraphiQL fetcher={fetcher} plugins={[explorer]} />;\n}\n```\n\n## CDN bundles\n\nYou can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh).\n\nSee the [CDN example](./example/index.html) for a working demo.\n","packages/graphiql-plugin-history/README.md":"# `@graphiql/plugin-history`\n\n## API\n\n- `useHistory`: Persists executed requests in storage\n- `useHistoryActions`: Actions related to the history\n","packages/graphiql-react/README.md":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html)\n| [NPM](https://www.npmjs.com/package/@graphiql/react)\n\n# `@graphiql/react`\n\nA React SDK for building integrated GraphQL developer experiences for the web.\n\n## Purpose\n\nThis package contains a set of building blocks that allow its users to build\nGraphQL IDEs with ease. It's the set of components that make up Graph*i*QL, the\nfirst and official GraphQL IDE, owned and maintained by the GraphQL Foundation.\n\nThere are two kinds of building blocks that this package provides: Stateful\ncontext providers for state management and simple UI components.\n\n## Getting started\n\nAll the state for your GraphQL IDE lives in multiple contexts. The easiest way\nto get started is by using the `GraphiQLProvider` component that renders all the\nindividual providers.\n\nThere is one required prop called `fetcher`. This is a function that performs\nGraphQL request against a given endpoint. You can easily create a fetcher using\nthe method `createGraphiQLFetcher` from the `@graphiql/toolkit` package.\n\n```jsx\nimport { GraphiQLProvider } from '@graphiql/react';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://my.graphql.api/graphql',\n});\n\nfunction MyGraphQLIDE() {\n  return (\n    <GraphiQLProvider fetcher={fetcher}>\n      <div className=\"graphiql-container\">Hello GraphQL</div>\n    </GraphiQLProvider>\n  );\n}\n```\n\nInside the provider you can now use any UI component provided by\n`@graphiql/react`. For example, you can render an operation editor like this:\n\n```jsx\nimport { QueryEditor } from '@graphiql/react';\n\nfunction MyGraphQLIDE() {\n  return (\n    <GraphiQLProvider fetcher={fetcher}>\n      <div className=\"graphiql-container\">\n        <QueryEditor />\n      </div>\n    </GraphiQLProvider>\n  );\n}\n```\n\nThe package also ships the necessary CSS that all its UI components need. You\ncan import them from `@graphiql/react/style.css`.\n\n> **Note**: In order for these styles to apply, the UI components need to be\n> rendered inside an element that has a class name `graphiql-container`.\n\nBy default, the UI components will try to use the\n[Roboto](https://fonts.google.com/specimen/Roboto) font for regular text and the\n[Fira Code](https://fonts.google.com/specimen/Fira+Code) font for mono-space\ntext. If you want to use the default fonts you can load them using these files:\n\n- `@graphiql/react/font/roboto.css`\n- `@graphiql/react/font/fira-code.css`.\n\nYou can, of course, use any other method to load these fonts (for example, loading\nthem from Google Fonts).\n\nFurther details on how to use `@graphiql/react` can be found in the reference\nimplementation of a GraphQL IDE - Graph*i*QL - in the\n[`graphiql` package](https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/components/GraphiQL.tsx).\n\n## Available Stores\n\nGraphiQL uses a set of state management stores, each responsible for a specific part of the IDE's\nbehavior. These stores contain all logic related to state management and can be accessed via custom\nReact hooks.\n\n### Core Hooks\n\n- **`useMonaco`**: Access `monaco-editor` exports and the `monaco-graphql` instance. Designed for safe use in SSR environments.\n- **`useGraphiQL`**: Access the current state.\n- **`useGraphiQLActions`**: Trigger actions that mutate the state. This hook **never** rerenders.\n\nThe `useGraphiQLActions` hook **exposes all actions** across store slices.\nThe `useGraphiQL` hook **provides access to the following store slices**:\n\n| Store Slice                              | Responsibilities                                                                                          |\n| ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| [`storage`](./src/stores/storage.ts)     | Provides a storage API that can be used to persist state in the browser (by default using `localStorage`) |\n| [`editor`](./src/stores/editor.ts)       | Manages **query**, **variables**, **headers**, and **response** editors and tabs                          |\n| [`execution`](./src/stores/execution.ts) | Handles the execution of GraphQL requests                                                                 |\n| [`plugin`](./src/stores/plugin.ts)       | Manages plugins and the currently active plugin                                                           |\n| [`schema`](./src/stores/schema.ts)       | Fetches, validates, and stores the GraphQL schema                                                         |\n| [`theme`](./src/stores/theme.ts)         | Manages the current theme and provides a method to update it                                              |\n\n### Usage Example\n\n```js\nimport { useGraphiQL, useGraphiQLActions } from '@graphiql/react';\n\n// Get an action to fetch the schema and an action to change theme\nconst { introspect, setTheme } = useGraphiQLActions();\n\n// Use a selector to access specific parts of the state like current schema and theme\nconst { schema, theme } = useGraphiQL(state => ({\n  schema: state.schema,\n  theme: state.theme,\n}));\n```\n\nAll store properties are documented using TSDoc comments. If you're using an\nIDE like VSCode for development, these descriptions will show up in auto-complete\ntooltips. All these descriptions can also be found in the\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html).\n\n## Theming\n\nAll the components from `@graphiql/react` have been designed with customization\nin mind. We achieve this using CSS variables.\n\nAll variables that are available for customization can be found in the\n[`root.css` file](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/src/style/root.css).\n\n### Colors\n\nColors are defined using the\n[HSL format](https://en.wikipedia.org/wiki/HSL_and_HSV). All CSS variables for\ncolors are defined as a list of the three values that make up HSL (hue,\nsaturation and lightness).\n\nThis approach allows `@graphiql/react` to use transparent colors by passing the\nvalue of the CSS variable in the `hsla` function. This enables us to provide\ntruly reusable UI elements where good contrasts are preserved regardless of the\nelements background.\n\n## Development\n\nIf you want to develop with `@graphiql/react` locally - in particular when\nworking on the `graphiql` package - all you need to do is run `pnpm dev` in the\npackage folder in a separate terminal. This will build the package using Vite.\nWhen using it in combination with `pnpm dev:graphiql` (running in the repo\nroot) this will give you auto-reloading when working on `graphiql` and\n`@graphiql/react` simultaneously.\n","packages/graphiql-toolkit/README.md":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-toolkit/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_toolkit.html)\n| [NPM](https://www.npmjs.com/package/@graphiql/toolkit) |\n[Discord](https://discord.gg/NP5vbPeUFp)\n\n# `@graphiql/toolkit`\n\nThis is a general purpose library for building GraphQL IDEs. It's being used by\nother packages like `graphiql` and `@graphiql/react` and also provides utilities\nthat are useful when working with these packages.\n\n## Docs\n\n- **[`createFetcher`](./docs/create-fetcher.md)** : a utility for creating a\n  `fetcher` prop implementation for HTTP GET, POST including multipart,\n  websockets fetcher\n- more to come!\n","packages/graphiql-toolkit/docs/create-fetcher.md":"# `createGraphiQLFetcher`\n\nA utility for generating a full-featured `fetcher` for GraphiQL including\n`@stream`, `@defer` `IncrementalDelivery`and `multipart` and subscriptions using\n`graphql-ws` or the legacy websockets protocol.\n\nUnder the hood, it uses [`graphql-ws`](https://www.npmjs.com/package/graphql-ws)\nclient and [`meros`](https://www.npmjs.com/package/meros) which act as client\nreference implementations of the\n[GraphQL over HTTP Working Group Spec](https://github.com/graphql/graphql-over-http)\nspecification, and the most popular transport spec proposals.\n\n## Setup\n\nYou can install `@graphiql/toolkit` using your favorite package manager:\n\n```bash\nnpm install @graphiql/toolkit\n```\n\n## Getting Started\n\nWe have a few flexible options to get you started with the client. It's meant to\ncover the majority of common use cases with a simple encapsulation.\n\n### Default HTTP/Multipart IncrementalDelivery Usage\n\nHere's a simple example. In this case, a websocket client isn't even\ninitialized, only http (with multipart `@stream` and `@defer` Incremental\nDelivery support of course!).\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n### Adding `graphql-ws` websockets subscriptions\n\nFirst you'll need to install `graphql-ws` as a peer dependency:\n\n```bash\nnpm install graphql-ws\n```\n\nJust by providing the `subscriptionUrl`, you can also generate a `graphql-ws`\nclient. This client now supports both HTTP/Multipart Incremental Delivery for\n`@defer` and `@stream`, _and_ websockets subscriptions.\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url, subscriptionUrl });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\nYou can further customize the `graphql-ws` implementation by creating a custom\nclient instance and providing it as the `wsClient` parameter.\n\n## Options\n\n### `url` (_required_)\n\nThis is url used for all `HTTP` requests, and for schema introspection.\n\n### `subscriptionUrl`\n\nThis generates a `graphql-ws` client using the provided url. Note that a server\nmust be compatible with the new `graphql-ws` subscriptions spec for this to\nwork.\n\n### `wsClient`\n\nProvide your own subscriptions client. Using this option bypasses\n`subscriptionUrl`. In theory, this could be any client using any transport, as\nlong as it matches `graphql-ws` `Client` signature.\n\n## `wsConnectionParams`\n\nProvide your initial connection params.\n\n```jsx\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://localhost:3000',\n  subscriptionUrl: 'https://localhost:3001',\n  wsConnectionParams: { Authorization: 'token 1234' },\n});\n\nconst App = () => {\n  return <GraphiQL fetcher={fetcher} />;\n};\n```\n\n### `legacyWsClient` or `legacyClient`\n\nProvide a legacy subscriptions client using `subscriptions-transport-ws`\nprotocol. Using this option bypasses `subscriptionUrl`. In theory, this could be\nany client using any transport, as long as it matches\n`subscriptions-transport-ws` `Client` signature.\n\n### `headers`\n\nSpecify headers that will be passed to all requests.\n\n### `fetch`\n\nPass a custom fetch implementation such as `isomorphic-fetch`.\n\n## Customization Examples\n\n### Custom `wsClient` Example using `graphql-ws`\n\nThis example passes a `graphql-ws` client to the `wsClient` option:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createClient } from 'graphql-ws';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  wsClient: createClient({\n    url: subscriptionUrl,\n    keepAlive: 2000,\n  }),\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n### Custom `legacyClient` Example\n\n(not recommended)\n\nBy providing the `legacyClient` you can support a `subscriptions-transport-ws`\nclient implementation, or equivalent:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { SubscriptionClient } from 'subscriptions-transport-ws';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  legacyWsClient: new SubscriptionClient(subscriptionUrl),\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\nNote that you will need to install the client separately:\n\n```bash\nnpm install subscriptions-transport-ws\n```\n\n### Custom `fetcher` Example\n\nFor SSR, we might want to use something like `isomorphic-fetch`:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { fetch } from 'isomorphic-fetch';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url, fetch });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n## Credits\n\nThis is originally inspired by `graphql-subscriptions-fetcher` created by @Urigo\n","packages/graphiql/README.md":"# GraphiQL\n\n> **Security Notice:** All versions of `graphiql` < `1.4.3` are vulnerable to an\n> XSS attack in cases where the GraphQL server to which the GraphiQL web app\n> connects is not trusted. Learn more in\n> [our security advisory](https://github.com/graphql/graphiql/tree/main/docs/security/2021-introspection-schema-xss.md).\n\n[![NPM](https://img.shields.io/npm/v/graphiql.svg)](https://npmjs.com/graphiql)\n![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/graphiql)\n![npm downloads](https://img.shields.io/npm/dm/graphiql?label=npm%20downloads)\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/graphiql)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/min/graphiql/latest)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/graphiql/latest)\n[![License](https://img.shields.io/npm/l/graphiql.svg?style=flat-square)](LICENSE)\n[![](https://dcbadge.vercel.app/api/server/NP5vbPeUFp?style=flat)](https://discord.gg/NP5vbPeUFp)\n\n_/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE.\n[Try the live demo](https://graphql.org/swapi-graphql).\n\n[![](resources/graphiql.png)](https://graphql.org/swapi-graphql)\n\n## Features\n\n- Full language support of the latest\n  [GraphQL Specification](https://spec.graphql.org/draft/#sec-Language):\n- Syntax highlighting\n- Intelligent type ahead of fields, arguments, types, and more\n- Real-time error highlighting and reporting for queries and variables\n- Automatic query and variables completion\n- Automatic leaf node insertion for non-scalar fields\n- Documentation explorer with search and markdown support\n- Persisted state using `localStorage`\n- Simple API for adding custom plugins\n\n## Live Demos\n\n- The [latest stable version](https://graphql.org/swapi-graphql)\n- The current state of the `main` branch:\n  - An [installable PWA](https://graphiql-test.netlify.com/webpack) with plugins ([source](../../examples//graphiql-webpack))\n  - Using the [minified bundles](https://graphiql-test.netlify.com)\n  - Using the [development bundles](https://graphiql-test.netlify.com/dev) (good\n    for inspecting, debugging, etc)\n- Each pull request will also get its own preview deployment on Netlify, you'll\n  find a link in the GitHub checks\n\n## Examples\n\n- [`CDN (ESM-based)`](../../examples/graphiql-cdn) - A single HTML file using [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) from http URLs and a `<script>` tag\n- [`Webpack`](../../examples/graphiql-webpack) - A starter for Webpack\n- [`Create React App`](../../examples/graphiql-create-react-app) - An example\n  using [Create React App](https://create-react-app.dev)\n- [`Parcel`](../../examples/graphiql-parcel) - An example using\n  [Parcel](https://parceljs.org)\n\n## Getting started\n\n- [Migration guide to GraphiQL 2](../../docs/migration/graphiql-2.0.0.md)\n- [Migration guide to GraphiQL 4](../../docs/migration/graphiql-4.0.0.md)\n- [Migration guide to GraphiQL 5](../../docs/migration/graphiql-5.0.0.md)\n\n### CDN usage\n\n#### ESM-based (recommended)\n\nUse the modern, ESM-based CDN approach.\nSee the [ESM-based example](../../examples/graphiql-cdn) for setup details.\n\n#### UMD (deprecated)\n\n> [!WARNING]\n>\n> The UMD CDN build is **deprecated** and will be removed in a future major release of GraphiQL.\n> Please migrate to the [ESM-based example](../../examples/graphiql-cdn).\n\n## Usage\n\n### Using as package\n\nThe `graphiql` package can be installed using your favorite package manager. You\nalso need to have `react`,`react-dom` and `graphql` installed which are peer\ndependencies of `graphiql`.\n\n```sh\nnpm install graphiql react react-dom graphql\n```\n\nThe package exports a bunch of React components:\n\n- The `GraphiQLProvider` components renders multiple context providers that\n  encapsulate all state management\n- The `GraphiQLInterface` component renders the UI that makes up GraphiQL\n- The `GraphiQL` component is a combination of both the above components\n\nThere is a single prop that is required for the `GraphiQL` component called\nfetcher. A fetcher is a function that performs a request to a GraphQL API. It\nmay return a `Promise` for queries or mutations, but also an `Observable` or an\n`AsyncIterable` in order to handle subscriptions or multipart responses.\n\nAn easy way to get create such a function is the\n[`createGraphiQLFetcher`](../graphiql-toolkit/src/create-fetcher/createFetcher.ts)\nmethod exported from the `@graphiql/toolkit` package. If you want to implement\nyour own fetcher function, you can use the `Fetcher` type from\n`@graphiql/toolkit` to make sure the signature matches what GraphiQL expects.\n\nThe following is everything you need to render GraphiQL in your React\napplication:\n\n```jsx\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { GraphiQL } from 'graphiql';\nimport { createRoot } from 'react-dom/client';\nimport 'graphiql/style.css';\n\nconst fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(<GraphiQL fetcher={fetcher} />);\n```\n\nWhen the connected server supports GraphQL.js 17 fragment arguments, opt in\nwith `<GraphiQL fetcher={fetcher} experimentalFragmentArguments />`. The syntax\nis disabled by default.\n\n## Customize\n\nGraphiQL supports customization in UI and behavior by accepting React props and\nchildren.\n\n### Props\n\nFor props documentation, see the\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops-1)\n\n### Children\n\nParts of the UI can be customized by passing children to the `GraphiQL` or the\n`GraphiQLInterface` component.\n\n- `<GraphiQL.Logo>`: Replace the GraphiQL logo with your own.\n\n- `<GraphiQL.Toolbar>`: Add a custom toolbar below the execution button. Pass\n  the empty `<GraphiQL.Toolbar />` if an empty toolbar is desired. Use the\n  components provided by `@graphiql/react` to create toolbar buttons with proper\n  styles.\n\n- `<GraphiQL.Footer>`: Add a custom footer shown below the response editor.\n\n### Plugins\n\nStarting with `graphiql@2` there exists a simple plugin API that allows you to\nbuild your own custom tools right into GraphiQL.\n\nThere are two built-in plugins that come with GraphiQL: The documentation\nexplorer and the query history. Both can be toggled using icons in the sidebar\non the left side of the screen. When opened, they appear next to the sidebar in\na resizable portion of the screen.\n\nTo define your own plugin, all you need is a JavaScript object with three\nproperties:\n\n- `title`: A unique title for the plugin (this will show up in a tooltip when\n  hovering over the sidebar icon)\n- `icon`: A React component that renders an icon which will be included in the\n  sidebar\n- `content`: A React component that renders the plugin contents which will be\n  shown next to the sidebar when opening the plugin\n\nYou can pass a list of plugin objects to the `GraphiQL` component using the\n`plugins` prop. You can also control the visibility state of plugins using the\n`visiblePlugin` prop and react to changes of the plugin visibility state using\nthe `onTogglePluginVisibility` prop.\n\nInside the component you pass to `content` you can interact with the GraphiQL\nstate using the hooks provided by `@graphiql/react`. For example, check out\nhow you can integrate the OneGraph Explorer in GraphiQL using the plugin API in\nthe [plugin package](../graphiql-plugin-explorer) in this repo.\n\n### Theming\n\nThe GraphiQL interface uses CSS variables for theming, in particular for colors.\nCheck out the [`root.css`](../graphiql-react/src/style/root.css) file for the\navailable variables.\n\nOverriding these variables is the only officially supported way of customizing\nthe appearance of GraphiQL. Starting from version 2, class names are no longer\nbe considered stable and might change between minor or patch version updates.\n\n### Editor Theme\n\nThe colors inside the editor can also be altered using\n[CodeMirror editor themes](https://codemirror.net/demo/theme.html). You can use\nthe `editorTheme` prop to pass in the name of the theme. The CSS for the theme\nhas to be loaded for the theme prop to work.\n\n```jsx\n// In your document head:\n<link\n  rel=\"stylesheet\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/solarized.css\"\n/>\n```\n\n```jsx\n// When rendering GraphiQL:\n<GraphiQL editorTheme=\"solarized light\" />\n```\n\nYou can also create your own theme in CSS. As a reference, the default\n`graphiql` theme definition can be found\n[here](../graphiql-react/src/style/codemirror.css).\n\n## Usage with a Custom Storage Namespace\n\nWhen multiple GraphiQL instances run on the same origin—such as in different apps or\nenvironments—they can conflict by reading from and writing to the same `localStorage` keys. To\nprevent this, you can provide a custom `storage` object that prefixes all keys with a unique\nnamespace, isolating each instance’s state and avoiding collisions.\n\n```tsx\nimport type { FC } from 'react';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });\n\nconst NAMESPACE = 'my-namespace';\n\nconst storage: typeof localStorage = {\n  ...localStorage,\n  getItem(key) {\n    return localStorage.getItem(`${NAMESPACE}:${key}`);\n  },\n  setItem(key, value) {\n    return localStorage.setItem(`${NAMESPACE}:${key}`, value);\n  },\n  removeItem(key) {\n    return localStorage.removeItem(`${NAMESPACE}:${key}`);\n  },\n};\n\nexport const App: FC = () => {\n  return <GraphiQL fetcher={fetcher} storage={myStorage} />;\n};\n```\n","packages/graphiql/test/README.md":"# Test GraphiQL Application\n\nThis test folder serves as a basis for testing in-development changes and offers\nwatching/compiling of the `src` folder. To utilize this, simply:\n\n1. Run `npm install`\n2. Run `npm run dev`\n3. Open your browser to the address listed in your console. e.g.\n   `Started on http://localhost:49811/`\n","packages/graphql-language-service-cli/README.md":"# graphql-language-service-cli\n\n> Note: As of 3.0.0, this package has been renamed from\n> `graphql-language-service` to `graphql-language-service-cli`. please now use\n> the `graphql-lsp` bin, instead of the `graphql` binary.\n\n[![NPM](https://img.shields.io/npm/v/graphql-language-service-cli.svg)](https://npmjs.com/graphql-language-service-cli)\n![npm downloads](https://img.shields.io/npm/dm/graphql-language-service-vli?label=npm%20downloads)\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/codemirror-graphql)\n[![License](https://img.shields.io/npm/l/graphql-language-service.svg?style=flat-square)](LICENSE)\n\n_We welcome your feedback and suggestions._\n\nGraphQL Language Service provides an interface for building GraphQL language\nservices for IDEs.\n\nAlmost 100% for\n[Microsoft's Language Server Protocol](https://github.com/Microsoft/language-server-protocol)\nis in place\n\nSupported features include:\n\n- Diagnostics (GraphQL syntax linting/validations) (**spec-compliant**)\n- Autocomplete suggestions (**spec-compliant**)\n- Hyperlink to fragment definitions and named types (type, input, enum)\n  definitions (**spec-compliant**)\n- Outline view support for queries and SDL\n- Symbols support across the workspace\n\nsee more information at\n[`graphql-language-service-server`](https://npmjs.com/graphql-language-service-server)\n\n## Installation and Usage\n\n### Dependencies\n\nAn LSP-compatible client with a file watcher that sends watch notifications to\nthe server.\n\n**DROPPED**: GraphQL Language Service no longer depends on\n[Watchman](https://facebook.github.io/watchman/)\n\nOnly node 9 or greater, and npm or yarn are required dependencies.\n\n### Installation\n\nwith `yarn`:\n\n```sh\nyarn global add graphql-language-service-cli\n```\n\nwith `npm`:\n\n```sh\nnpm install -g graphql-language-service-cli\n```\n\neither will install the `graphql-lsp` bin globally\n\n### GraphQL configuration file (`.graphqlrc.yml`)\n\nCheck out [graphql-config](https://graphql-config.com/docs)\n\nThe custom graphql language configurations are:\n\n- `customDirectives` - `['@myExampleDirective']`\n- `customValidationRules` - returns rules array with parameter\n  `ValidationContext` from `graphql/validation`\n\n### LSP Workspace Configuration\n\nWhen running `server`, your LSP-compatible client can\n[provide additional workspace configuration](https://npmjs.com/graphql-language-service-server#workspace-configuration).\n\nFor example, `coc.nvim` allows for providing custom `settings`\n\n```json\n\"languageserver\": {\n  \"graphql\": {\n    \"command\": \"graphql-lsp\",\n    \"args\": [\"server\", \"-m\", \"stream\"],\n    // customize filetypes to your needs\n    \"filetypes\": [\"typescript\", \"typescriptreact\", \"graphql\"],\n    \"settings\": {\n        \"graphql-config.load.legacy\": true\n    }\n  }\n}\n```\n\nthis would allow for legacy `graphql-config` file formats like `.graphqlconfig`,\nuseful on projects maintaining compatibility with the intellij plugin\n\n### Using the command-line interface\n\n```sh\ngraphql-lsp server --schema=localhost:3000\n```\n\nThe node executable contains several commands: `server` and the command-line\nlanguage service methods (`validate`, `autocomplete`, `outline`).\n\n### CLI Options\n\n```\nUsage: graphql-lsp <command> <file>\n\n[-h | --help][-c | --configDir] {configDir}\n[-t | --text] {textBuffer}\n[-f | --file] {filePath}\n[-s | --schema] {schemaPath}\n\nOptions:\n\n-h, --help Show help [boolean]\n\n-t, --text Text buffer to perform GraphQL diagnostics on.\nWill defer to --file option if omitted.\nOverrides the --file option, if any.\n[string]\n\n-f, --file File path to perform GraphQL diagnostics on.\nWill be ignored if --text option is supplied.\n[string]\n\n--row A row number from the cursor location for GraphQL\nautocomplete suggestions.\nIf omitted, the last row number will be used.\n[number]\n\n--column A column number from the cursor location for GraphQL\nautocomplete suggestions.\nIf omitted, the last column number will be used.\n[number]\n\n-c, --configDir Path to the .graphqlrc.yml configuration file.\nWalks up the directory tree from the provided config\ndirectory, or the current working directory, until a\n.graphqlrc is found or the root directory is found.\n[string]\n\n-s, --schemaPath a path to schema DSL file\n[string]\n\nAt least one command is required.\nCommands: \"server, validate, autocomplete, outline\"\n\n```\n","packages/graphql-language-service-server/README.md":"# graphql-language-service-server\n\n[![NPM](https://img.shields.io/npm/v/graphql-language-service-server.svg?style=flat-square)](https://npmjs.com/graphql-language-service-server)\n![npm downloads](https://img.shields.io/npm/dm/graphql-language-service-server?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/graphql-language-service-server.svg?style=flat-square)](LICENSE)\n\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service_server.html)\n| [Discord Channel](https://discord.gg/PXaRYrpgK4)\n\nServer process backing the\n[GraphQL Language Service](https://github.com/graphql/graphiql/tree/main/packages/graphql-language-service).\n\nGraphQL Language Service Server provides an interface for building GraphQL\nlanguage services for IDEs.\n\nPartial support for\n[Microsoft's Language Server Protocol](https://github.com/Microsoft/language-server-protocol)\nis in place, with more to come in the future.\n\nSupported features include:\n\n- Diagnostics (GraphQL syntax linting/validations) (**spec-compliant**)\n- Autocomplete suggestions (**spec-compliant**)\n- Hyperlink to fragment definitions and named types (type, input, enum)\n  definitions (**spec-compliant**)\n- Outline view support for queries\n- Support for `gql` `graphql` and other template tags inside javascript,\n  typescript, jsx, ts, vue and svelte files, and an interface to allow custom\n  parsing of all files.\n\n## Installation and Usage\n\n### Dependencies\n\n- An LSP compatible client with its own file watcher, that sends watch\n  notifications to the server, such as vscode, nvim, or sublime-lsp.\n- Node.js `^18.18.0 || >=20.9.0` or later is required.\n- (for now) a graphql config file is required\n\n### Installation\n\n```bash\nnpm install graphql-language-service-server\n# or\nyarn add graphql-language-service-server\n```\n\nWe also provide a CLI interface to this server, see\n[`graphql-language-service-cli`](../graphql-language-service-cli/)\n\n### Usage\n\nInitialize the GraphQL Language Server with the `startServer` function:\n\n```ts\nimport { startServer } from 'graphql-language-service-server';\n\nawait startServer({\n  method: 'node',\n});\n```\n\nIf you are developing a service or extension, this is the LSP language server\nyou want to run.\n\nWhen developing vscode extensions, just the above is enough to get started for\nyour extension's `ServerOptions.run.module`, for example.\n\n`startServer` function takes the following parameters:\n\n| Parameter      | Required                                             | Description                                                                       |\n| -------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------- |\n| port           | `true` when method is `socket`, `false` otherwise    | port for the LSP server to run on                                                 |\n| method         | `false`                                              | `socket`, `streams`, or `node` (ipc)                                              |\n| config         | `false`                                              | custom `graphql-config` instance from `loadConfig` (see example above)            |\n| configDir      | `false`                                              | the directory where graphql-config is found                                       |\n| extensions     | `false`                                              | array of functions to transform the graphql-config and add extensions dynamically |\n| parser         | `false`                                              | Customize _all_ file parsing by overriding the default `parseDocument` function   |\n| fileExtensions | `false`. defaults to `['.js', '.ts', '.tsx, '.jsx']` | Customize file extensions used by the default LSP parser                          |\n\n### GraphQL configuration file\n\nYou _must_ provide a graphql config file\n\nCheck out [graphql-config](https://graphql-config.com/introduction) to learn the\nmany ways you can define your graphql config\n\n#### `.graphqlrc` or `.graphqlrc.yml/yaml` or `graphql.config.yml`\n\n```yaml\nschema: 'packages/api/src/schema.graphql'\ndocuments: 'packages/app/src/components/**/*.{tsx,ts}'\nextensions:\n  endpoints:\n    example:\n      url: 'http://localhost:8000'\n  customExtension:\n    foo: true\n```\n\n#### `.graphqlrc` or `.graphqlrc.json` or `graphql.config.json`\n\n```json\n{\n  \"schema\": \"https://localhost:8000\"\n}\n```\n\n#### `graphql.config.js` or `.graphqlrc.js`\n\n```js\nmodule.exports = { schema: 'https://localhost:8000' };\n```\n\n#### custom `startServer`\n\nuse graphql config [`loadConfig`](https://graphql-config.com/load-config) for\nfurther customization:\n\n```ts\nimport { loadConfig } from 'graphql-config'; // 3.0.0 or later!\n\n// with required params\nconst config = await loadConfig();\n\nawait startServer({\n  method: 'node',\n  // or instead of configName, an exact path (relative from rootDir or absolute)\n\n  // deprecated for: loadConfigOptions.rootDir. root directory for graphql config file(s), or for relative resolution for exact `filePath`. default process.cwd()\n  // configDir: '',\n  loadConfigOptions: {\n    // any of the options for graphql-config@3 `loadConfig()`\n    schema: await config.getSchema(),\n    // rootDir is same as `configDir` before, the path where the graphql config file would be found by cosmic-config\n    rootDir: 'config/',\n    // or - the relative or absolute path to your file\n    filePath: 'exact/path/to/config.js', // (also supports yml, json, ts, toml)\n    // myPlatform.config.js/json/yaml works now!\n    configName: 'myPlatform',\n  },\n});\n```\n\n<span id=\"custom-graphql-config\" />\n\n#### Custom `graphql-config` features\n\nThe graphql-config features we support are:\n\n```js\nmodule.exports = {\n  extensions: {\n    // add customDirectives (legacy). you can now provide multiple schema pointers to config.schema/project.schema, including inline strings. same with scalars or any SDL type that you'd like to append to the schema\n    customDirectives: ['@myExampleDirective'],\n    // a function that returns an array of validation rules, ala https://github.com/graphql/graphql-js/tree/main/src/validation/rules\n    // note that this file will be loaded by the vscode runtime, so the node version and other factors will come into play\n    customValidationRules: require('./config/customValidationRules'),\n    schemaCacheTTL: 1000, // reduce or increase minimum schema cache lifetime from 30000ms (30 seconds). you may want to reduce this if you are developing fullstack with network schema\n    languageService: {\n      // this is enabled by default if non-local files are specified in the project `schema`\n      // NOTE: this will disable all definition lookup for local SDL files\n      cacheSchemaFileForLookup: true,\n      // undefined by default which has the same effect as `true`, set to `false` if you are already using // `graphql-eslint` or some other tool for validating graphql in your IDE. Must be explicitly `false` to disable this feature, not just \"falsy\"\n      enableValidation: true,\n      // (experimental) enhanced auto expansion of graphql leaf fields and arguments\n      fillLeafsOnComplete: true,\n      // enable GraphQL.js 17 experimental fragment arguments across language features\n      experimentalFragmentArguments: true,\n      // instead of jumping directly to the SDL file, you can override definition peek/jump results to point to different files or locations\n      // (for example, source files for your schema in any language!)\n      // based on Relay vscode's pathToLocateCommand\n      // see LocateCommand type!\n      locateCommand(projectName, typePath, info) {\n        // pass more info, such as GraphQLType with the ast node. info.project is also available if you need it\n        const { path, range } = ourLookupUtility(\n          projectName,\n          typePath,\n          info.type.node,\n        );\n        return { uri: path, range }; // range.start.line/range.end.character/etc, base 1\n        // you can also return relay LSP style\n        // return '/path/to/file.py:20:1'; // (range: 20:1 20:1 )\n        // return '/path/to/file.py'; // (range: 1:1 1:1)\n      },\n    },\n  },\n};\n```\n\nor for multi-project workspaces:\n\n```ts\n// graphql.config.ts\nexport default {\n  projects: {\n    myProject: {\n      schema: [\n        // internally in `graphql-config`, an attempt will be made to combine these schemas into one in-memory schema to use for validation, lookup, etc\n        'http://localhost:8080',\n        './my-project/schema.graphql',\n        './my-project/schema.ts',\n        '@customDirective(arg: String!)',\n        'scalar CustomScalar',\n      ],\n      // project specific defaults\n      extensions: {\n        languageService: {\n          cacheSchemaFileForLookup: true,\n          enableValidation: false,\n        },\n      },\n    },\n    anotherProject: {\n      schema: {\n        'http://localhost:8081': {\n          customHeaders: { Authorization: 'Bearer example' },\n        },\n      },\n    },\n  },\n  // global defaults for all projects\n  extensions: {\n    languageService: {\n      cacheSchemaFileForLookup: false,\n      enableValidation: true,\n    },\n  },\n};\n```\n\nYou can specify any of these settings globally as above, or per project. Read\nthe graphql-config docs to learn more about this!\n\nFor secrets (headers, urls, etc), you can import `dotenv()` and set a base path\nas you wish in your `graphql-config` file to pre-load `process.env` variables.\n\n### Troubleshooting notes\n\n- you may need to manually restart the language server for some of these\n  configurations to take effect\n- graphql-config's multi-project support is not related to multi-root workspaces\n  in vscode - in fact, each workspace can have multiple graphql config projects,\n  which is what makes multi-root workspaces tricky to support. coming soon!\n\n<span id=\"workspace-configuration\" />\n\n### Workspace Configuration\n\nThe LSP Server reads config by sending `workspace/configuration` method when it\ninitializes.\n\nNote: We still do not support LSP multi-root workspaces but will tackle this\nvery soon!\n\nMany LSP clients beyond vscode offer ways to set these configurations, such as\nvia `initializationOptions` in nvim.coc. The options are mostly designed to\nconfigure graphql-config's load parameters, the only thing we can't configure\nwith graphql config. The final option can be set in `graphql-config` as well\n\n| Parameter                                 | Default                                           | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `graphql-config.load.baseDir`             | workspace root or process.cwd()                   | the path where graphql config looks for config files                                                                                                                                                                                                                                                |\n| `graphql-config.load.filepath`            | `null`                                            | exact filepath of the config file.                                                                                                                                                                                                                                                                  |\n| `graphql-config.load.configName`          | `graphql`                                         | config name prefix instead of `graphql`                                                                                                                                                                                                                                                             |\n| `graphql-config.load.legacy`              | `true`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `graphql-config.dotEnvPath`               | `null`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `vscode-graphql.cacheSchemaFileForLookup` | `true` if `schema` contains non-SDL files or URLs | generate an SDL file based on your graphql-config schema configuration for definition lookup and other features. enabled by default when your `schema` config are URLs or introspection JSON, or if you have any non-local SDL files in `schema`                                                    |\n| `vscode-graphql.schemaCacheTTL`           | `30000`                                           | an integer value in milliseconds for the desired minimum cache lifetime for all schemas, which also causes the generated file to be re-written. set to 30s by default. effectively a \"lazy\" form of polling. if you are developing a schema alongside client queries, you may want to decrease this |\n| `vscode-graphql.debug`                    | `false`                                           | show more verbose log output in the output channel                                                                                                                                                                                                                                                  |\n\nall the `graphql-config.load.*` configuration values come from static\n`loadConfig()` options in graphql config.\n\n(more coming soon!)\n\n### Architectural Overview\n\nGraphQL Language Service currently communicates via Stream transport with the\nIDE server. GraphQL server will receive/send RPC messages to perform language\nservice features, while caching the necessary GraphQL artifacts such as fragment\ndefinitions, GraphQL schemas etc. More about the server interface and RPC\nmessage format below.\n\nThe IDE server should launch a separate GraphQL server with its own child\nprocess for each `.graphqlrc.yml` file the IDE finds (using the nearest ancestor\ndirectory relative to the file currently being edited):\n\n```\n./application\n\n  ./productA\n    .graphqlrc.yml\n    ProductAQuery.graphql\n    ProductASchema.graphql\n\n  ./productB\n    .graphqlrc.yml\n    ProductBQuery.graphql\n    ProductBSchema.graphql\n```\n\nA separate GraphQL server should be instantiated for `ProductA` and `ProductB`,\neach with its own `.graphqlrc.yml` file, as illustrated in the directory\nstructure above.\n\nThe IDE server should manage the lifecycle of the GraphQL server. Ideally, the\nIDE server should spawn a child process for each of the GraphQL Language Service\nprocesses necessary, and gracefully exit the processes as the IDE closes. In\ncase of errors or a sudden halt the GraphQL Language Service will close as the\nstream from the IDE closes.\n\n### Server Interface\n\nGraphQL Language Server uses [JSON-RPC](http://www.jsonrpc.org/specification) to\ncommunicate with the IDE servers. Microsoft's language server currently supports\ntwo communication transports: Stream (stdio) and IPC. For IPC transport, the\nreference guide to be used for development is\n[the language server protocol](https://microsoft.github.io/language-server-protocol/specification)\ndocumentation.\n\nFor each transport, there is a slight difference in JSON message format,\nespecially in how the methods to be invoked are defined - below are the\ncurrently supported methods for each transport (will be updated as progress is\nmade):\n\n|                      | Stream                       | IPC                                         |\n| -------------------: | ---------------------------- | ------------------------------------------- |\n|          Diagnostics | `getDiagnostics`             | `textDocument/publishDiagnostics`           |\n|       Autocompletion | `getAutocompleteSuggestions` | `textDocument/completion`                   |\n|              Outline | `getOutline`                 | `textDocument/outline`                      |\n|     Document Symbols | `getDocumentSymbols`         | `textDocument/symbols`                      |\n|    Workspace Symbols | `getWorkspaceSymbols`        | `workspace/symbols`                         |\n|     Go-to definition | `getDefinition`              | `textDocument/definition`                   |\n| Workspace Definition | `getWorkspaceDefinition`     | `workspace/definition`                      |\n|          File Events | Not supported yet            | `didOpen/didClose/didSave/didChange` events |\n","packages/graphql-language-service/README.md":"# `graphql-language-service`\n\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service.html)\n| [Discord](https://discord.gg/wkQCKwazxj)\n\n> **Note**: Still mostly experimental, however it depends mostly on stable\n> libraries. **Migration Note**: As of 3.0.0, the LSP Server command line\n> interface has been moved to\n> [`graphql-language-service-cli`](../graphql-language-service-cli)\n\n## Purpose\n\nThis package brings together all the dependencies for building out web or\ndesktop IDE services for the GraphQL Language.\n\nIt is named as such to match the convention of other vscode language services.\n\n## Interface\n\nLanguage Service Protocol (LSP) methods written in TypeScript used by\n[`graphql-language-service-server`](https://github.com/graphql/graphiql/tree/main/packages/graphql-language-service-server),\n[`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql)\nand\n[`codemirror-graphql`](https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql).\n\nThe goal is to provide methods for creating\n[Language Server Protocol](https://langserver.org) compliant services to be used\nby an IDE plugin, a browser application or desktop application.\n\n## Parser\n\nA standalone online, immutable, dependency-free parser for\n[GraphQL](https://graphql.org), used by the LSP interface methods.\n\nWith GraphQL.js 17, fragment variable definitions and fragment spread arguments\ncan be enabled for parsing, diagnostics, outlines, operation facts, autocomplete,\nand hover information. Pass `experimentalFragmentArguments: true` through the\nrelevant language-service options. The feature defaults to `false` because the\nconnected GraphQL server must also support the experimental syntax.\n\n## Utils\n\nVarious utilities\n","packages/monaco-graphql/README.md":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service_server.html)\n| [Discord Channel](https://discord.gg/r4BxrAG6fN)\n\nGraphQL language plugin for the Monaco Editor. You can use it to build\nvscode/codespaces-like web or desktop IDEs using whatever frontend javascript\nlibraries or frameworks you want, or none!\n\n- [webpack example](https://github.com/graphql/graphiql/tree/main/examples/monaco-graphql-webpack/)\n  using plain javascript, shows how to change schemas\n- [vite + react example](https://stackblitz.com/edit/monaco-graphql-react-vite?file=src%2FApp.tsx&terminal=dev) -\n  minimal example with variables (C)JSON support using react\n- [live demo](https://monaco-graphql.netlify.com) of the monaco webpack example\n  (prompts for GitHub access token!)\n\n> **NOTE:** This is in pre-release state as we build towards GraphiQL 2.0.x.\n> [`codemirror-graphql`](https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql)\n> has more features (such as JSON variables validation) and is more stable.\n\n## Features\n\nIt provides the following features while editing GraphQL files:\n\n- Configurable multi-model, multi-schema language worker with `fileMatch`\n  expressions\n- Code completion (schema driven) for Operation and SDL types\n  - Automatic expansion & completion on leaf type completion\n- Hover (schema driven) with markdown support\n- Validation (schema driven)\n- JSON Variables validation and language features (schema driven)\n- Formatting - using prettier\n- Syntax Highlighting & Basic Languages provided by `monaco-editor` basic\n  languages support\n- Configurable formatting options\n- Providing external fragments\n- create custom workers for custom language service options - parser, validation\n  rules, schemaBuilder, etc\n\n## Usage\n\nFor now, we use `language` id of `graphql` until we can ensure we can dovetail\nnicely with the official `graphql` language ID.\n\nTo use with webpack, here is an example to get you started:\n\n```sh\nyarn add monaco-graphql\n```\n\n## Sync Example\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport { initializeMode } from 'monaco-graphql/initializeMode'; // `monaco-graphql/esm/initializeMode` is deprecated but still works\n\n// you can also configure these using the webpack or vite plugins for `monaco-editor`\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\n// instantiates the worker & language features with the schema!\nconst MonacoGraphQLAPI = initializeMode({\n  // Opt in only when the connected server supports fragment arguments.\n  experimentalFragmentArguments: true,\n  schemas: [\n    {\n      schema: myGraphqlSchema as GraphQLSchema,\n      // anything that monaco.URI.from() is compatible with\n      uri: 'https://my-schema.com',\n      uri: '/my-schema.graphql',\n      // match the monaco file uris for this schema.\n      // accepts specific uris and anything `picomatch` supports.\n      // (everything except bracket regular expressions)\n      fileMatch: ['**/*.graphql'],\n      // note: not sure if ^ works if the graphql model is using urls for uris?\n    },\n  ],\n});\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    // if you are using vite or webpack plugin, it will be found here\n    return new Worker('editor.worker.js');\n  },\n};\nmonaco.editor.create(document.getElementById('someElementId'), {\n  value: 'query { }',\n  language: 'graphql',\n  formatOnPaste: true,\n});\n```\n\n## Lazy Example\n\nThe existing API works as before in terms of instantiating the schema.\nTo avoid manually calling getWorker(), you can use the monaco editor plugins for webpack or vite (see examples, and below)\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n// enables our language worker right away, despite no schema\nimport 'monaco-graphql';\n\n// you can also configure these using the webpack or vite plugins for `monaco-editor`\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\n// lazily invoke the api config methods whenever we want!\nmonaco.languages.graphql.setSchemaConfig([\n  {\n    schema: myGraphqlSchema as GraphQLSchema,\n    // anything that monaco.URI.from() is compatible with\n    uri: 'https://my-schema.com',\n    uri: '/my-schema.graphql',\n    // match the monaco file uris for this schema.\n    // accepts specific uris and anything `picomatch` supports.\n    // (everything except bracket regular expressions)\n    fileMatch: ['**/*.graphql'],\n    // note: not sure if ^ works if the graphql model is using urls for uris?\n  },\n]);\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    return new Worker('editor.worker.js');\n  },\n};\nmonaco.editor.create(document.getElementById('someElementId'), {\n  value: 'query { }',\n  language: 'graphql',\n  formatOnPaste: true,\n});\n```\n\nThis will cover the basics, making an HTTP POST with the default\n`introspectionQuery()` operation. To customize the entire fetcher, see\n[advanced customization](<>) below. For more customization options, see the\n[Monaco Editor API Docs](https://microsoft.github.io/monaco-editor/api/index.html)\n\n## Advanced Usage\n\n### Variables JSON Support!\n\nIn `monaco-graphql@0.5.0` we introduced a method `getVariablesJSONSchema` that\nallows you to retrieve a `JSONSchema` description for the declared variables for\nany given set of operations\n\n## Full Sync Demo with Variables JSON\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    return new Worker('editor.worker.js');\n  },\n};\n\n// the language service will be instantiated once the schema is available\nconst MonacoGraphQLAPI = initializeMode({\n  schemas: [\n    {\n      // anything that monaco.URI.from() is compatible with\n      uri: 'https://my-schema.com',\n      // match the monaco file uris for this schema.\n      // accepts specific filenames and anything `picomatch` supports.\n      fileMatch: ['**/*.graphql'],\n      schema: myGraphqlSchema as GraphQLSchema,\n    },\n  ],\n});\n\nconst operationModel = monaco.editor.createModel(\n  'query {}',\n  'graphql',\n  '/operation.graphql',\n);\n\nconst operationEditor = monaco.editor.create(\n  document.getElementById('someElementId'),\n  {\n    model: operationModel,\n    language: 'graphql',\n    formatOnPaste: true,\n  },\n);\n\nconst variablesSchemaUri = monaco.editor.URI.file('/variables-schema.json');\n\nconst variablesModel = monaco.editor.createModel(\n  '{}',\n  'json',\n  '/variables.json',\n);\n\nconst variablesEditor = monaco.editor.create(\n  document.getElementById('someElementId'),\n  {\n    model: variablesModel,\n    language: 'graphql',\n    formatOnPaste: true,\n  },\n);\n\n// high-level method for configuring json variables validation\nMonacoGraphQLAPI.setDiagnosticSettings({\n  validateVariablesJson: {\n    // Urls, uris, anything that monaco.URI.from() is compatible with.\n    // Match operation model to variables editor,\n    // and the language service will automatically listen for changes,\n    // and compute the json schema using the GraphQLWorker.\n    // This is in the main process is applied to the global monaco json settings\n    // for validation, completion and more using monaco-json's built-in JSON Schema support.\n    [operationModel.uri.toString()]: [variablesModel.uri.toString()],\n  },\n  jsonDiagnosticSettings: {\n    allowComments: true, // allow json, parse with a jsonc parser to make requests\n  },\n});\n\nMonacoGraphQL.setCompletionSettings({\n  // this auto-fills NonNull leaf fields\n  // it used to be on by default, but is annoying when\n  // fields contain required argument.\n  // hoping to fix that soon!\n  __experimental__fillLeafsOnComplete: true,\n});\n```\n\nYou can also experiment with the built-in `jsonc`? (JSON\nsyntax that allows comments and trailing commas, for `tsconfig.json`, etc.) and the 3rd party `monaco-yaml` language modes\nfor completion of other types of variable input. you can also experiment with\neditor methods to parse detected input into different formats, etc (`yaml`\npastes as `json`, etc.)\n\nYou could of course prefer to generate a `jsonschema` form for variables input\nusing a framework of your choice, instead of an editor. Enjoy!\n\n## `monaco-graphql/lite`\n\nYou can also import a \"lite\" version, and manually enable only the monaco features you want!\n\nWarning: by default, completion and other features will not work, only highlighting and validation.\n\n```ts\nimport { initializeMode } from 'monaco-graphql/lite';\n\n// enable completion\nimport 'monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution';\n\nconst api = initializeMode({\n  schemas: [\n    {\n      // anything that monaco.URI.from() is compatible with\n      uri: 'schema.graphql',\n      // match the monaco file uris for this schema.\n      // accepts specific filenames and anything `picomatch` supports.\n      fileMatch: ['operation.graphql'],\n      schema: myGraphqlSchema as GraphQLSchema,\n    },\n  ],\n});\n```\n\n## `MonacoGraphQLAPI` ([typedoc](https://graphiql-test.netlify.app/typedoc/classes/monaco_graphql.monacoMonacoGraphQLAPI.html))\n\nIf you call any of these API methods to modify the language service\nconfiguration at any point at runtime, the webworker will reload relevant\nlanguage features.\n\nIf you `import 'monaco-graphql'` synchronously, you can access the api via\n`monaco.languages.graphql.api`.\n\n```ts\nimport 'monaco-graphql';\n// now the api will be available on the `monaco.languages` global\nconst { api } = monaco.languages.graphql;\n```\n\n```ts\nimport 'monaco-graphql';\n\n// also this\nimport { languages } from 'monaco-editor';\n// now the api will be available on the `monaco.languages` global\nconst { api } = languages.graphql;\n```\n\nOtherwise, you can, like in the sync demo above:\n\n```ts\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nconst api = initializeMode(config);\n```\n\n### `monaco.languages.graphql.api.setSchemaConfig([SchemaConfig])`\n\nsame as the above, except it overwrites the entire schema config.\n\nyou can provide multiple, and use `fileMatch` to map to various uri \"directory\"\nglobs or specific files. `uri` can be an url or file path, anything parsable\n\n```ts\n// you can load it lazily\nimport 'monaco-graphql';\n\nmonaco.languages.graphql.api.setSchemaConfig([\n  {\n    schema: GraphQLSchema,\n    fileMatch: ['**/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n]);\n```\n\nor you can load the language features only when you have your schema\n\n```ts\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nconst schemas = [\n  {\n    schema: GraphQLSchema,\n    fileMatch: ['operations/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n];\nconst api = initializeMode({ schemas });\n\n// add another schema. this will cause language workers and features to reset\napi.setSchemaConfig([\n  ...schemas,\n  {\n    introspectionJSON: myIntrospectionJSON,\n    fileMatch: ['specific/monaco/uri.graphql'],\n    uri: 'another-schema.graphql',\n  },\n]);\n```\n\nor if you want, replace the entire configuration with a single schema. this will\ncause the worker to be entirely re-created and language services reset\n\n```ts\napi.setSchemaConfig([\n  {\n    introspectionJSON: myIntrospectionJSON,\n    fileMatch: ['**/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n]);\n```\n\n### `monaco.languages.graphql.api.setModeConfiguration()`\n\nThis is where you can toggle monaco language features. all are enabled by\ndefault.\n\n```ts\nmonaco.languages.graphql.api.setModeConfiguration({\n  documentFormattingEdits: true,\n  completionItems: true,\n  hovers: true,\n  documentSymbols: true,\n  diagnostics: true,\n});\n```\n\n### `monaco.languages.graphql.api.setFormattingOptions()`\n\nthis accepts an object `{ prettierConfig: prettier.Options }`, which accepts\n[any prettier option](https://prettier.io/docs/en/options.html). it will not\nre-load the schema or language features, however the new prettier options will\ntake effect.\n\nthis method overwrites the previous configuration, and will only accept static\nvalues that can be passed between the main/worker process boundary.\n\n```ts\nmonaco.languages.graphql.api.setFormattingOptions({\n  // if you wanna be like that\n  prettierOptions: { tabWidth: 2, useTabs: true },\n});\n```\n\n### `monaco.languages.graphql.api.setExternalFragmentDefinitions()`\n\nAppend external fragments to be used by autocomplete and other language\nfeatures.\n\nThis accepts either a string that contains fragment definitions, or\n`TypeDefinitionNode[]`\n\n### `monaco.languages.graphql.api.getDiagnosticOptions`\n\n```ts\nmonaco.languages.graphql.api.setDiagnosticSettings({\n  validateVariablesJson: {\n    // Urls, uris, anything that monaco.URI.from() is compatible with.\n    // Match operation model to variables editor,\n    // and the language service will automatically listen for changes,\n    // and compute the json schema using the GraphQLWorker.\n    // This is in the main process is applied to the global monaco json settings\n    // for validation, completion and more using monaco-json's built-in JSON Schema support.\n    [operationModel.uri.toString()]: [variablesModel.uri.toString()],\n  },\n  jsonDiagnosticSettings: {\n    allowComments: true, // allow json, parse with a jsonc parser to make requests\n  },\n});\n```\n\n## Bundlers\n\n### Webpack\n\nyou'll can refer to the webpack configuration in the\n[full monaco webpack example](/examples/monaco-graphql-webpack#readme) to see\nhow it works with webpack and the official `monaco-editor-webpack-plugin`. there\nis probably an easier way to configure webpack `worker-loader` for this.\n\n**Notes:**\n\n- for additional features, please specify them in `features` for the webpack plugin, or import them directly\n- if you are trying to add `typescript` as a language, there is an outstanding [bug with the webpack plugin](https://github.com/microsoft/monaco-editor/issues/2738), see our [next.js example](../../examples/monaco-graphql-nextjs/next.config.js) for the workaround. do not specify `languages: ['typescript']` or `javascript`\n\n### Vite\n\nYou can configure vite to load `monaco-editor` json mode and even the language\neditor worker using\n[the example for our mode](https://github.com/vdesjs/vite-plugin-monaco-editor#options)\n\nBe sure to import additional editor features and language modes manually, as the vite plugin only allows you to specify `languageWorkers`.\nSee the vite example to see how to add typescript support\n\n## Web Frameworks\n\nthe plain javascript\n[webpack example](https://github.com/graphql/graphiql/tree/main/examples/monaco-graphql-webpack/)\nshould give you a starting point to see how to implement it with\n\n### React\n\n- [`use-monaco`](https://www.npmjs.com/package/use-monaco) seems to support the\n  custom language worker configuration we want, and seems to be well built! we\n  hope to help them build their\n- when loading it yourself, either dynamic import the mode and/or instantiate it\n  yourself using `useEffect` on `didMount` to prevent breaking SSR.\n- it may work with other libraries by using a similar strategy to\n  [this](https://github.com/graphql/graphiql/blob/9df315b44896efa313ed6744445fc8f9e702ebc3/examples/monaco-graphql-webpack/src/editors.ts#L15).\n  you can also provide `MonacoEnvironment.getWorkerUrl` which works better as an\n  async import of your pre-build worker files\n\n## Custom Webworker (for passing non-static config to worker)\n\nIf you want to pass a custom parser and/or validation rules, it is supported,\nhowever the setup is a bit more complicated.\n\nYou can add any `LanguageServiceConfig`\n([typedoc](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service.html#graphqllanguageconfig-1))\nconfiguration options you like here to `languageConfig` as below.\n\nThis is because we can't pass non-static configuration to the existing worker\nprogrammatically, so you must import these and build the worker custom with\nthose functions. Part of the (worthwhile) cost of crossing runtimes!\n\nyou'll want to create your own `my-graphql.worker.ts` file, and add your custom\nconfig such as `schemaLoader` to `createData`:\n\n```ts\n// my-graphql.worker.ts\nimport type * as monaco from 'monaco-editor';\nimport type { ICreateData } from 'monaco-graphql';\n// @ts-expect-error -- ignore missing types\nimport { initialize } from 'monaco-editor/esm/vs/editor/editor.worker';\nimport { GraphQLWorker } from 'monaco-graphql/esm/GraphQLWorker';\nimport { GraphQLError, ValidationRule } from 'graphql';\n\nconst RequireOperationNameRule: ValidationRule = context => {\n  return {\n    OperationDefinition(node) {\n      if (node.name) {\n        return;\n      }\n      context.reportError(\n        new GraphQLError('Oops, all operations must be named.', {\n          nodes: [node],\n        }),\n      );\n    },\n  };\n};\n\nglobalThis.onmessage = () => {\n  initialize((ctx: monaco.worker.IWorkerContext, createData: ICreateData) => {\n    createData.languageConfig.customValidationRules = [\n      RequireOperationNameRule,\n    ];\n    return new GraphQLWorker(ctx, createData);\n  });\n};\n```\n\nthen, in your application:\n\n```ts\n// Vite query suffixes https://vite.dev/guide/features.html#import-with-query-suffixes\nimport EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';\nimport GraphQLWorker from './my-graphql.worker?worker';\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    return label === 'graphql' ? new GraphQLWorker() : new EditorWorker();\n  },\n};\n```\n\nor, if you have webpack configured for it:\n\n```ts\nglobalThis.MonacoEnvironment = {\n  getWorkerUrl(_workerId: string, label: string) {\n    return label === 'graphql' ? 'my-graphql.worker.js' : 'editor.worker.js';\n  },\n};\n```\n\nwith vite you just need:\n\n```ts\nimport { defineConfig } from 'vite';\nimport monacoEditorPlugin from 'vite-plugin-monaco-editor';\n\nexport default defineConfig({\n  plugins: [\n    monacoEditorPlugin({\n      customWorker: [\n        {\n          label: 'graphql',\n          entry: 'my-graphql.worker.js',\n        },\n      ],\n    }),\n  ],\n});\n```\n\n## Monaco Editor Tips\n\nIf you are familiar with Codemirror/Atom-era terminology and features, here's\nsome gotchas:\n\n- \"hinting\" => \"code completion\" in LSP terminology\n- \"linting\" => \"diagnostics\" in lsp terminology\n- the default keymap is different, more vscode like\n- command palette and right click context menu are important\n- you can extend the provided standard completion, linting, etc. for example,\n  `editor.setModelMarkers()`\n- [Monaco Editor API Docs](https://microsoft.github.io/monaco-editor/api/index.html)\n- [Monaco Editor Samples](https://github.com/Microsoft/monaco-editor-samples)\n  repository is great for tips on implementing with different bundlers,\n  runtimes, etc.\n\n## Avoid Bundle All `monaco-editor`'s Languages\n\nWhile importing `monaco-editor` in your project, you silently import 83 builtin\nlanguages, such as `typescript`, `html`, `css`, `json` and others. You can found\na full list of\n[basic-languages](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages)\nand\n[languages](https://github.com/microsoft/monaco-editor/tree/main/src/language).\n\nFor `monaco-graphql`, you need only 2 languages - `graphql` and `json`.\nIn version `monaco-graphql@1.3.0` and later, you can replace all `monaco-editor`'s\nimports with `monaco-graphql/monaco-editor` to improve performance, load\nonly `graphql` and `json` languages, and skip loading unused languages.\n\n```diff\n-import { ... } from 'monaco-editor'\n+import { ... } from 'monaco-graphql/monaco-editor'\n```\n\n> The `monaco-graphql/esm/*` import pattern is deprecated. It is retained for\n> backwards compatibility but the wildcard export that enables it is planned\n> for removal in the next major version. New code should use the canonical\n> subpaths: `monaco-graphql/monaco-editor`, `monaco-graphql/initializeMode`,\n> `monaco-graphql/graphql.worker`, `monaco-graphql/lite`.\n\n### Catch Future Import Mistakes with ESLint\n\nTo prevent mis-importing of `monaco-editor`, you can set up default\n`no-restricted-imports` rule for JavaScript projects or\n`@typescript-eslint/no-restricted-imports` for TypeScript projects.\n\n```json5\n{\n  rules: {\n    // or @typescript-eslint/no-restricted-imports\n    'no-restricted-imports': [\n      'error',\n      {\n        name: 'monaco-editor',\n        message: '`monaco-editor` imports all languages; use `monaco-graphql/monaco-editor` instead to import only `json` and `graphql` languages',\n      },\n    ],\n  },\n}\n```\n\n## Inspiration\n\n`microsoft/monaco-json` was our inspiration from the outset, when it was still a\nstandalone repository. @acao actually wholesale copied many files, you could\nalmost say it was a fork!\n\n## TODO\n\n- [x] variables JSON validation\n- [x] variables completion\n- [ ] Symbols & Definitions\n- [x] file uri-driven schema loading\n- [x] op -> schema & schema -> schema references\n- [x] `insertText` for field and argument completion\n","packages/vscode-graphql-execution/README.md":"## `graphql.vscode-graphql-execution`\n\nThis extension provides standalone support for executing graphql operations\ninline in your code for:\n\n- .ts/.tsx\n- .js/.jsx\n- .graphql, .gql or .graphqls files\n\n## How it works\n\n1. A codelens will appear above all operations - clicking will begin executing\n   the operation.\n2. (If variables are specified in the operation), a dialog will prompt for these\n   variables\n3. Then, the results or network error should appear, voilà!\n4. If no endpoints are configured, it will exit early and tell you to define\n   them.\n\n## Configuring the extension\n\n### `graphql-config`\n\nYour graphql config file will need to contain either a schema-as-url OR an\nendpoints configuration. Either of the following are valid:\n\n```yaml\nschema: https://localhost:3000/graphql\n```\n\n```yaml\nschema: schema.graphql\nextensions:\n  endpoints:\n    default:\n      url: 'https://localhost:3000/graphql'\n```\n\n```yaml\nprojects:\n  app:\n    schema: schema.graphql\n    extensions:\n      endpoints:\n        default:\n          url: 'https://localhost:3000/graphql'\n```\n\n### Disable codelens\n\nTo disable the codelens, please specify this setting in `settings.json` or\n`user.json`:\n\n```json\n{\n  ...\n \"vscode-graphql-execution.showExecCodelens\": false\n}\n```\n\n### Self Signed Certificates\n\nEnable this (`false` by default) to allow node to use non-authorized SSL\ncertificates.\n\n```json\n{\n  \"vscode-graphql-execution.rejectUnauthorized\": true\n}\n```\n","packages/vscode-graphql-syntax/README.md":"# GraphQL Syntax Support\n\nAdds full GraphQL syntax highlighting and language support such as bracket\nmatching.\n\n- Supports `.graphql`/`.gql`/`.graphqls` highlighting\n- Javascript, Typescript & JSX/TSX (examples: [test.js](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.js) & [test.ts](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts))\n- Vue (examples: [test-sfc-comp.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc-comp.vue) & [test-sfc.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc.vue))\n- Svelte (example: [test.svelte](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte))\n- ReasonML/ReScript (`%graphql()` ) (example: [test.re](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.re))\n- Python (example: [test.py](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.py))\n- PHP (example: [test.php](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.php))\n- Markdown (examples: [test.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.md) & [test-py.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md))\n- Scala (example: [test.scala](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.scala))\n\nYou'll want to install this if you do not use `graphql-config`, or want to use\nthe highlighting with other extensions than `vscode-graphql`\n\n## Contributing\n\nFeel free to open a PR to fix, enhance any language support, or even add new\nlanguages 😍\n\nsee:\n\n- [the grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/)\n- [the applicable vscode docs](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide)\n\n### Contributor Guide: Improving a Language\n\nWhether fixing a bug or adding a new delimiter for your language, here are a few tips for you:\n\n1. TDD approach: add your bug case or new delimiter example to the relevant file in `tests/__fixtures__`\n1. run `pnpm test -- -u` in the syntax extension workspace, and observe whether vscode-textmate tokenizes your example properly\n1. fix/update/add the relevant pattern, and repeat the above to see if the tokenization changes. you should see `meta.embedded.block.graphql`\n1. to test manually, run `pnpm vsce:package` in the workspace and right click to install the bundled vsix extension, and open the fixture file\n\n<span id=\"adding-a-lang\"></span>\n\n### Contributor Guide: Adding a Language\n\n1.  add a file to [grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/) following our other examples.\n1.  be sure to add it to `package.json` contributions as well, in the `grammars` section. the `text.html.markdown` is for applying to markdown codeblocks\n1.  use a scope ala `source.{lang}` from a vscode-provided syntax grammar, or a popular, official contributed grammar. To find the name of the scope for any token's highlighting, use `Developer: Inspect Editor Tokens & Scopes` from the vscode command palette.\n1.  name it `inline.graphql.{lang}` for consistency\n1.  add a test file `tests/__fixture__` to document example usage, and a test spec to `__tests__` to assert the snapshot, pointing to the source you created\n1.  run `pnpm test -- -u` in the workspace to add the snapshot\n1.  use the snapshots to ensure your capture groups are working and serializing the graphql as expected\n1.  in the test fixture, document all working cases and non working cases with Todo comments for common usage in your language. be sure to think of cases such as string interpolation and generics for typed languages.\n1.  add it to the list above in the readme, with links to your test fixtures as usage documentation\n1.  to manually test it in vscode itself, run `pnpm vsce:package` in the syntax extension workspace and right click and install the bundled vsix file, then view the test fixture\n\n## Usage Note\n\nWe would love for the other graphql extension authors to freely use this syntax\nextension as well! Even if your extension is designed to replace\n`vscode-graphql`, or if it's designed for other other purposes. It uses an MIT\nlicense, but attribution is always a nice gesture to the original authors :)\n\n## License\n\nMIT License\n\nCopyright 2022 GraphQL Contributors\n","packages/vscode-graphql/README.md":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql/CHANGELOG.md)\n| [Discord Channel](https://discord.gg/r4BxrAG6fN) |\n[LSP Server Docs](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server/README.md)\n\nGraphQL extension for VSCode built with the aim to tightly integrate the GraphQL\nEcosystem with VSCode for an awesome developer experience.\n\n![](https://camo.githubusercontent.com/97dc1080d5e6883c4eec3eaa6b7d0f29802e6b4b/687474703a2f2f672e7265636f726469742e636f2f497379504655484e5a342e676966)\n\n### `.graphql`, `.gql` file extension support and `gql`/`graphql` tagged template literal support for tsx, jsx, ts, js\n\n- syntax highlighting (provided by `vscode-graphql-syntax`)\n- autocomplete suggestions\n- validation against schema\n- snippets (interface, type, input, enum, union)\n- hover support\n- go to definition support (input, enum, type)\n- outline support\n\n## Getting Started\n\n> **This extension requires a graphql-config file**.\n\nTo support language features like completion and \"go-to definition\" across multiple files,\nplease include `documents` in the `graphql-config` file default or per-project\n\n### Simplest Config Example\n\n```yaml\n# .graphqlrc.yml or graphql.config.yml\nschema: 'schema.graphql'\ndocuments: 'src/**/*.{graphql,js,ts,jsx,tsx}'\n```\n\n`package.json`:\n\n```json\n\"graphql\": {\n  \"schema\": \"https://localhost:3001/graphql\",\n  \"documents\": \"**/*.{graphql,js,ts,jsx,tsx}\"\n},\n```\n\n```ts\n// .graphqlrc.ts or graphql.config.ts\nexport default {\n  schema: 'schema.graphql',\n  documents: '**/*.{graphql,js,ts,jsx,tsx}',\n};\n```\n\nsame for .json, .toml, etc\n\n## Additional Features\n\n- Loads the LSP server upon detecting a `graphql-config` file at root level or in a\n  parent level directory, or a `package.json` file with `graphql` config\n- Loads `.graphql`, `.gql` files, and detects `gql`, `graphql` tags and `/** GraphQL */` and `#graphql` comments in js, ts, jsx, tsx, vue files\n- pre-load schema and fragment definitions\n- Support [`graphql-config`](https://graphql-config.com/) files with one or multiple projects (multi-root workspaces are not yet supported)\n- the language service re-starts on saved changes to vscode settings and/or graphql config!\n\n## Configuration\n\n| Parameter                                 | Default                                           | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `graphql-config.load.baseDir`             | workspace root or process.cwd()                   | the path where graphql config looks for config files                                                                                                                                                                                                                                                |\n| `graphql-config.load.filepath`            | `null`                                            | exact filepath of the config file.                                                                                                                                                                                                                                                                  |\n| `graphql-config.load.configName`          | `graphql`                                         | config name prefix instead of `graphql`                                                                                                                                                                                                                                                             |\n| `graphql-config.load.legacy`              | `true`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `graphql-config.dotEnvPath`               | `null`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `vscode-graphql.cacheSchemaFileForLookup` | `true` if `schema` contains non-SDL files or URLs | generate an SDL file based on your graphql-config schema configuration for definition lookup and other features. enabled by default when your `schema` config are URLs or introspection JSON, or if you have any non-local SDL files in `schema`                                                    |\n| `vscode-graphql.schemaCacheTTL`           | `30000`                                           | an integer value in milliseconds for the desired minimum cache lifetime for all schemas, which also causes the generated file to be re-written. set to 30s by default. effectively a \"lazy\" form of polling. if you are developing a schema alongside client queries, you may want to decrease this |\n| `vscode-graphql.debug`                    | `false`                                           | show more verbose log output in the output channel                                                                                                                                                                                                                                                  |\n\n### Advanced Example\n\nMulti-project can be used for both local files, URL defined schema, or both\n\n```js\nimport dotenv from 'dotenv';\ndotenv.config();\n\n// .graphqlrc.ts or graphql.config.ts\nexport default {\n  projects: {\n    app: {\n      schema: ['src/schema.graphql', 'directives.graphql'],\n      documents: ['**/*.{graphql,js,ts,jsx,tsx}', 'my/fragments.graphql'],\n    },\n    db: {\n      schema: 'src/generated/db.graphql',\n      documents: ['src/db/**/*.graphql', 'my/fragments.graphql'],\n      extensions: {\n        endpoints: {\n          default: {\n            url: 'https://localhost:3001/graphql/',\n            headers: {\n              Authorization: `Bearer ${process.env.API_TOKEN}`,\n            },\n          },\n        },\n      },\n    },\n  },\n};\n```\n\nNotice that `documents` key supports glob pattern and hence `[\"**/*.graphql\"]`\nis also valid.\n\n## Frequently Asked Questions\n\n### The extension fails with errors about duplicate types\n\nYour object types must be unique per project (as they must be unique per schema), and your fragment names must also be unique per project.\n\n### The extension fails with errors about missing scalars, directives, etc\n\nMake sure that your `schema` pointers refer to a complete schema!\n\n### In JSX and TSX files I see completion items I don't need\n\nThe way vscode lets you filter these out is\n[on the user end](https://github.com/microsoft/vscode/issues/45039)\n\nSo you'll need to add something like this to your global vscode settings:\n\n```json\n\"[typescriptreact]\": {\n  \"editor.suggest.filteredTypes\": {\n    \"snippet\": false\n  }\n},\n\"[javascriptreact]\": {\n  \"editor.suggest.filteredTypes\": {\n    \"snippet\": false\n  }\n}\n```\n\n### My graphql config file is not at the root\n\nGood news, we have configs for this now!\n\nYou can search a folder for any of the matching config file names listed above:\n\n```json\n\"graphql-config.load.rootDir\": \"./config\"\n\"graphql-config.dotEnvPath\": \"./config/.dev.env\"\n```\n\nOr a specific filepath:\n\n```json\n\"graphql-config.load.filepath\": \"./config/my-graphql-config.js\"\n```\n\nOr a different `configName` that allows different formats:\n\n```json\n\"graphql-config.load.rootDir\": \"./config\",\n\"graphql-config.load.configName\": \"acme\"\n```\n\nwhich would search for `./config/.acmerc`, `.config/.acmerc.js`,\n`.config/acme.config.json`, etc matching the config paths above\n\nIf you have multiple projects, you need to define one top-level config that\ndefines all project configs using `projects`\n\n### How do I enable language features for an embedded graphql string?\n\nPlease refer to the `vscode-graphql-syntax` reference files ([js](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.js),[ts](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts),[svelte](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte),[vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.vue)) to learn our template tag, comment and other graphql delimiter patterns for the file types that the language server supports. The syntax highlighter currently supports more languages than the language server. If you notice any places where one or the other doesn't work, please report it!\n\n## Known Issues\n\n- the locally generated schema file for definition lookup currently does not re-generate on schema changes. this will be fixed soon.\n- multi-root workspaces support will be added soon as well.\n- some graphql-config options aren't always honored, this will also be fixed soon\n\n## Attribution\n\nThanks to apollo for their\n[graphql-vscode grammars](https://github.com/apollographql/vscode-graphql/blob/main/syntaxes/graphql.js.json)!\nWe have borrowed from these on several occasions. If you are looking for the\nmost replete set of vscode grammars for writing your own extension, look no\nfurther!\n\n## Development\n\nThis plugin uses the\n[GraphQL language server](https://github.com/graphql/graphql-language-service-server)\n\n1.  Clone the repository - https://github.com/graphql/graphiql\n1.  `pnpm install`\n1.  Run \"VSCode Extension\" launcher in vscode\n1.  This will open another VSCode instance with extension enabled\n1.  Open a project with a graphql config file - \":electric_plug: graphql\" in\n    VSCode status bar indicates that the extension is in use\n1.  Logs for GraphQL language service will appear in output section under\n    GraphQL Language Service\n\n### Contributing back to this project\n\nThis repository is managed by EasyCLA. Project participants must sign the free\n([GraphQL Specification Membership agreement](https://preview-spec-membership.graphql.org))\nbefore making a contribution. You only need to do this one time, and it can be\nsigned by\n[individual contributors](http://individual-spec-membership.graphql.org) or\ntheir [employers](http://corporate-spec-membership.graphql.org).\n\nTo initiate the signature process please open a PR against this repo. The\nEasyCLA bot will block the merge if we still need a membership agreement from\nyou.\n\nYou can find\n[detailed information here](https://github.com/graphql/graphql-wg/tree/main/membership).\nIf you have issues, please email\n[operations@graphql.org](mailto:operations@graphql.org).\n\nIf your company benefits from GraphQL and you would like to provide essential\nfinancial support for the systems and people that power our community, please\nalso consider membership in the\n[GraphQL Foundation](https://foundation.graphql.org/join).\n\n## License\n\nMIT\n"},"files":{"packages/cm6-graphql/README.md":"# CodeMirror 6 GraphQL Language extension\n\n[![NPM](https://img.shields.io/npm/v/cm6-graphql.svg?style=flat-square)](https://npmjs.com/cm6-graphql)\n![npm downloads](https://img.shields.io/npm/dm/cm6-graphql?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/cm6-graphql.svg?style=flat-square)](LICENSE)\n[Discord Channel](https://discord.gg/cffZwk8NJW)\n\nProvides CodeMirror 6 extension with a parser mode for GraphQL along with\nautocomplete and linting powered by your GraphQL Schema.\n\n### Getting Started\n\n```sh\nnpm install cm6-graphql\n```\n\n[CodeMirror 6](https://codemirror.net/) customization is done through\n[extensions](https://codemirror.net/docs/guide/#extension). This package is\nan extension that customizes CodeMirror 6 for GraphQL.\n\n```js\nimport { basicSetup, EditorView } from 'codemirror';\nimport { graphql } from 'cm6-graphql';\n\nconst view = new EditorView({\n  doc: `mutation mutationName {\n    setString(value: \"newString\")\n  }`,\n  extensions: [basicSetup, graphql(myGraphQLSchema)],\n  parent: document.body,\n});\n```\n\n_**Note:** You have to provide a theme to CodeMirror 6 for the styling you want. You\ncan take a look at\n[this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts)\nor see the CodeMirror 6\n[documentation examples](https://codemirror.net/examples/styling/) for more\ndetails._\n\n### Updating schema\n\nIf you need to dynamically update the GraphQL schema used in the editor, you can\ncall `updateSchema` with the CodeMirror `EditorView` instance and the new schema\n\n```js\nimport { updateSchema } from 'cm6-graphql';\n\nconst onNewSchema = schema => {\n  updateSchema(view, schema);\n};\n```\n","packages/codemirror-graphql/README.md":"# GraphQL mode for CodeMirror\n\n[![NPM](https://img.shields.io/npm/v/codemirror-graphql.svg?style=flat-square)](https://npmjs.com/codemirror-graphql)\n![npm downloads](https://img.shields.io/npm/dm/codemirror-graphql?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/codemirror-graphql.svg?style=flat-square)](LICENSE)\n[Discord Channel](https://discord.gg/cffZwk8NJW)\n\n**NOTE: For CodeMirror 6, use [cm6-graphql](/packages/cm6-graphql/) instead**\n\nProvides CodeMirror with a parser mode for GraphQL along with a live linter and\ntypeahead hinter powered by your GraphQL Schema.\n\n![Demo .gif of GraphQL Codemirror Mode](https://raw.githubusercontent.com/graphql/graphiql/main/packages/codemirror-graphql/resources/example.gif)\n\n### Getting Started\n\n```sh\nnpm install codemirror-graphql\n```\n\nCodeMirror helpers install themselves to the global CodeMirror when they are\nimported.\n\n```ts\nimport type { ValidationContext, SDLValidationContext } from 'graphql';\n\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n    validationRules: [ExampleRule],\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n  },\n});\n```\n\n## External Fragments Example\n\nIf you want to have autocompletion for external fragment definitions, there's a\nnew configuration setting available\n\n```ts\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nconst externalFragments = /* GraphQL */ `\n  fragment MyFragment on Example {\n    id: ID!\n    name: String!\n  }\n   fragment AnotherFragment on Example {\n    id: ID!\n    title: String!\n  }\n`;\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n    // here we use a string, but\n    // you can also provide an array of FragmentDefinitionNodes\n    externalFragments,\n  },\n});\n```\n\n### Custom Validation Rules\n\nIf you want to show custom validation, you can do that too! It uses the\n`ValidationRule` interface.\n\n```ts\nimport type { ValidationRule } from 'graphql';\n\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nconst ExampleRule: ValidationRule = context => {\n  // your custom rules here\n  const schema = context.getSchema();\n  const document = context.getDocument();\n  return {\n    NamedType(node) {\n      if (node.name.value !== node.name.value.toLowercase()) {\n        context.reportError('only lowercase type names allowed!');\n      }\n    },\n  };\n};\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n    validationRules: [ExampleRule],\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n  },\n});\n```\n\nBuild for the web with [webpack](http://webpack.github.io) or\n[browserify](http://browserify.org).\n","packages/graphiql-plugin-code-exporter/README.md":"# GraphiQL Code Exporter Plugin\n\nThis package provides a plugin that integrates the\n[GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.\n\n## Installation\n\nInstall the plugin using your preferred package manager:\n\n```sh\nnpm install @graphiql/plugin-code-exporter\n```\n\nMake sure to also install the required peer dependencies:\n\n```sh\nnpm install react react-dom graphql\n```\n\n## Usage\n\nRefer to the\n[GraphiQL Code Exporter README](https://github.com/OneGraph/graphiql-code-exporter) for full details on available `props` and how to [create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).\n\nExample integration:\n\n```jsx\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { codeExporterPlugin } from '@graphiql/plugin-code-exporter';\nimport 'graphiql/style.css';\nimport '@graphiql/plugin-code-exporter/style.css';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://countries.trevorblades.com',\n});\nfunction getQuery(arg, spaceCount = 2) {\n  const spaces = ' '.repeat(spaceCount);\n  const { query } = arg.operationDataList[0];\n  return spaces + query.replaceAll('\\n', '\\n' + spaces);\n}\n\nconst codeExporter = codeExporterPlugin({\n  /**\n   * Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details.\n   */\n  snippets: [\n    {\n      name: 'Example One',\n      language: 'JavaScript',\n      codeMirrorMode: 'jsx',\n      options: [],\n      generate: arg =>\n        ['export const query = graphql`', getQuery(arg), '`'].join('\\n'),\n    },\n    {\n      name: 'Example Two',\n      language: 'JavaScript',\n      codeMirrorMode: 'jsx',\n      options: [],\n      generate: arg =>\n        [\n          \"import { graphql } from 'graphql'\",\n          '',\n          'export const query = graphql`',\n          getQuery(arg),\n          '`',\n        ].join('\\n'),\n    },\n  ],\n});\nfunction App() {\n  return <GraphiQL fetcher={fetcher} plugins={[codeExporter]} />;\n}\n```\n\n## CDN bundles\n\nYou can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh).\n\nSee the [CDN example](./example/index.html) for a working demo.\n","packages/graphiql-plugin-doc-explorer/README.md":"# `@graphiql/plugin-doc-explorer`\n\n## API\n\n- `useDocExplorer`: Handles the state for the doc explorer\n- `useDocExplorerActions`: Actions related to the doc explorer\n","packages/graphiql-plugin-explorer/README.md":"# GraphiQL Explorer Plugin\n\nThis package provides a plugin that integrates the\n[`GraphiQL Explorer`](https://github.com/OneGraph/graphiql-explorer) into the GraphiQL UI.\n\n## Installation\n\nUse your preferred package manager to install the plugin:\n\n```sh\nnpm install @graphiql/plugin-explorer\n```\n\nMake sure to also install the required peer dependencies:\n\n```sh\nnpm install react react-dom graphql\n```\n\n## Usage\n\n```jsx\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { explorerPlugin } from '@graphiql/plugin-explorer';\nimport 'graphiql/style.css';\nimport '@graphiql/plugin-explorer/style.css';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',\n});\n\n// Pass the explorer props here if you want\nconst explorer = explorerPlugin();\n\nfunction GraphiQLWithExplorer() {\n  return <GraphiQL fetcher={fetcher} plugins={[explorer]} />;\n}\n```\n\n## CDN bundles\n\nYou can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh).\n\nSee the [CDN example](./example/index.html) for a working demo.\n","packages/graphiql-plugin-history/README.md":"# `@graphiql/plugin-history`\n\n## API\n\n- `useHistory`: Persists executed requests in storage\n- `useHistoryActions`: Actions related to the history\n","packages/graphiql-react/README.md":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html)\n| [NPM](https://www.npmjs.com/package/@graphiql/react)\n\n# `@graphiql/react`\n\nA React SDK for building integrated GraphQL developer experiences for the web.\n\n## Purpose\n\nThis package contains a set of building blocks that allow its users to build\nGraphQL IDEs with ease. It's the set of components that make up Graph*i*QL, the\nfirst and official GraphQL IDE, owned and maintained by the GraphQL Foundation.\n\nThere are two kinds of building blocks that this package provides: Stateful\ncontext providers for state management and simple UI components.\n\n## Getting started\n\nAll the state for your GraphQL IDE lives in multiple contexts. The easiest way\nto get started is by using the `GraphiQLProvider` component that renders all the\nindividual providers.\n\nThere is one required prop called `fetcher`. This is a function that performs\nGraphQL request against a given endpoint. You can easily create a fetcher using\nthe method `createGraphiQLFetcher` from the `@graphiql/toolkit` package.\n\n```jsx\nimport { GraphiQLProvider } from '@graphiql/react';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://my.graphql.api/graphql',\n});\n\nfunction MyGraphQLIDE() {\n  return (\n    <GraphiQLProvider fetcher={fetcher}>\n      <div className=\"graphiql-container\">Hello GraphQL</div>\n    </GraphiQLProvider>\n  );\n}\n```\n\nInside the provider you can now use any UI component provided by\n`@graphiql/react`. For example, you can render an operation editor like this:\n\n```jsx\nimport { QueryEditor } from '@graphiql/react';\n\nfunction MyGraphQLIDE() {\n  return (\n    <GraphiQLProvider fetcher={fetcher}>\n      <div className=\"graphiql-container\">\n        <QueryEditor />\n      </div>\n    </GraphiQLProvider>\n  );\n}\n```\n\nThe package also ships the necessary CSS that all its UI components need. You\ncan import them from `@graphiql/react/style.css`.\n\n> **Note**: In order for these styles to apply, the UI components need to be\n> rendered inside an element that has a class name `graphiql-container`.\n\nBy default, the UI components will try to use the\n[Roboto](https://fonts.google.com/specimen/Roboto) font for regular text and the\n[Fira Code](https://fonts.google.com/specimen/Fira+Code) font for mono-space\ntext. If you want to use the default fonts you can load them using these files:\n\n- `@graphiql/react/font/roboto.css`\n- `@graphiql/react/font/fira-code.css`.\n\nYou can, of course, use any other method to load these fonts (for example, loading\nthem from Google Fonts).\n\nFurther details on how to use `@graphiql/react` can be found in the reference\nimplementation of a GraphQL IDE - Graph*i*QL - in the\n[`graphiql` package](https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/components/GraphiQL.tsx).\n\n## Available Stores\n\nGraphiQL uses a set of state management stores, each responsible for a specific part of the IDE's\nbehavior. These stores contain all logic related to state management and can be accessed via custom\nReact hooks.\n\n### Core Hooks\n\n- **`useMonaco`**: Access `monaco-editor` exports and the `monaco-graphql` instance. Designed for safe use in SSR environments.\n- **`useGraphiQL`**: Access the current state.\n- **`useGraphiQLActions`**: Trigger actions that mutate the state. This hook **never** rerenders.\n\nThe `useGraphiQLActions` hook **exposes all actions** across store slices.\nThe `useGraphiQL` hook **provides access to the following store slices**:\n\n| Store Slice                              | Responsibilities                                                                                          |\n| ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| [`storage`](./src/stores/storage.ts)     | Provides a storage API that can be used to persist state in the browser (by default using `localStorage`) |\n| [`editor`](./src/stores/editor.ts)       | Manages **query**, **variables**, **headers**, and **response** editors and tabs                          |\n| [`execution`](./src/stores/execution.ts) | Handles the execution of GraphQL requests                                                                 |\n| [`plugin`](./src/stores/plugin.ts)       | Manages plugins and the currently active plugin                                                           |\n| [`schema`](./src/stores/schema.ts)       | Fetches, validates, and stores the GraphQL schema                                                         |\n| [`theme`](./src/stores/theme.ts)         | Manages the current theme and provides a method to update it                                              |\n\n### Usage Example\n\n```js\nimport { useGraphiQL, useGraphiQLActions } from '@graphiql/react';\n\n// Get an action to fetch the schema and an action to change theme\nconst { introspect, setTheme } = useGraphiQLActions();\n\n// Use a selector to access specific parts of the state like current schema and theme\nconst { schema, theme } = useGraphiQL(state => ({\n  schema: state.schema,\n  theme: state.theme,\n}));\n```\n\nAll store properties are documented using TSDoc comments. If you're using an\nIDE like VSCode for development, these descriptions will show up in auto-complete\ntooltips. All these descriptions can also be found in the\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html).\n\n## Theming\n\nAll the components from `@graphiql/react` have been designed with customization\nin mind. We achieve this using CSS variables.\n\nAll variables that are available for customization can be found in the\n[`root.css` file](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/src/style/root.css).\n\n### Colors\n\nColors are defined using the\n[HSL format](https://en.wikipedia.org/wiki/HSL_and_HSV). All CSS variables for\ncolors are defined as a list of the three values that make up HSL (hue,\nsaturation and lightness).\n\nThis approach allows `@graphiql/react` to use transparent colors by passing the\nvalue of the CSS variable in the `hsla` function. This enables us to provide\ntruly reusable UI elements where good contrasts are preserved regardless of the\nelements background.\n\n## Development\n\nIf you want to develop with `@graphiql/react` locally - in particular when\nworking on the `graphiql` package - all you need to do is run `pnpm dev` in the\npackage folder in a separate terminal. This will build the package using Vite.\nWhen using it in combination with `pnpm dev:graphiql` (running in the repo\nroot) this will give you auto-reloading when working on `graphiql` and\n`@graphiql/react` simultaneously.\n","packages/graphiql-toolkit/README.md":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-toolkit/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_toolkit.html)\n| [NPM](https://www.npmjs.com/package/@graphiql/toolkit) |\n[Discord](https://discord.gg/NP5vbPeUFp)\n\n# `@graphiql/toolkit`\n\nThis is a general purpose library for building GraphQL IDEs. It's being used by\nother packages like `graphiql` and `@graphiql/react` and also provides utilities\nthat are useful when working with these packages.\n\n## Docs\n\n- **[`createFetcher`](./docs/create-fetcher.md)** : a utility for creating a\n  `fetcher` prop implementation for HTTP GET, POST including multipart,\n  websockets fetcher\n- more to come!\n","packages/graphiql-toolkit/docs/create-fetcher.md":"# `createGraphiQLFetcher`\n\nA utility for generating a full-featured `fetcher` for GraphiQL including\n`@stream`, `@defer` `IncrementalDelivery`and `multipart` and subscriptions using\n`graphql-ws` or the legacy websockets protocol.\n\nUnder the hood, it uses [`graphql-ws`](https://www.npmjs.com/package/graphql-ws)\nclient and [`meros`](https://www.npmjs.com/package/meros) which act as client\nreference implementations of the\n[GraphQL over HTTP Working Group Spec](https://github.com/graphql/graphql-over-http)\nspecification, and the most popular transport spec proposals.\n\n## Setup\n\nYou can install `@graphiql/toolkit` using your favorite package manager:\n\n```bash\nnpm install @graphiql/toolkit\n```\n\n## Getting Started\n\nWe have a few flexible options to get you started with the client. It's meant to\ncover the majority of common use cases with a simple encapsulation.\n\n### Default HTTP/Multipart IncrementalDelivery Usage\n\nHere's a simple example. In this case, a websocket client isn't even\ninitialized, only http (with multipart `@stream` and `@defer` Incremental\nDelivery support of course!).\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n### Adding `graphql-ws` websockets subscriptions\n\nFirst you'll need to install `graphql-ws` as a peer dependency:\n\n```bash\nnpm install graphql-ws\n```\n\nJust by providing the `subscriptionUrl`, you can also generate a `graphql-ws`\nclient. This client now supports both HTTP/Multipart Incremental Delivery for\n`@defer` and `@stream`, _and_ websockets subscriptions.\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url, subscriptionUrl });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\nYou can further customize the `graphql-ws` implementation by creating a custom\nclient instance and providing it as the `wsClient` parameter.\n\n## Options\n\n### `url` (_required_)\n\nThis is url used for all `HTTP` requests, and for schema introspection.\n\n### `subscriptionUrl`\n\nThis generates a `graphql-ws` client using the provided url. Note that a server\nmust be compatible with the new `graphql-ws` subscriptions spec for this to\nwork.\n\n### `wsClient`\n\nProvide your own subscriptions client. Using this option bypasses\n`subscriptionUrl`. In theory, this could be any client using any transport, as\nlong as it matches `graphql-ws` `Client` signature.\n\n## `wsConnectionParams`\n\nProvide your initial connection params.\n\n```jsx\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://localhost:3000',\n  subscriptionUrl: 'https://localhost:3001',\n  wsConnectionParams: { Authorization: 'token 1234' },\n});\n\nconst App = () => {\n  return <GraphiQL fetcher={fetcher} />;\n};\n```\n\n### `legacyWsClient` or `legacyClient`\n\nProvide a legacy subscriptions client using `subscriptions-transport-ws`\nprotocol. Using this option bypasses `subscriptionUrl`. In theory, this could be\nany client using any transport, as long as it matches\n`subscriptions-transport-ws` `Client` signature.\n\n### `headers`\n\nSpecify headers that will be passed to all requests.\n\n### `fetch`\n\nPass a custom fetch implementation such as `isomorphic-fetch`.\n\n## Customization Examples\n\n### Custom `wsClient` Example using `graphql-ws`\n\nThis example passes a `graphql-ws` client to the `wsClient` option:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createClient } from 'graphql-ws';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  wsClient: createClient({\n    url: subscriptionUrl,\n    keepAlive: 2000,\n  }),\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n### Custom `legacyClient` Example\n\n(not recommended)\n\nBy providing the `legacyClient` you can support a `subscriptions-transport-ws`\nclient implementation, or equivalent:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { SubscriptionClient } from 'subscriptions-transport-ws';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  legacyWsClient: new SubscriptionClient(subscriptionUrl),\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\nNote that you will need to install the client separately:\n\n```bash\nnpm install subscriptions-transport-ws\n```\n\n### Custom `fetcher` Example\n\nFor SSR, we might want to use something like `isomorphic-fetch`:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { fetch } from 'isomorphic-fetch';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url, fetch });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n## Credits\n\nThis is originally inspired by `graphql-subscriptions-fetcher` created by @Urigo\n","packages/graphiql/README.md":"# GraphiQL\n\n> **Security Notice:** All versions of `graphiql` < `1.4.3` are vulnerable to an\n> XSS attack in cases where the GraphQL server to which the GraphiQL web app\n> connects is not trusted. Learn more in\n> [our security advisory](https://github.com/graphql/graphiql/tree/main/docs/security/2021-introspection-schema-xss.md).\n\n[![NPM](https://img.shields.io/npm/v/graphiql.svg)](https://npmjs.com/graphiql)\n![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/graphiql)\n![npm downloads](https://img.shields.io/npm/dm/graphiql?label=npm%20downloads)\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/graphiql)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/min/graphiql/latest)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/graphiql/latest)\n[![License](https://img.shields.io/npm/l/graphiql.svg?style=flat-square)](LICENSE)\n[![](https://dcbadge.vercel.app/api/server/NP5vbPeUFp?style=flat)](https://discord.gg/NP5vbPeUFp)\n\n_/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE.\n[Try the live demo](https://graphql.org/swapi-graphql).\n\n[![](resources/graphiql.png)](https://graphql.org/swapi-graphql)\n\n## Features\n\n- Full language support of the latest\n  [GraphQL Specification](https://spec.graphql.org/draft/#sec-Language):\n- Syntax highlighting\n- Intelligent type ahead of fields, arguments, types, and more\n- Real-time error highlighting and reporting for queries and variables\n- Automatic query and variables completion\n- Automatic leaf node insertion for non-scalar fields\n- Documentation explorer with search and markdown support\n- Persisted state using `localStorage`\n- Simple API for adding custom plugins\n\n## Live Demos\n\n- The [latest stable version](https://graphql.org/swapi-graphql)\n- The current state of the `main` branch:\n  - An [installable PWA](https://graphiql-test.netlify.com/webpack) with plugins ([source](../../examples//graphiql-webpack))\n  - Using the [minified bundles](https://graphiql-test.netlify.com)\n  - Using the [development bundles](https://graphiql-test.netlify.com/dev) (good\n    for inspecting, debugging, etc)\n- Each pull request will also get its own preview deployment on Netlify, you'll\n  find a link in the GitHub checks\n\n## Examples\n\n- [`CDN (ESM-based)`](../../examples/graphiql-cdn) - A single HTML file using [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) from http URLs and a `<script>` tag\n- [`Webpack`](../../examples/graphiql-webpack) - A starter for Webpack\n- [`Create React App`](../../examples/graphiql-create-react-app) - An example\n  using [Create React App](https://create-react-app.dev)\n- [`Parcel`](../../examples/graphiql-parcel) - An example using\n  [Parcel](https://parceljs.org)\n\n## Getting started\n\n- [Migration guide to GraphiQL 2](../../docs/migration/graphiql-2.0.0.md)\n- [Migration guide to GraphiQL 4](../../docs/migration/graphiql-4.0.0.md)\n- [Migration guide to GraphiQL 5](../../docs/migration/graphiql-5.0.0.md)\n\n### CDN usage\n\n#### ESM-based (recommended)\n\nUse the modern, ESM-based CDN approach.\nSee the [ESM-based example](../../examples/graphiql-cdn) for setup details.\n\n#### UMD (deprecated)\n\n> [!WARNING]\n>\n> The UMD CDN build is **deprecated** and will be removed in a future major release of GraphiQL.\n> Please migrate to the [ESM-based example](../../examples/graphiql-cdn).\n\n## Usage\n\n### Using as package\n\nThe `graphiql` package can be installed using your favorite package manager. You\nalso need to have `react`,`react-dom` and `graphql` installed which are peer\ndependencies of `graphiql`.\n\n```sh\nnpm install graphiql react react-dom graphql\n```\n\nThe package exports a bunch of React components:\n\n- The `GraphiQLProvider` components renders multiple context providers that\n  encapsulate all state management\n- The `GraphiQLInterface` component renders the UI that makes up GraphiQL\n- The `GraphiQL` component is a combination of both the above components\n\nThere is a single prop that is required for the `GraphiQL` component called\nfetcher. A fetcher is a function that performs a request to a GraphQL API. It\nmay return a `Promise` for queries or mutations, but also an `Observable` or an\n`AsyncIterable` in order to handle subscriptions or multipart responses.\n\nAn easy way to get create such a function is the\n[`createGraphiQLFetcher`](../graphiql-toolkit/src/create-fetcher/createFetcher.ts)\nmethod exported from the `@graphiql/toolkit` package. If you want to implement\nyour own fetcher function, you can use the `Fetcher` type from\n`@graphiql/toolkit` to make sure the signature matches what GraphiQL expects.\n\nThe following is everything you need to render GraphiQL in your React\napplication:\n\n```jsx\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { GraphiQL } from 'graphiql';\nimport { createRoot } from 'react-dom/client';\nimport 'graphiql/style.css';\n\nconst fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(<GraphiQL fetcher={fetcher} />);\n```\n\nWhen the connected server supports GraphQL.js 17 fragment arguments, opt in\nwith `<GraphiQL fetcher={fetcher} experimentalFragmentArguments />`. The syntax\nis disabled by default.\n\n## Customize\n\nGraphiQL supports customization in UI and behavior by accepting React props and\nchildren.\n\n### Props\n\nFor props documentation, see the\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops-1)\n\n### Children\n\nParts of the UI can be customized by passing children to the `GraphiQL` or the\n`GraphiQLInterface` component.\n\n- `<GraphiQL.Logo>`: Replace the GraphiQL logo with your own.\n\n- `<GraphiQL.Toolbar>`: Add a custom toolbar below the execution button. Pass\n  the empty `<GraphiQL.Toolbar />` if an empty toolbar is desired. Use the\n  components provided by `@graphiql/react` to create toolbar buttons with proper\n  styles.\n\n- `<GraphiQL.Footer>`: Add a custom footer shown below the response editor.\n\n### Plugins\n\nStarting with `graphiql@2` there exists a simple plugin API that allows you to\nbuild your own custom tools right into GraphiQL.\n\nThere are two built-in plugins that come with GraphiQL: The documentation\nexplorer and the query history. Both can be toggled using icons in the sidebar\non the left side of the screen. When opened, they appear next to the sidebar in\na resizable portion of the screen.\n\nTo define your own plugin, all you need is a JavaScript object with three\nproperties:\n\n- `title`: A unique title for the plugin (this will show up in a tooltip when\n  hovering over the sidebar icon)\n- `icon`: A React component that renders an icon which will be included in the\n  sidebar\n- `content`: A React component that renders the plugin contents which will be\n  shown next to the sidebar when opening the plugin\n\nYou can pass a list of plugin objects to the `GraphiQL` component using the\n`plugins` prop. You can also control the visibility state of plugins using the\n`visiblePlugin` prop and react to changes of the plugin visibility state using\nthe `onTogglePluginVisibility` prop.\n\nInside the component you pass to `content` you can interact with the GraphiQL\nstate using the hooks provided by `@graphiql/react`. For example, check out\nhow you can integrate the OneGraph Explorer in GraphiQL using the plugin API in\nthe [plugin package](../graphiql-plugin-explorer) in this repo.\n\n### Theming\n\nThe GraphiQL interface uses CSS variables for theming, in particular for colors.\nCheck out the [`root.css`](../graphiql-react/src/style/root.css) file for the\navailable variables.\n\nOverriding these variables is the only officially supported way of customizing\nthe appearance of GraphiQL. Starting from version 2, class names are no longer\nbe considered stable and might change between minor or patch version updates.\n\n### Editor Theme\n\nThe colors inside the editor can also be altered using\n[CodeMirror editor themes](https://codemirror.net/demo/theme.html). You can use\nthe `editorTheme` prop to pass in the name of the theme. The CSS for the theme\nhas to be loaded for the theme prop to work.\n\n```jsx\n// In your document head:\n<link\n  rel=\"stylesheet\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/solarized.css\"\n/>\n```\n\n```jsx\n// When rendering GraphiQL:\n<GraphiQL editorTheme=\"solarized light\" />\n```\n\nYou can also create your own theme in CSS. As a reference, the default\n`graphiql` theme definition can be found\n[here](../graphiql-react/src/style/codemirror.css).\n\n## Usage with a Custom Storage Namespace\n\nWhen multiple GraphiQL instances run on the same origin—such as in different apps or\nenvironments—they can conflict by reading from and writing to the same `localStorage` keys. To\nprevent this, you can provide a custom `storage` object that prefixes all keys with a unique\nnamespace, isolating each instance’s state and avoiding collisions.\n\n```tsx\nimport type { FC } from 'react';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });\n\nconst NAMESPACE = 'my-namespace';\n\nconst storage: typeof localStorage = {\n  ...localStorage,\n  getItem(key) {\n    return localStorage.getItem(`${NAMESPACE}:${key}`);\n  },\n  setItem(key, value) {\n    return localStorage.setItem(`${NAMESPACE}:${key}`, value);\n  },\n  removeItem(key) {\n    return localStorage.removeItem(`${NAMESPACE}:${key}`);\n  },\n};\n\nexport const App: FC = () => {\n  return <GraphiQL fetcher={fetcher} storage={myStorage} />;\n};\n```\n","packages/graphiql/test/README.md":"# Test GraphiQL Application\n\nThis test folder serves as a basis for testing in-development changes and offers\nwatching/compiling of the `src` folder. To utilize this, simply:\n\n1. Run `npm install`\n2. Run `npm run dev`\n3. Open your browser to the address listed in your console. e.g.\n   `Started on http://localhost:49811/`\n","packages/graphql-language-service-cli/README.md":"# graphql-language-service-cli\n\n> Note: As of 3.0.0, this package has been renamed from\n> `graphql-language-service` to `graphql-language-service-cli`. please now use\n> the `graphql-lsp` bin, instead of the `graphql` binary.\n\n[![NPM](https://img.shields.io/npm/v/graphql-language-service-cli.svg)](https://npmjs.com/graphql-language-service-cli)\n![npm downloads](https://img.shields.io/npm/dm/graphql-language-service-vli?label=npm%20downloads)\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/codemirror-graphql)\n[![License](https://img.shields.io/npm/l/graphql-language-service.svg?style=flat-square)](LICENSE)\n\n_We welcome your feedback and suggestions._\n\nGraphQL Language Service provides an interface for building GraphQL language\nservices for IDEs.\n\nAlmost 100% for\n[Microsoft's Language Server Protocol](https://github.com/Microsoft/language-server-protocol)\nis in place\n\nSupported features include:\n\n- Diagnostics (GraphQL syntax linting/validations) (**spec-compliant**)\n- Autocomplete suggestions (**spec-compliant**)\n- Hyperlink to fragment definitions and named types (type, input, enum)\n  definitions (**spec-compliant**)\n- Outline view support for queries and SDL\n- Symbols support across the workspace\n\nsee more information at\n[`graphql-language-service-server`](https://npmjs.com/graphql-language-service-server)\n\n## Installation and Usage\n\n### Dependencies\n\nAn LSP-compatible client with a file watcher that sends watch notifications to\nthe server.\n\n**DROPPED**: GraphQL Language Service no longer depends on\n[Watchman](https://facebook.github.io/watchman/)\n\nOnly node 9 or greater, and npm or yarn are required dependencies.\n\n### Installation\n\nwith `yarn`:\n\n```sh\nyarn global add graphql-language-service-cli\n```\n\nwith `npm`:\n\n```sh\nnpm install -g graphql-language-service-cli\n```\n\neither will install the `graphql-lsp` bin globally\n\n### GraphQL configuration file (`.graphqlrc.yml`)\n\nCheck out [graphql-config](https://graphql-config.com/docs)\n\nThe custom graphql language configurations are:\n\n- `customDirectives` - `['@myExampleDirective']`\n- `customValidationRules` - returns rules array with parameter\n  `ValidationContext` from `graphql/validation`\n\n### LSP Workspace Configuration\n\nWhen running `server`, your LSP-compatible client can\n[provide additional workspace configuration](https://npmjs.com/graphql-language-service-server#workspace-configuration).\n\nFor example, `coc.nvim` allows for providing custom `settings`\n\n```json\n\"languageserver\": {\n  \"graphql\": {\n    \"command\": \"graphql-lsp\",\n    \"args\": [\"server\", \"-m\", \"stream\"],\n    // customize filetypes to your needs\n    \"filetypes\": [\"typescript\", \"typescriptreact\", \"graphql\"],\n    \"settings\": {\n        \"graphql-config.load.legacy\": true\n    }\n  }\n}\n```\n\nthis would allow for legacy `graphql-config` file formats like `.graphqlconfig`,\nuseful on projects maintaining compatibility with the intellij plugin\n\n### Using the command-line interface\n\n```sh\ngraphql-lsp server --schema=localhost:3000\n```\n\nThe node executable contains several commands: `server` and the command-line\nlanguage service methods (`validate`, `autocomplete`, `outline`).\n\n### CLI Options\n\n```\nUsage: graphql-lsp <command> <file>\n\n[-h | --help][-c | --configDir] {configDir}\n[-t | --text] {textBuffer}\n[-f | --file] {filePath}\n[-s | --schema] {schemaPath}\n\nOptions:\n\n-h, --help Show help [boolean]\n\n-t, --text Text buffer to perform GraphQL diagnostics on.\nWill defer to --file option if omitted.\nOverrides the --file option, if any.\n[string]\n\n-f, --file File path to perform GraphQL diagnostics on.\nWill be ignored if --text option is supplied.\n[string]\n\n--row A row number from the cursor location for GraphQL\nautocomplete suggestions.\nIf omitted, the last row number will be used.\n[number]\n\n--column A column number from the cursor location for GraphQL\nautocomplete suggestions.\nIf omitted, the last column number will be used.\n[number]\n\n-c, --configDir Path to the .graphqlrc.yml configuration file.\nWalks up the directory tree from the provided config\ndirectory, or the current working directory, until a\n.graphqlrc is found or the root directory is found.\n[string]\n\n-s, --schemaPath a path to schema DSL file\n[string]\n\nAt least one command is required.\nCommands: \"server, validate, autocomplete, outline\"\n\n```\n","packages/graphql-language-service-server/README.md":"# graphql-language-service-server\n\n[![NPM](https://img.shields.io/npm/v/graphql-language-service-server.svg?style=flat-square)](https://npmjs.com/graphql-language-service-server)\n![npm downloads](https://img.shields.io/npm/dm/graphql-language-service-server?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/graphql-language-service-server.svg?style=flat-square)](LICENSE)\n\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service_server.html)\n| [Discord Channel](https://discord.gg/PXaRYrpgK4)\n\nServer process backing the\n[GraphQL Language Service](https://github.com/graphql/graphiql/tree/main/packages/graphql-language-service).\n\nGraphQL Language Service Server provides an interface for building GraphQL\nlanguage services for IDEs.\n\nPartial support for\n[Microsoft's Language Server Protocol](https://github.com/Microsoft/language-server-protocol)\nis in place, with more to come in the future.\n\nSupported features include:\n\n- Diagnostics (GraphQL syntax linting/validations) (**spec-compliant**)\n- Autocomplete suggestions (**spec-compliant**)\n- Hyperlink to fragment definitions and named types (type, input, enum)\n  definitions (**spec-compliant**)\n- Outline view support for queries\n- Support for `gql` `graphql` and other template tags inside javascript,\n  typescript, jsx, ts, vue and svelte files, and an interface to allow custom\n  parsing of all files.\n\n## Installation and Usage\n\n### Dependencies\n\n- An LSP compatible client with its own file watcher, that sends watch\n  notifications to the server, such as vscode, nvim, or sublime-lsp.\n- Node.js `^18.18.0 || >=20.9.0` or later is required.\n- (for now) a graphql config file is required\n\n### Installation\n\n```bash\nnpm install graphql-language-service-server\n# or\nyarn add graphql-language-service-server\n```\n\nWe also provide a CLI interface to this server, see\n[`graphql-language-service-cli`](../graphql-language-service-cli/)\n\n### Usage\n\nInitialize the GraphQL Language Server with the `startServer` function:\n\n```ts\nimport { startServer } from 'graphql-language-service-server';\n\nawait startServer({\n  method: 'node',\n});\n```\n\nIf you are developing a service or extension, this is the LSP language server\nyou want to run.\n\nWhen developing vscode extensions, just the above is enough to get started for\nyour extension's `ServerOptions.run.module`, for example.\n\n`startServer` function takes the following parameters:\n\n| Parameter      | Required                                             | Description                                                                       |\n| -------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------- |\n| port           | `true` when method is `socket`, `false` otherwise    | port for the LSP server to run on                                                 |\n| method         | `false`                                              | `socket`, `streams`, or `node` (ipc)                                              |\n| config         | `false`                                              | custom `graphql-config` instance from `loadConfig` (see example above)            |\n| configDir      | `false`                                              | the directory where graphql-config is found                                       |\n| extensions     | `false`                                              | array of functions to transform the graphql-config and add extensions dynamically |\n| parser         | `false`                                              | Customize _all_ file parsing by overriding the default `parseDocument` function   |\n| fileExtensions | `false`. defaults to `['.js', '.ts', '.tsx, '.jsx']` | Customize file extensions used by the default LSP parser                          |\n\n### GraphQL configuration file\n\nYou _must_ provide a graphql config file\n\nCheck out [graphql-config](https://graphql-config.com/introduction) to learn the\nmany ways you can define your graphql config\n\n#### `.graphqlrc` or `.graphqlrc.yml/yaml` or `graphql.config.yml`\n\n```yaml\nschema: 'packages/api/src/schema.graphql'\ndocuments: 'packages/app/src/components/**/*.{tsx,ts}'\nextensions:\n  endpoints:\n    example:\n      url: 'http://localhost:8000'\n  customExtension:\n    foo: true\n```\n\n#### `.graphqlrc` or `.graphqlrc.json` or `graphql.config.json`\n\n```json\n{\n  \"schema\": \"https://localhost:8000\"\n}\n```\n\n#### `graphql.config.js` or `.graphqlrc.js`\n\n```js\nmodule.exports = { schema: 'https://localhost:8000' };\n```\n\n#### custom `startServer`\n\nuse graphql config [`loadConfig`](https://graphql-config.com/load-config) for\nfurther customization:\n\n```ts\nimport { loadConfig } from 'graphql-config'; // 3.0.0 or later!\n\n// with required params\nconst config = await loadConfig();\n\nawait startServer({\n  method: 'node',\n  // or instead of configName, an exact path (relative from rootDir or absolute)\n\n  // deprecated for: loadConfigOptions.rootDir. root directory for graphql config file(s), or for relative resolution for exact `filePath`. default process.cwd()\n  // configDir: '',\n  loadConfigOptions: {\n    // any of the options for graphql-config@3 `loadConfig()`\n    schema: await config.getSchema(),\n    // rootDir is same as `configDir` before, the path where the graphql config file would be found by cosmic-config\n    rootDir: 'config/',\n    // or - the relative or absolute path to your file\n    filePath: 'exact/path/to/config.js', // (also supports yml, json, ts, toml)\n    // myPlatform.config.js/json/yaml works now!\n    configName: 'myPlatform',\n  },\n});\n```\n\n<span id=\"custom-graphql-config\" />\n\n#### Custom `graphql-config` features\n\nThe graphql-config features we support are:\n\n```js\nmodule.exports = {\n  extensions: {\n    // add customDirectives (legacy). you can now provide multiple schema pointers to config.schema/project.schema, including inline strings. same with scalars or any SDL type that you'd like to append to the schema\n    customDirectives: ['@myExampleDirective'],\n    // a function that returns an array of validation rules, ala https://github.com/graphql/graphql-js/tree/main/src/validation/rules\n    // note that this file will be loaded by the vscode runtime, so the node version and other factors will come into play\n    customValidationRules: require('./config/customValidationRules'),\n    schemaCacheTTL: 1000, // reduce or increase minimum schema cache lifetime from 30000ms (30 seconds). you may want to reduce this if you are developing fullstack with network schema\n    languageService: {\n      // this is enabled by default if non-local files are specified in the project `schema`\n      // NOTE: this will disable all definition lookup for local SDL files\n      cacheSchemaFileForLookup: true,\n      // undefined by default which has the same effect as `true`, set to `false` if you are already using // `graphql-eslint` or some other tool for validating graphql in your IDE. Must be explicitly `false` to disable this feature, not just \"falsy\"\n      enableValidation: true,\n      // (experimental) enhanced auto expansion of graphql leaf fields and arguments\n      fillLeafsOnComplete: true,\n      // enable GraphQL.js 17 experimental fragment arguments across language features\n      experimentalFragmentArguments: true,\n      // instead of jumping directly to the SDL file, you can override definition peek/jump results to point to different files or locations\n      // (for example, source files for your schema in any language!)\n      // based on Relay vscode's pathToLocateCommand\n      // see LocateCommand type!\n      locateCommand(projectName, typePath, info) {\n        // pass more info, such as GraphQLType with the ast node. info.project is also available if you need it\n        const { path, range } = ourLookupUtility(\n          projectName,\n          typePath,\n          info.type.node,\n        );\n        return { uri: path, range }; // range.start.line/range.end.character/etc, base 1\n        // you can also return relay LSP style\n        // return '/path/to/file.py:20:1'; // (range: 20:1 20:1 )\n        // return '/path/to/file.py'; // (range: 1:1 1:1)\n      },\n    },\n  },\n};\n```\n\nor for multi-project workspaces:\n\n```ts\n// graphql.config.ts\nexport default {\n  projects: {\n    myProject: {\n      schema: [\n        // internally in `graphql-config`, an attempt will be made to combine these schemas into one in-memory schema to use for validation, lookup, etc\n        'http://localhost:8080',\n        './my-project/schema.graphql',\n        './my-project/schema.ts',\n        '@customDirective(arg: String!)',\n        'scalar CustomScalar',\n      ],\n      // project specific defaults\n      extensions: {\n        languageService: {\n          cacheSchemaFileForLookup: true,\n          enableValidation: false,\n        },\n      },\n    },\n    anotherProject: {\n      schema: {\n        'http://localhost:8081': {\n          customHeaders: { Authorization: 'Bearer example' },\n        },\n      },\n    },\n  },\n  // global defaults for all projects\n  extensions: {\n    languageService: {\n      cacheSchemaFileForLookup: false,\n      enableValidation: true,\n    },\n  },\n};\n```\n\nYou can specify any of these settings globally as above, or per project. Read\nthe graphql-config docs to learn more about this!\n\nFor secrets (headers, urls, etc), you can import `dotenv()` and set a base path\nas you wish in your `graphql-config` file to pre-load `process.env` variables.\n\n### Troubleshooting notes\n\n- you may need to manually restart the language server for some of these\n  configurations to take effect\n- graphql-config's multi-project support is not related to multi-root workspaces\n  in vscode - in fact, each workspace can have multiple graphql config projects,\n  which is what makes multi-root workspaces tricky to support. coming soon!\n\n<span id=\"workspace-configuration\" />\n\n### Workspace Configuration\n\nThe LSP Server reads config by sending `workspace/configuration` method when it\ninitializes.\n\nNote: We still do not support LSP multi-root workspaces but will tackle this\nvery soon!\n\nMany LSP clients beyond vscode offer ways to set these configurations, such as\nvia `initializationOptions` in nvim.coc. The options are mostly designed to\nconfigure graphql-config's load parameters, the only thing we can't configure\nwith graphql config. The final option can be set in `graphql-config` as well\n\n| Parameter                                 | Default                                           | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `graphql-config.load.baseDir`             | workspace root or process.cwd()                   | the path where graphql config looks for config files                                                                                                                                                                                                                                                |\n| `graphql-config.load.filepath`            | `null`                                            | exact filepath of the config file.                                                                                                                                                                                                                                                                  |\n| `graphql-config.load.configName`          | `graphql`                                         | config name prefix instead of `graphql`                                                                                                                                                                                                                                                             |\n| `graphql-config.load.legacy`              | `true`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `graphql-config.dotEnvPath`               | `null`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `vscode-graphql.cacheSchemaFileForLookup` | `true` if `schema` contains non-SDL files or URLs | generate an SDL file based on your graphql-config schema configuration for definition lookup and other features. enabled by default when your `schema` config are URLs or introspection JSON, or if you have any non-local SDL files in `schema`                                                    |\n| `vscode-graphql.schemaCacheTTL`           | `30000`                                           | an integer value in milliseconds for the desired minimum cache lifetime for all schemas, which also causes the generated file to be re-written. set to 30s by default. effectively a \"lazy\" form of polling. if you are developing a schema alongside client queries, you may want to decrease this |\n| `vscode-graphql.debug`                    | `false`                                           | show more verbose log output in the output channel                                                                                                                                                                                                                                                  |\n\nall the `graphql-config.load.*` configuration values come from static\n`loadConfig()` options in graphql config.\n\n(more coming soon!)\n\n### Architectural Overview\n\nGraphQL Language Service currently communicates via Stream transport with the\nIDE server. GraphQL server will receive/send RPC messages to perform language\nservice features, while caching the necessary GraphQL artifacts such as fragment\ndefinitions, GraphQL schemas etc. More about the server interface and RPC\nmessage format below.\n\nThe IDE server should launch a separate GraphQL server with its own child\nprocess for each `.graphqlrc.yml` file the IDE finds (using the nearest ancestor\ndirectory relative to the file currently being edited):\n\n```\n./application\n\n  ./productA\n    .graphqlrc.yml\n    ProductAQuery.graphql\n    ProductASchema.graphql\n\n  ./productB\n    .graphqlrc.yml\n    ProductBQuery.graphql\n    ProductBSchema.graphql\n```\n\nA separate GraphQL server should be instantiated for `ProductA` and `ProductB`,\neach with its own `.graphqlrc.yml` file, as illustrated in the directory\nstructure above.\n\nThe IDE server should manage the lifecycle of the GraphQL server. Ideally, the\nIDE server should spawn a child process for each of the GraphQL Language Service\nprocesses necessary, and gracefully exit the processes as the IDE closes. In\ncase of errors or a sudden halt the GraphQL Language Service will close as the\nstream from the IDE closes.\n\n### Server Interface\n\nGraphQL Language Server uses [JSON-RPC](http://www.jsonrpc.org/specification) to\ncommunicate with the IDE servers. Microsoft's language server currently supports\ntwo communication transports: Stream (stdio) and IPC. For IPC transport, the\nreference guide to be used for development is\n[the language server protocol](https://microsoft.github.io/language-server-protocol/specification)\ndocumentation.\n\nFor each transport, there is a slight difference in JSON message format,\nespecially in how the methods to be invoked are defined - below are the\ncurrently supported methods for each transport (will be updated as progress is\nmade):\n\n|                      | Stream                       | IPC                                         |\n| -------------------: | ---------------------------- | ------------------------------------------- |\n|          Diagnostics | `getDiagnostics`             | `textDocument/publishDiagnostics`           |\n|       Autocompletion | `getAutocompleteSuggestions` | `textDocument/completion`                   |\n|              Outline | `getOutline`                 | `textDocument/outline`                      |\n|     Document Symbols | `getDocumentSymbols`         | `textDocument/symbols`                      |\n|    Workspace Symbols | `getWorkspaceSymbols`        | `workspace/symbols`                         |\n|     Go-to definition | `getDefinition`              | `textDocument/definition`                   |\n| Workspace Definition | `getWorkspaceDefinition`     | `workspace/definition`                      |\n|          File Events | Not supported yet            | `didOpen/didClose/didSave/didChange` events |\n","packages/graphql-language-service/README.md":"# `graphql-language-service`\n\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service.html)\n| [Discord](https://discord.gg/wkQCKwazxj)\n\n> **Note**: Still mostly experimental, however it depends mostly on stable\n> libraries. **Migration Note**: As of 3.0.0, the LSP Server command line\n> interface has been moved to\n> [`graphql-language-service-cli`](../graphql-language-service-cli)\n\n## Purpose\n\nThis package brings together all the dependencies for building out web or\ndesktop IDE services for the GraphQL Language.\n\nIt is named as such to match the convention of other vscode language services.\n\n## Interface\n\nLanguage Service Protocol (LSP) methods written in TypeScript used by\n[`graphql-language-service-server`](https://github.com/graphql/graphiql/tree/main/packages/graphql-language-service-server),\n[`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql)\nand\n[`codemirror-graphql`](https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql).\n\nThe goal is to provide methods for creating\n[Language Server Protocol](https://langserver.org) compliant services to be used\nby an IDE plugin, a browser application or desktop application.\n\n## Parser\n\nA standalone online, immutable, dependency-free parser for\n[GraphQL](https://graphql.org), used by the LSP interface methods.\n\nWith GraphQL.js 17, fragment variable definitions and fragment spread arguments\ncan be enabled for parsing, diagnostics, outlines, operation facts, autocomplete,\nand hover information. Pass `experimentalFragmentArguments: true` through the\nrelevant language-service options. The feature defaults to `false` because the\nconnected GraphQL server must also support the experimental syntax.\n\n## Utils\n\nVarious utilities\n","packages/monaco-graphql/README.md":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service_server.html)\n| [Discord Channel](https://discord.gg/r4BxrAG6fN)\n\nGraphQL language plugin for the Monaco Editor. You can use it to build\nvscode/codespaces-like web or desktop IDEs using whatever frontend javascript\nlibraries or frameworks you want, or none!\n\n- [webpack example](https://github.com/graphql/graphiql/tree/main/examples/monaco-graphql-webpack/)\n  using plain javascript, shows how to change schemas\n- [vite + react example](https://stackblitz.com/edit/monaco-graphql-react-vite?file=src%2FApp.tsx&terminal=dev) -\n  minimal example with variables (C)JSON support using react\n- [live demo](https://monaco-graphql.netlify.com) of the monaco webpack example\n  (prompts for GitHub access token!)\n\n> **NOTE:** This is in pre-release state as we build towards GraphiQL 2.0.x.\n> [`codemirror-graphql`](https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql)\n> has more features (such as JSON variables validation) and is more stable.\n\n## Features\n\nIt provides the following features while editing GraphQL files:\n\n- Configurable multi-model, multi-schema language worker with `fileMatch`\n  expressions\n- Code completion (schema driven) for Operation and SDL types\n  - Automatic expansion & completion on leaf type completion\n- Hover (schema driven) with markdown support\n- Validation (schema driven)\n- JSON Variables validation and language features (schema driven)\n- Formatting - using prettier\n- Syntax Highlighting & Basic Languages provided by `monaco-editor` basic\n  languages support\n- Configurable formatting options\n- Providing external fragments\n- create custom workers for custom language service options - parser, validation\n  rules, schemaBuilder, etc\n\n## Usage\n\nFor now, we use `language` id of `graphql` until we can ensure we can dovetail\nnicely with the official `graphql` language ID.\n\nTo use with webpack, here is an example to get you started:\n\n```sh\nyarn add monaco-graphql\n```\n\n## Sync Example\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport { initializeMode } from 'monaco-graphql/initializeMode'; // `monaco-graphql/esm/initializeMode` is deprecated but still works\n\n// you can also configure these using the webpack or vite plugins for `monaco-editor`\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\n// instantiates the worker & language features with the schema!\nconst MonacoGraphQLAPI = initializeMode({\n  // Opt in only when the connected server supports fragment arguments.\n  experimentalFragmentArguments: true,\n  schemas: [\n    {\n      schema: myGraphqlSchema as GraphQLSchema,\n      // anything that monaco.URI.from() is compatible with\n      uri: 'https://my-schema.com',\n      uri: '/my-schema.graphql',\n      // match the monaco file uris for this schema.\n      // accepts specific uris and anything `picomatch` supports.\n      // (everything except bracket regular expressions)\n      fileMatch: ['**/*.graphql'],\n      // note: not sure if ^ works if the graphql model is using urls for uris?\n    },\n  ],\n});\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    // if you are using vite or webpack plugin, it will be found here\n    return new Worker('editor.worker.js');\n  },\n};\nmonaco.editor.create(document.getElementById('someElementId'), {\n  value: 'query { }',\n  language: 'graphql',\n  formatOnPaste: true,\n});\n```\n\n## Lazy Example\n\nThe existing API works as before in terms of instantiating the schema.\nTo avoid manually calling getWorker(), you can use the monaco editor plugins for webpack or vite (see examples, and below)\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n// enables our language worker right away, despite no schema\nimport 'monaco-graphql';\n\n// you can also configure these using the webpack or vite plugins for `monaco-editor`\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\n// lazily invoke the api config methods whenever we want!\nmonaco.languages.graphql.setSchemaConfig([\n  {\n    schema: myGraphqlSchema as GraphQLSchema,\n    // anything that monaco.URI.from() is compatible with\n    uri: 'https://my-schema.com',\n    uri: '/my-schema.graphql',\n    // match the monaco file uris for this schema.\n    // accepts specific uris and anything `picomatch` supports.\n    // (everything except bracket regular expressions)\n    fileMatch: ['**/*.graphql'],\n    // note: not sure if ^ works if the graphql model is using urls for uris?\n  },\n]);\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    return new Worker('editor.worker.js');\n  },\n};\nmonaco.editor.create(document.getElementById('someElementId'), {\n  value: 'query { }',\n  language: 'graphql',\n  formatOnPaste: true,\n});\n```\n\nThis will cover the basics, making an HTTP POST with the default\n`introspectionQuery()` operation. To customize the entire fetcher, see\n[advanced customization](<>) below. For more customization options, see the\n[Monaco Editor API Docs](https://microsoft.github.io/monaco-editor/api/index.html)\n\n## Advanced Usage\n\n### Variables JSON Support!\n\nIn `monaco-graphql@0.5.0` we introduced a method `getVariablesJSONSchema` that\nallows you to retrieve a `JSONSchema` description for the declared variables for\nany given set of operations\n\n## Full Sync Demo with Variables JSON\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    return new Worker('editor.worker.js');\n  },\n};\n\n// the language service will be instantiated once the schema is available\nconst MonacoGraphQLAPI = initializeMode({\n  schemas: [\n    {\n      // anything that monaco.URI.from() is compatible with\n      uri: 'https://my-schema.com',\n      // match the monaco file uris for this schema.\n      // accepts specific filenames and anything `picomatch` supports.\n      fileMatch: ['**/*.graphql'],\n      schema: myGraphqlSchema as GraphQLSchema,\n    },\n  ],\n});\n\nconst operationModel = monaco.editor.createModel(\n  'query {}',\n  'graphql',\n  '/operation.graphql',\n);\n\nconst operationEditor = monaco.editor.create(\n  document.getElementById('someElementId'),\n  {\n    model: operationModel,\n    language: 'graphql',\n    formatOnPaste: true,\n  },\n);\n\nconst variablesSchemaUri = monaco.editor.URI.file('/variables-schema.json');\n\nconst variablesModel = monaco.editor.createModel(\n  '{}',\n  'json',\n  '/variables.json',\n);\n\nconst variablesEditor = monaco.editor.create(\n  document.getElementById('someElementId'),\n  {\n    model: variablesModel,\n    language: 'graphql',\n    formatOnPaste: true,\n  },\n);\n\n// high-level method for configuring json variables validation\nMonacoGraphQLAPI.setDiagnosticSettings({\n  validateVariablesJson: {\n    // Urls, uris, anything that monaco.URI.from() is compatible with.\n    // Match operation model to variables editor,\n    // and the language service will automatically listen for changes,\n    // and compute the json schema using the GraphQLWorker.\n    // This is in the main process is applied to the global monaco json settings\n    // for validation, completion and more using monaco-json's built-in JSON Schema support.\n    [operationModel.uri.toString()]: [variablesModel.uri.toString()],\n  },\n  jsonDiagnosticSettings: {\n    allowComments: true, // allow json, parse with a jsonc parser to make requests\n  },\n});\n\nMonacoGraphQL.setCompletionSettings({\n  // this auto-fills NonNull leaf fields\n  // it used to be on by default, but is annoying when\n  // fields contain required argument.\n  // hoping to fix that soon!\n  __experimental__fillLeafsOnComplete: true,\n});\n```\n\nYou can also experiment with the built-in `jsonc`? (JSON\nsyntax that allows comments and trailing commas, for `tsconfig.json`, etc.) and the 3rd party `monaco-yaml` language modes\nfor completion of other types of variable input. you can also experiment with\neditor methods to parse detected input into different formats, etc (`yaml`\npastes as `json`, etc.)\n\nYou could of course prefer to generate a `jsonschema` form for variables input\nusing a framework of your choice, instead of an editor. Enjoy!\n\n## `monaco-graphql/lite`\n\nYou can also import a \"lite\" version, and manually enable only the monaco features you want!\n\nWarning: by default, completion and other features will not work, only highlighting and validation.\n\n```ts\nimport { initializeMode } from 'monaco-graphql/lite';\n\n// enable completion\nimport 'monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution';\n\nconst api = initializeMode({\n  schemas: [\n    {\n      // anything that monaco.URI.from() is compatible with\n      uri: 'schema.graphql',\n      // match the monaco file uris for this schema.\n      // accepts specific filenames and anything `picomatch` supports.\n      fileMatch: ['operation.graphql'],\n      schema: myGraphqlSchema as GraphQLSchema,\n    },\n  ],\n});\n```\n\n## `MonacoGraphQLAPI` ([typedoc](https://graphiql-test.netlify.app/typedoc/classes/monaco_graphql.monacoMonacoGraphQLAPI.html))\n\nIf you call any of these API methods to modify the language service\nconfiguration at any point at runtime, the webworker will reload relevant\nlanguage features.\n\nIf you `import 'monaco-graphql'` synchronously, you can access the api via\n`monaco.languages.graphql.api`.\n\n```ts\nimport 'monaco-graphql';\n// now the api will be available on the `monaco.languages` global\nconst { api } = monaco.languages.graphql;\n```\n\n```ts\nimport 'monaco-graphql';\n\n// also this\nimport { languages } from 'monaco-editor';\n// now the api will be available on the `monaco.languages` global\nconst { api } = languages.graphql;\n```\n\nOtherwise, you can, like in the sync demo above:\n\n```ts\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nconst api = initializeMode(config);\n```\n\n### `monaco.languages.graphql.api.setSchemaConfig([SchemaConfig])`\n\nsame as the above, except it overwrites the entire schema config.\n\nyou can provide multiple, and use `fileMatch` to map to various uri \"directory\"\nglobs or specific files. `uri` can be an url or file path, anything parsable\n\n```ts\n// you can load it lazily\nimport 'monaco-graphql';\n\nmonaco.languages.graphql.api.setSchemaConfig([\n  {\n    schema: GraphQLSchema,\n    fileMatch: ['**/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n]);\n```\n\nor you can load the language features only when you have your schema\n\n```ts\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nconst schemas = [\n  {\n    schema: GraphQLSchema,\n    fileMatch: ['operations/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n];\nconst api = initializeMode({ schemas });\n\n// add another schema. this will cause language workers and features to reset\napi.setSchemaConfig([\n  ...schemas,\n  {\n    introspectionJSON: myIntrospectionJSON,\n    fileMatch: ['specific/monaco/uri.graphql'],\n    uri: 'another-schema.graphql',\n  },\n]);\n```\n\nor if you want, replace the entire configuration with a single schema. this will\ncause the worker to be entirely re-created and language services reset\n\n```ts\napi.setSchemaConfig([\n  {\n    introspectionJSON: myIntrospectionJSON,\n    fileMatch: ['**/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n]);\n```\n\n### `monaco.languages.graphql.api.setModeConfiguration()`\n\nThis is where you can toggle monaco language features. all are enabled by\ndefault.\n\n```ts\nmonaco.languages.graphql.api.setModeConfiguration({\n  documentFormattingEdits: true,\n  completionItems: true,\n  hovers: true,\n  documentSymbols: true,\n  diagnostics: true,\n});\n```\n\n### `monaco.languages.graphql.api.setFormattingOptions()`\n\nthis accepts an object `{ prettierConfig: prettier.Options }`, which accepts\n[any prettier option](https://prettier.io/docs/en/options.html). it will not\nre-load the schema or language features, however the new prettier options will\ntake effect.\n\nthis method overwrites the previous configuration, and will only accept static\nvalues that can be passed between the main/worker process boundary.\n\n```ts\nmonaco.languages.graphql.api.setFormattingOptions({\n  // if you wanna be like that\n  prettierOptions: { tabWidth: 2, useTabs: true },\n});\n```\n\n### `monaco.languages.graphql.api.setExternalFragmentDefinitions()`\n\nAppend external fragments to be used by autocomplete and other language\nfeatures.\n\nThis accepts either a string that contains fragment definitions, or\n`TypeDefinitionNode[]`\n\n### `monaco.languages.graphql.api.getDiagnosticOptions`\n\n```ts\nmonaco.languages.graphql.api.setDiagnosticSettings({\n  validateVariablesJson: {\n    // Urls, uris, anything that monaco.URI.from() is compatible with.\n    // Match operation model to variables editor,\n    // and the language service will automatically listen for changes,\n    // and compute the json schema using the GraphQLWorker.\n    // This is in the main process is applied to the global monaco json settings\n    // for validation, completion and more using monaco-json's built-in JSON Schema support.\n    [operationModel.uri.toString()]: [variablesModel.uri.toString()],\n  },\n  jsonDiagnosticSettings: {\n    allowComments: true, // allow json, parse with a jsonc parser to make requests\n  },\n});\n```\n\n## Bundlers\n\n### Webpack\n\nyou'll can refer to the webpack configuration in the\n[full monaco webpack example](/examples/monaco-graphql-webpack#readme) to see\nhow it works with webpack and the official `monaco-editor-webpack-plugin`. there\nis probably an easier way to configure webpack `worker-loader` for this.\n\n**Notes:**\n\n- for additional features, please specify them in `features` for the webpack plugin, or import them directly\n- if you are trying to add `typescript` as a language, there is an outstanding [bug with the webpack plugin](https://github.com/microsoft/monaco-editor/issues/2738), see our [next.js example](../../examples/monaco-graphql-nextjs/next.config.js) for the workaround. do not specify `languages: ['typescript']` or `javascript`\n\n### Vite\n\nYou can configure vite to load `monaco-editor` json mode and even the language\neditor worker using\n[the example for our mode](https://github.com/vdesjs/vite-plugin-monaco-editor#options)\n\nBe sure to import additional editor features and language modes manually, as the vite plugin only allows you to specify `languageWorkers`.\nSee the vite example to see how to add typescript support\n\n## Web Frameworks\n\nthe plain javascript\n[webpack example](https://github.com/graphql/graphiql/tree/main/examples/monaco-graphql-webpack/)\nshould give you a starting point to see how to implement it with\n\n### React\n\n- [`use-monaco`](https://www.npmjs.com/package/use-monaco) seems to support the\n  custom language worker configuration we want, and seems to be well built! we\n  hope to help them build their\n- when loading it yourself, either dynamic import the mode and/or instantiate it\n  yourself using `useEffect` on `didMount` to prevent breaking SSR.\n- it may work with other libraries by using a similar strategy to\n  [this](https://github.com/graphql/graphiql/blob/9df315b44896efa313ed6744445fc8f9e702ebc3/examples/monaco-graphql-webpack/src/editors.ts#L15).\n  you can also provide `MonacoEnvironment.getWorkerUrl` which works better as an\n  async import of your pre-build worker files\n\n## Custom Webworker (for passing non-static config to worker)\n\nIf you want to pass a custom parser and/or validation rules, it is supported,\nhowever the setup is a bit more complicated.\n\nYou can add any `LanguageServiceConfig`\n([typedoc](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service.html#graphqllanguageconfig-1))\nconfiguration options you like here to `languageConfig` as below.\n\nThis is because we can't pass non-static configuration to the existing worker\nprogrammatically, so you must import these and build the worker custom with\nthose functions. Part of the (worthwhile) cost of crossing runtimes!\n\nyou'll want to create your own `my-graphql.worker.ts` file, and add your custom\nconfig such as `schemaLoader` to `createData`:\n\n```ts\n// my-graphql.worker.ts\nimport type * as monaco from 'monaco-editor';\nimport type { ICreateData } from 'monaco-graphql';\n// @ts-expect-error -- ignore missing types\nimport { initialize } from 'monaco-editor/esm/vs/editor/editor.worker';\nimport { GraphQLWorker } from 'monaco-graphql/esm/GraphQLWorker';\nimport { GraphQLError, ValidationRule } from 'graphql';\n\nconst RequireOperationNameRule: ValidationRule = context => {\n  return {\n    OperationDefinition(node) {\n      if (node.name) {\n        return;\n      }\n      context.reportError(\n        new GraphQLError('Oops, all operations must be named.', {\n          nodes: [node],\n        }),\n      );\n    },\n  };\n};\n\nglobalThis.onmessage = () => {\n  initialize((ctx: monaco.worker.IWorkerContext, createData: ICreateData) => {\n    createData.languageConfig.customValidationRules = [\n      RequireOperationNameRule,\n    ];\n    return new GraphQLWorker(ctx, createData);\n  });\n};\n```\n\nthen, in your application:\n\n```ts\n// Vite query suffixes https://vite.dev/guide/features.html#import-with-query-suffixes\nimport EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';\nimport GraphQLWorker from './my-graphql.worker?worker';\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    return label === 'graphql' ? new GraphQLWorker() : new EditorWorker();\n  },\n};\n```\n\nor, if you have webpack configured for it:\n\n```ts\nglobalThis.MonacoEnvironment = {\n  getWorkerUrl(_workerId: string, label: string) {\n    return label === 'graphql' ? 'my-graphql.worker.js' : 'editor.worker.js';\n  },\n};\n```\n\nwith vite you just need:\n\n```ts\nimport { defineConfig } from 'vite';\nimport monacoEditorPlugin from 'vite-plugin-monaco-editor';\n\nexport default defineConfig({\n  plugins: [\n    monacoEditorPlugin({\n      customWorker: [\n        {\n          label: 'graphql',\n          entry: 'my-graphql.worker.js',\n        },\n      ],\n    }),\n  ],\n});\n```\n\n## Monaco Editor Tips\n\nIf you are familiar with Codemirror/Atom-era terminology and features, here's\nsome gotchas:\n\n- \"hinting\" => \"code completion\" in LSP terminology\n- \"linting\" => \"diagnostics\" in lsp terminology\n- the default keymap is different, more vscode like\n- command palette and right click context menu are important\n- you can extend the provided standard completion, linting, etc. for example,\n  `editor.setModelMarkers()`\n- [Monaco Editor API Docs](https://microsoft.github.io/monaco-editor/api/index.html)\n- [Monaco Editor Samples](https://github.com/Microsoft/monaco-editor-samples)\n  repository is great for tips on implementing with different bundlers,\n  runtimes, etc.\n\n## Avoid Bundle All `monaco-editor`'s Languages\n\nWhile importing `monaco-editor` in your project, you silently import 83 builtin\nlanguages, such as `typescript`, `html`, `css`, `json` and others. You can found\na full list of\n[basic-languages](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages)\nand\n[languages](https://github.com/microsoft/monaco-editor/tree/main/src/language).\n\nFor `monaco-graphql`, you need only 2 languages - `graphql` and `json`.\nIn version `monaco-graphql@1.3.0` and later, you can replace all `monaco-editor`'s\nimports with `monaco-graphql/monaco-editor` to improve performance, load\nonly `graphql` and `json` languages, and skip loading unused languages.\n\n```diff\n-import { ... } from 'monaco-editor'\n+import { ... } from 'monaco-graphql/monaco-editor'\n```\n\n> The `monaco-graphql/esm/*` import pattern is deprecated. It is retained for\n> backwards compatibility but the wildcard export that enables it is planned\n> for removal in the next major version. New code should use the canonical\n> subpaths: `monaco-graphql/monaco-editor`, `monaco-graphql/initializeMode`,\n> `monaco-graphql/graphql.worker`, `monaco-graphql/lite`.\n\n### Catch Future Import Mistakes with ESLint\n\nTo prevent mis-importing of `monaco-editor`, you can set up default\n`no-restricted-imports` rule for JavaScript projects or\n`@typescript-eslint/no-restricted-imports` for TypeScript projects.\n\n```json5\n{\n  rules: {\n    // or @typescript-eslint/no-restricted-imports\n    'no-restricted-imports': [\n      'error',\n      {\n        name: 'monaco-editor',\n        message: '`monaco-editor` imports all languages; use `monaco-graphql/monaco-editor` instead to import only `json` and `graphql` languages',\n      },\n    ],\n  },\n}\n```\n\n## Inspiration\n\n`microsoft/monaco-json` was our inspiration from the outset, when it was still a\nstandalone repository. @acao actually wholesale copied many files, you could\nalmost say it was a fork!\n\n## TODO\n\n- [x] variables JSON validation\n- [x] variables completion\n- [ ] Symbols & Definitions\n- [x] file uri-driven schema loading\n- [x] op -> schema & schema -> schema references\n- [x] `insertText` for field and argument completion\n","packages/vscode-graphql-execution/README.md":"## `graphql.vscode-graphql-execution`\n\nThis extension provides standalone support for executing graphql operations\ninline in your code for:\n\n- .ts/.tsx\n- .js/.jsx\n- .graphql, .gql or .graphqls files\n\n## How it works\n\n1. A codelens will appear above all operations - clicking will begin executing\n   the operation.\n2. (If variables are specified in the operation), a dialog will prompt for these\n   variables\n3. Then, the results or network error should appear, voilà!\n4. If no endpoints are configured, it will exit early and tell you to define\n   them.\n\n## Configuring the extension\n\n### `graphql-config`\n\nYour graphql config file will need to contain either a schema-as-url OR an\nendpoints configuration. Either of the following are valid:\n\n```yaml\nschema: https://localhost:3000/graphql\n```\n\n```yaml\nschema: schema.graphql\nextensions:\n  endpoints:\n    default:\n      url: 'https://localhost:3000/graphql'\n```\n\n```yaml\nprojects:\n  app:\n    schema: schema.graphql\n    extensions:\n      endpoints:\n        default:\n          url: 'https://localhost:3000/graphql'\n```\n\n### Disable codelens\n\nTo disable the codelens, please specify this setting in `settings.json` or\n`user.json`:\n\n```json\n{\n  ...\n \"vscode-graphql-execution.showExecCodelens\": false\n}\n```\n\n### Self Signed Certificates\n\nEnable this (`false` by default) to allow node to use non-authorized SSL\ncertificates.\n\n```json\n{\n  \"vscode-graphql-execution.rejectUnauthorized\": true\n}\n```\n","packages/vscode-graphql-syntax/README.md":"# GraphQL Syntax Support\n\nAdds full GraphQL syntax highlighting and language support such as bracket\nmatching.\n\n- Supports `.graphql`/`.gql`/`.graphqls` highlighting\n- Javascript, Typescript & JSX/TSX (examples: [test.js](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.js) & [test.ts](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts))\n- Vue (examples: [test-sfc-comp.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc-comp.vue) & [test-sfc.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc.vue))\n- Svelte (example: [test.svelte](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte))\n- ReasonML/ReScript (`%graphql()` ) (example: [test.re](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.re))\n- Python (example: [test.py](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.py))\n- PHP (example: [test.php](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.php))\n- Markdown (examples: [test.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.md) & [test-py.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md))\n- Scala (example: [test.scala](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.scala))\n\nYou'll want to install this if you do not use `graphql-config`, or want to use\nthe highlighting with other extensions than `vscode-graphql`\n\n## Contributing\n\nFeel free to open a PR to fix, enhance any language support, or even add new\nlanguages 😍\n\nsee:\n\n- [the grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/)\n- [the applicable vscode docs](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide)\n\n### Contributor Guide: Improving a Language\n\nWhether fixing a bug or adding a new delimiter for your language, here are a few tips for you:\n\n1. TDD approach: add your bug case or new delimiter example to the relevant file in `tests/__fixtures__`\n1. run `pnpm test -- -u` in the syntax extension workspace, and observe whether vscode-textmate tokenizes your example properly\n1. fix/update/add the relevant pattern, and repeat the above to see if the tokenization changes. you should see `meta.embedded.block.graphql`\n1. to test manually, run `pnpm vsce:package` in the workspace and right click to install the bundled vsix extension, and open the fixture file\n\n<span id=\"adding-a-lang\"></span>\n\n### Contributor Guide: Adding a Language\n\n1.  add a file to [grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/) following our other examples.\n1.  be sure to add it to `package.json` contributions as well, in the `grammars` section. the `text.html.markdown` is for applying to markdown codeblocks\n1.  use a scope ala `source.{lang}` from a vscode-provided syntax grammar, or a popular, official contributed grammar. To find the name of the scope for any token's highlighting, use `Developer: Inspect Editor Tokens & Scopes` from the vscode command palette.\n1.  name it `inline.graphql.{lang}` for consistency\n1.  add a test file `tests/__fixture__` to document example usage, and a test spec to `__tests__` to assert the snapshot, pointing to the source you created\n1.  run `pnpm test -- -u` in the workspace to add the snapshot\n1.  use the snapshots to ensure your capture groups are working and serializing the graphql as expected\n1.  in the test fixture, document all working cases and non working cases with Todo comments for common usage in your language. be sure to think of cases such as string interpolation and generics for typed languages.\n1.  add it to the list above in the readme, with links to your test fixtures as usage documentation\n1.  to manually test it in vscode itself, run `pnpm vsce:package` in the syntax extension workspace and right click and install the bundled vsix file, then view the test fixture\n\n## Usage Note\n\nWe would love for the other graphql extension authors to freely use this syntax\nextension as well! Even if your extension is designed to replace\n`vscode-graphql`, or if it's designed for other other purposes. It uses an MIT\nlicense, but attribution is always a nice gesture to the original authors :)\n\n## License\n\nMIT License\n\nCopyright 2022 GraphQL Contributors\n","packages/vscode-graphql/README.md":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql/CHANGELOG.md)\n| [Discord Channel](https://discord.gg/r4BxrAG6fN) |\n[LSP Server Docs](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server/README.md)\n\nGraphQL extension for VSCode built with the aim to tightly integrate the GraphQL\nEcosystem with VSCode for an awesome developer experience.\n\n![](https://camo.githubusercontent.com/97dc1080d5e6883c4eec3eaa6b7d0f29802e6b4b/687474703a2f2f672e7265636f726469742e636f2f497379504655484e5a342e676966)\n\n### `.graphql`, `.gql` file extension support and `gql`/`graphql` tagged template literal support for tsx, jsx, ts, js\n\n- syntax highlighting (provided by `vscode-graphql-syntax`)\n- autocomplete suggestions\n- validation against schema\n- snippets (interface, type, input, enum, union)\n- hover support\n- go to definition support (input, enum, type)\n- outline support\n\n## Getting Started\n\n> **This extension requires a graphql-config file**.\n\nTo support language features like completion and \"go-to definition\" across multiple files,\nplease include `documents` in the `graphql-config` file default or per-project\n\n### Simplest Config Example\n\n```yaml\n# .graphqlrc.yml or graphql.config.yml\nschema: 'schema.graphql'\ndocuments: 'src/**/*.{graphql,js,ts,jsx,tsx}'\n```\n\n`package.json`:\n\n```json\n\"graphql\": {\n  \"schema\": \"https://localhost:3001/graphql\",\n  \"documents\": \"**/*.{graphql,js,ts,jsx,tsx}\"\n},\n```\n\n```ts\n// .graphqlrc.ts or graphql.config.ts\nexport default {\n  schema: 'schema.graphql',\n  documents: '**/*.{graphql,js,ts,jsx,tsx}',\n};\n```\n\nsame for .json, .toml, etc\n\n## Additional Features\n\n- Loads the LSP server upon detecting a `graphql-config` file at root level or in a\n  parent level directory, or a `package.json` file with `graphql` config\n- Loads `.graphql`, `.gql` files, and detects `gql`, `graphql` tags and `/** GraphQL */` and `#graphql` comments in js, ts, jsx, tsx, vue files\n- pre-load schema and fragment definitions\n- Support [`graphql-config`](https://graphql-config.com/) files with one or multiple projects (multi-root workspaces are not yet supported)\n- the language service re-starts on saved changes to vscode settings and/or graphql config!\n\n## Configuration\n\n| Parameter                                 | Default                                           | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `graphql-config.load.baseDir`             | workspace root or process.cwd()                   | the path where graphql config looks for config files                                                                                                                                                                                                                                                |\n| `graphql-config.load.filepath`            | `null`                                            | exact filepath of the config file.                                                                                                                                                                                                                                                                  |\n| `graphql-config.load.configName`          | `graphql`                                         | config name prefix instead of `graphql`                                                                                                                                                                                                                                                             |\n| `graphql-config.load.legacy`              | `true`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `graphql-config.dotEnvPath`               | `null`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `vscode-graphql.cacheSchemaFileForLookup` | `true` if `schema` contains non-SDL files or URLs | generate an SDL file based on your graphql-config schema configuration for definition lookup and other features. enabled by default when your `schema` config are URLs or introspection JSON, or if you have any non-local SDL files in `schema`                                                    |\n| `vscode-graphql.schemaCacheTTL`           | `30000`                                           | an integer value in milliseconds for the desired minimum cache lifetime for all schemas, which also causes the generated file to be re-written. set to 30s by default. effectively a \"lazy\" form of polling. if you are developing a schema alongside client queries, you may want to decrease this |\n| `vscode-graphql.debug`                    | `false`                                           | show more verbose log output in the output channel                                                                                                                                                                                                                                                  |\n\n### Advanced Example\n\nMulti-project can be used for both local files, URL defined schema, or both\n\n```js\nimport dotenv from 'dotenv';\ndotenv.config();\n\n// .graphqlrc.ts or graphql.config.ts\nexport default {\n  projects: {\n    app: {\n      schema: ['src/schema.graphql', 'directives.graphql'],\n      documents: ['**/*.{graphql,js,ts,jsx,tsx}', 'my/fragments.graphql'],\n    },\n    db: {\n      schema: 'src/generated/db.graphql',\n      documents: ['src/db/**/*.graphql', 'my/fragments.graphql'],\n      extensions: {\n        endpoints: {\n          default: {\n            url: 'https://localhost:3001/graphql/',\n            headers: {\n              Authorization: `Bearer ${process.env.API_TOKEN}`,\n            },\n          },\n        },\n      },\n    },\n  },\n};\n```\n\nNotice that `documents` key supports glob pattern and hence `[\"**/*.graphql\"]`\nis also valid.\n\n## Frequently Asked Questions\n\n### The extension fails with errors about duplicate types\n\nYour object types must be unique per project (as they must be unique per schema), and your fragment names must also be unique per project.\n\n### The extension fails with errors about missing scalars, directives, etc\n\nMake sure that your `schema` pointers refer to a complete schema!\n\n### In JSX and TSX files I see completion items I don't need\n\nThe way vscode lets you filter these out is\n[on the user end](https://github.com/microsoft/vscode/issues/45039)\n\nSo you'll need to add something like this to your global vscode settings:\n\n```json\n\"[typescriptreact]\": {\n  \"editor.suggest.filteredTypes\": {\n    \"snippet\": false\n  }\n},\n\"[javascriptreact]\": {\n  \"editor.suggest.filteredTypes\": {\n    \"snippet\": false\n  }\n}\n```\n\n### My graphql config file is not at the root\n\nGood news, we have configs for this now!\n\nYou can search a folder for any of the matching config file names listed above:\n\n```json\n\"graphql-config.load.rootDir\": \"./config\"\n\"graphql-config.dotEnvPath\": \"./config/.dev.env\"\n```\n\nOr a specific filepath:\n\n```json\n\"graphql-config.load.filepath\": \"./config/my-graphql-config.js\"\n```\n\nOr a different `configName` that allows different formats:\n\n```json\n\"graphql-config.load.rootDir\": \"./config\",\n\"graphql-config.load.configName\": \"acme\"\n```\n\nwhich would search for `./config/.acmerc`, `.config/.acmerc.js`,\n`.config/acme.config.json`, etc matching the config paths above\n\nIf you have multiple projects, you need to define one top-level config that\ndefines all project configs using `projects`\n\n### How do I enable language features for an embedded graphql string?\n\nPlease refer to the `vscode-graphql-syntax` reference files ([js](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.js),[ts](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts),[svelte](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte),[vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.vue)) to learn our template tag, comment and other graphql delimiter patterns for the file types that the language server supports. The syntax highlighter currently supports more languages than the language server. If you notice any places where one or the other doesn't work, please report it!\n\n## Known Issues\n\n- the locally generated schema file for definition lookup currently does not re-generate on schema changes. this will be fixed soon.\n- multi-root workspaces support will be added soon as well.\n- some graphql-config options aren't always honored, this will also be fixed soon\n\n## Attribution\n\nThanks to apollo for their\n[graphql-vscode grammars](https://github.com/apollographql/vscode-graphql/blob/main/syntaxes/graphql.js.json)!\nWe have borrowed from these on several occasions. If you are looking for the\nmost replete set of vscode grammars for writing your own extension, look no\nfurther!\n\n## Development\n\nThis plugin uses the\n[GraphQL language server](https://github.com/graphql/graphql-language-service-server)\n\n1.  Clone the repository - https://github.com/graphql/graphiql\n1.  `pnpm install`\n1.  Run \"VSCode Extension\" launcher in vscode\n1.  This will open another VSCode instance with extension enabled\n1.  Open a project with a graphql config file - \":electric_plug: graphql\" in\n    VSCode status bar indicates that the extension is in use\n1.  Logs for GraphQL language service will appear in output section under\n    GraphQL Language Service\n\n### Contributing back to this project\n\nThis repository is managed by EasyCLA. Project participants must sign the free\n([GraphQL Specification Membership agreement](https://preview-spec-membership.graphql.org))\nbefore making a contribution. You only need to do this one time, and it can be\nsigned by\n[individual contributors](http://individual-spec-membership.graphql.org) or\ntheir [employers](http://corporate-spec-membership.graphql.org).\n\nTo initiate the signature process please open a PR against this repo. The\nEasyCLA bot will block the merge if we still need a membership agreement from\nyou.\n\nYou can find\n[detailed information here](https://github.com/graphql/graphql-wg/tree/main/membership).\nIf you have issues, please email\n[operations@graphql.org](mailto:operations@graphql.org).\n\nIf your company benefits from GraphQL and you would like to provide essential\nfinancial support for the systems and people that power our community, please\nalso consider membership in the\n[GraphQL Foundation](https://foundation.graphql.org/join).\n\n## License\n\nMIT\n"},"items":[{"name":"create-fetcher.md","path":"packages/graphiql-toolkit/docs/create-fetcher.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql-toolkit/docs/create-fetcher.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# `createGraphiQLFetcher`\n\nA utility for generating a full-featured `fetcher` for GraphiQL including\n`@stream`, `@defer` `IncrementalDelivery`and `multipart` and subscriptions using\n`graphql-ws` or the legacy websockets protocol.\n\nUnder the hood, it uses [`graphql-ws`](https://www.npmjs.com/package/graphql-ws)\nclient and [`meros`](https://www.npmjs.com/package/meros) which act as client\nreference implementations of the\n[GraphQL over HTTP Working Group Spec](https://github.com/graphql/graphql-over-http)\nspecification, and the most popular transport spec proposals.\n\n## Setup\n\nYou can install `@graphiql/toolkit` using your favorite package manager:\n\n```bash\nnpm install @graphiql/toolkit\n```\n\n## Getting Started\n\nWe have a few flexible options to get you started with the client. It's meant to\ncover the majority of common use cases with a simple encapsulation.\n\n### Default HTTP/Multipart IncrementalDelivery Usage\n\nHere's a simple example. In this case, a websocket client isn't even\ninitialized, only http (with multipart `@stream` and `@defer` Incremental\nDelivery support of course!).\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n### Adding `graphql-ws` websockets subscriptions\n\nFirst you'll need to install `graphql-ws` as a peer dependency:\n\n```bash\nnpm install graphql-ws\n```\n\nJust by providing the `subscriptionUrl`, you can also generate a `graphql-ws`\nclient. This client now supports both HTTP/Multipart Incremental Delivery for\n`@defer` and `@stream`, _and_ websockets subscriptions.\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url, subscriptionUrl });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\nYou can further customize the `graphql-ws` implementation by creating a custom\nclient instance and providing it as the `wsClient` parameter.\n\n## Options\n\n### `url` (_required_)\n\nThis is url used for all `HTTP` requests, and for schema introspection.\n\n### `subscriptionUrl`\n\nThis generates a `graphql-ws` client using the provided url. Note that a server\nmust be compatible with the new `graphql-ws` subscriptions spec for this to\nwork.\n\n### `wsClient`\n\nProvide your own subscriptions client. Using this option bypasses\n`subscriptionUrl`. In theory, this could be any client using any transport, as\nlong as it matches `graphql-ws` `Client` signature.\n\n## `wsConnectionParams`\n\nProvide your initial connection params.\n\n```jsx\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://localhost:3000',\n  subscriptionUrl: 'https://localhost:3001',\n  wsConnectionParams: { Authorization: 'token 1234' },\n});\n\nconst App = () => {\n  return <GraphiQL fetcher={fetcher} />;\n};\n```\n\n### `legacyWsClient` or `legacyClient`\n\nProvide a legacy subscriptions client using `subscriptions-transport-ws`\nprotocol. Using this option bypasses `subscriptionUrl`. In theory, this could be\nany client using any transport, as long as it matches\n`subscriptions-transport-ws` `Client` signature.\n\n### `headers`\n\nSpecify headers that will be passed to all requests.\n\n### `fetch`\n\nPass a custom fetch implementation such as `isomorphic-fetch`.\n\n## Customization Examples\n\n### Custom `wsClient` Example using `graphql-ws`\n\nThis example passes a `graphql-ws` client to the `wsClient` option:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createClient } from 'graphql-ws';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  wsClient: createClient({\n    url: subscriptionUrl,\n    keepAlive: 2000,\n  }),\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n### Custom `legacyClient` Example\n\n(not recommended)\n\nBy providing the `legacyClient` you can support a `subscriptions-transport-ws`\nclient implementation, or equivalent:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { SubscriptionClient } from 'subscriptions-transport-ws';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  legacyWsClient: new SubscriptionClient(subscriptionUrl),\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\nNote that you will need to install the client separately:\n\n```bash\nnpm install subscriptions-transport-ws\n```\n\n### Custom `fetcher` Example\n\nFor SSR, we might want to use something like `isomorphic-fetch`:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { fetch } from 'isomorphic-fetch';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url, fetch });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n## Credits\n\nThis is originally inspired by `graphql-subscriptions-fetcher` created by @Urigo\n","isInternal":false,"tokens":1484,"sizeBytes":6105},{"name":"README.md","path":"packages/cm6-graphql/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/cm6-graphql/README.md","title":"cm6-graphql Documentation","category":"plugin-manifest","format":"markdown","content":"# CodeMirror 6 GraphQL Language extension\n\n[![NPM](https://img.shields.io/npm/v/cm6-graphql.svg?style=flat-square)](https://npmjs.com/cm6-graphql)\n![npm downloads](https://img.shields.io/npm/dm/cm6-graphql?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/cm6-graphql.svg?style=flat-square)](LICENSE)\n[Discord Channel](https://discord.gg/cffZwk8NJW)\n\nProvides CodeMirror 6 extension with a parser mode for GraphQL along with\nautocomplete and linting powered by your GraphQL Schema.\n\n### Getting Started\n\n```sh\nnpm install cm6-graphql\n```\n\n[CodeMirror 6](https://codemirror.net/) customization is done through\n[extensions](https://codemirror.net/docs/guide/#extension). This package is\nan extension that customizes CodeMirror 6 for GraphQL.\n\n```js\nimport { basicSetup, EditorView } from 'codemirror';\nimport { graphql } from 'cm6-graphql';\n\nconst view = new EditorView({\n  doc: `mutation mutationName {\n    setString(value: \"newString\")\n  }`,\n  extensions: [basicSetup, graphql(myGraphQLSchema)],\n  parent: document.body,\n});\n```\n\n_**Note:** You have to provide a theme to CodeMirror 6 for the styling you want. You\ncan take a look at\n[this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts)\nor see the CodeMirror 6\n[documentation examples](https://codemirror.net/examples/styling/) for more\ndetails._\n\n### Updating schema\n\nIf you need to dynamically update the GraphQL schema used in the editor, you can\ncall `updateSchema` with the CodeMirror `EditorView` instance and the new schema\n\n```js\nimport { updateSchema } from 'cm6-graphql';\n\nconst onNewSchema = schema => {\n  updateSchema(view, schema);\n};\n```\n","isInternal":false,"tokens":431,"sizeBytes":1666},{"name":"README.md","path":"packages/codemirror-graphql/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/codemirror-graphql/README.md","title":"codemirror-graphql Documentation","category":"plugin-manifest","format":"markdown","content":"# GraphQL mode for CodeMirror\n\n[![NPM](https://img.shields.io/npm/v/codemirror-graphql.svg?style=flat-square)](https://npmjs.com/codemirror-graphql)\n![npm downloads](https://img.shields.io/npm/dm/codemirror-graphql?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/codemirror-graphql.svg?style=flat-square)](LICENSE)\n[Discord Channel](https://discord.gg/cffZwk8NJW)\n\n**NOTE: For CodeMirror 6, use [cm6-graphql](/packages/cm6-graphql/) instead**\n\nProvides CodeMirror with a parser mode for GraphQL along with a live linter and\ntypeahead hinter powered by your GraphQL Schema.\n\n![Demo .gif of GraphQL Codemirror Mode](https://raw.githubusercontent.com/graphql/graphiql/main/packages/codemirror-graphql/resources/example.gif)\n\n### Getting Started\n\n```sh\nnpm install codemirror-graphql\n```\n\nCodeMirror helpers install themselves to the global CodeMirror when they are\nimported.\n\n```ts\nimport type { ValidationContext, SDLValidationContext } from 'graphql';\n\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n    validationRules: [ExampleRule],\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n  },\n});\n```\n\n## External Fragments Example\n\nIf you want to have autocompletion for external fragment definitions, there's a\nnew configuration setting available\n\n```ts\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nconst externalFragments = /* GraphQL */ `\n  fragment MyFragment on Example {\n    id: ID!\n    name: String!\n  }\n   fragment AnotherFragment on Example {\n    id: ID!\n    title: String!\n  }\n`;\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n    // here we use a string, but\n    // you can also provide an array of FragmentDefinitionNodes\n    externalFragments,\n  },\n});\n```\n\n### Custom Validation Rules\n\nIf you want to show custom validation, you can do that too! It uses the\n`ValidationRule` interface.\n\n```ts\nimport type { ValidationRule } from 'graphql';\n\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nconst ExampleRule: ValidationRule = context => {\n  // your custom rules here\n  const schema = context.getSchema();\n  const document = context.getDocument();\n  return {\n    NamedType(node) {\n      if (node.name.value !== node.name.value.toLowercase()) {\n        context.reportError('only lowercase type names allowed!');\n      }\n    },\n  };\n};\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n    validationRules: [ExampleRule],\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n  },\n});\n```\n\nBuild for the web with [webpack](http://webpack.github.io) or\n[browserify](http://browserify.org).\n","isInternal":false,"tokens":836,"sizeBytes":3272},{"name":"README.md","path":"packages/graphiql-plugin-code-exporter/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql-plugin-code-exporter/README.md","title":"graphiql-plugin-code-exporter Documentation","category":"plugin-manifest","format":"markdown","content":"# GraphiQL Code Exporter Plugin\n\nThis package provides a plugin that integrates the\n[GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.\n\n## Installation\n\nInstall the plugin using your preferred package manager:\n\n```sh\nnpm install @graphiql/plugin-code-exporter\n```\n\nMake sure to also install the required peer dependencies:\n\n```sh\nnpm install react react-dom graphql\n```\n\n## Usage\n\nRefer to the\n[GraphiQL Code Exporter README](https://github.com/OneGraph/graphiql-code-exporter) for full details on available `props` and how to [create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).\n\nExample integration:\n\n```jsx\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { codeExporterPlugin } from '@graphiql/plugin-code-exporter';\nimport 'graphiql/style.css';\nimport '@graphiql/plugin-code-exporter/style.css';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://countries.trevorblades.com',\n});\nfunction getQuery(arg, spaceCount = 2) {\n  const spaces = ' '.repeat(spaceCount);\n  const { query } = arg.operationDataList[0];\n  return spaces + query.replaceAll('\\n', '\\n' + spaces);\n}\n\nconst codeExporter = codeExporterPlugin({\n  /**\n   * Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details.\n   */\n  snippets: [\n    {\n      name: 'Example One',\n      language: 'JavaScript',\n      codeMirrorMode: 'jsx',\n      options: [],\n      generate: arg =>\n        ['export const query = graphql`', getQuery(arg), '`'].join('\\n'),\n    },\n    {\n      name: 'Example Two',\n      language: 'JavaScript',\n      codeMirrorMode: 'jsx',\n      options: [],\n      generate: arg =>\n        [\n          \"import { graphql } from 'graphql'\",\n          '',\n          'export const query = graphql`',\n          getQuery(arg),\n          '`',\n        ].join('\\n'),\n    },\n  ],\n});\nfunction App() {\n  return <GraphiQL fetcher={fetcher} plugins={[codeExporter]} />;\n}\n```\n\n## CDN bundles\n\nYou can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh).\n\nSee the [CDN example](./example/index.html) for a working demo.\n","isInternal":false,"tokens":545,"sizeBytes":2178},{"name":"README.md","path":"packages/graphiql-plugin-doc-explorer/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql-plugin-doc-explorer/README.md","title":"graphiql-plugin-doc-explorer Documentation","category":"plugin-manifest","format":"markdown","content":"# `@graphiql/plugin-doc-explorer`\n\n## API\n\n- `useDocExplorer`: Handles the state for the doc explorer\n- `useDocExplorerActions`: Actions related to the doc explorer\n","isInternal":false,"tokens":42,"sizeBytes":165},{"name":"README.md","path":"packages/graphiql-plugin-explorer/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql-plugin-explorer/README.md","title":"graphiql-plugin-explorer Documentation","category":"plugin-manifest","format":"markdown","content":"# GraphiQL Explorer Plugin\n\nThis package provides a plugin that integrates the\n[`GraphiQL Explorer`](https://github.com/OneGraph/graphiql-explorer) into the GraphiQL UI.\n\n## Installation\n\nUse your preferred package manager to install the plugin:\n\n```sh\nnpm install @graphiql/plugin-explorer\n```\n\nMake sure to also install the required peer dependencies:\n\n```sh\nnpm install react react-dom graphql\n```\n\n## Usage\n\n```jsx\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { explorerPlugin } from '@graphiql/plugin-explorer';\nimport 'graphiql/style.css';\nimport '@graphiql/plugin-explorer/style.css';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',\n});\n\n// Pass the explorer props here if you want\nconst explorer = explorerPlugin();\n\nfunction GraphiQLWithExplorer() {\n  return <GraphiQL fetcher={fetcher} plugins={[explorer]} />;\n}\n```\n\n## CDN bundles\n\nYou can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh).\n\nSee the [CDN example](./example/index.html) for a working demo.\n","isInternal":false,"tokens":279,"sizeBytes":1110},{"name":"README.md","path":"packages/graphiql-plugin-history/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql-plugin-history/README.md","title":"graphiql-plugin-history Documentation","category":"plugin-manifest","format":"markdown","content":"# `@graphiql/plugin-history`\n\n## API\n\n- `useHistory`: Persists executed requests in storage\n- `useHistoryActions`: Actions related to the history\n","isInternal":false,"tokens":36,"sizeBytes":146},{"name":"README.md","path":"packages/graphiql-react/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql-react/README.md","title":"graphiql-react Documentation","category":"plugin-manifest","format":"markdown","content":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html)\n| [NPM](https://www.npmjs.com/package/@graphiql/react)\n\n# `@graphiql/react`\n\nA React SDK for building integrated GraphQL developer experiences for the web.\n\n## Purpose\n\nThis package contains a set of building blocks that allow its users to build\nGraphQL IDEs with ease. It's the set of components that make up Graph*i*QL, the\nfirst and official GraphQL IDE, owned and maintained by the GraphQL Foundation.\n\nThere are two kinds of building blocks that this package provides: Stateful\ncontext providers for state management and simple UI components.\n\n## Getting started\n\nAll the state for your GraphQL IDE lives in multiple contexts. The easiest way\nto get started is by using the `GraphiQLProvider` component that renders all the\nindividual providers.\n\nThere is one required prop called `fetcher`. This is a function that performs\nGraphQL request against a given endpoint. You can easily create a fetcher using\nthe method `createGraphiQLFetcher` from the `@graphiql/toolkit` package.\n\n```jsx\nimport { GraphiQLProvider } from '@graphiql/react';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://my.graphql.api/graphql',\n});\n\nfunction MyGraphQLIDE() {\n  return (\n    <GraphiQLProvider fetcher={fetcher}>\n      <div className=\"graphiql-container\">Hello GraphQL</div>\n    </GraphiQLProvider>\n  );\n}\n```\n\nInside the provider you can now use any UI component provided by\n`@graphiql/react`. For example, you can render an operation editor like this:\n\n```jsx\nimport { QueryEditor } from '@graphiql/react';\n\nfunction MyGraphQLIDE() {\n  return (\n    <GraphiQLProvider fetcher={fetcher}>\n      <div className=\"graphiql-container\">\n        <QueryEditor />\n      </div>\n    </GraphiQLProvider>\n  );\n}\n```\n\nThe package also ships the necessary CSS that all its UI components need. You\ncan import them from `@graphiql/react/style.css`.\n\n> **Note**: In order for these styles to apply, the UI components need to be\n> rendered inside an element that has a class name `graphiql-container`.\n\nBy default, the UI components will try to use the\n[Roboto](https://fonts.google.com/specimen/Roboto) font for regular text and the\n[Fira Code](https://fonts.google.com/specimen/Fira+Code) font for mono-space\ntext. If you want to use the default fonts you can load them using these files:\n\n- `@graphiql/react/font/roboto.css`\n- `@graphiql/react/font/fira-code.css`.\n\nYou can, of course, use any other method to load these fonts (for example, loading\nthem from Google Fonts).\n\nFurther details on how to use `@graphiql/react` can be found in the reference\nimplementation of a GraphQL IDE - Graph*i*QL - in the\n[`graphiql` package](https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/components/GraphiQL.tsx).\n\n## Available Stores\n\nGraphiQL uses a set of state management stores, each responsible for a specific part of the IDE's\nbehavior. These stores contain all logic related to state management and can be accessed via custom\nReact hooks.\n\n### Core Hooks\n\n- **`useMonaco`**: Access `monaco-editor` exports and the `monaco-graphql` instance. Designed for safe use in SSR environments.\n- **`useGraphiQL`**: Access the current state.\n- **`useGraphiQLActions`**: Trigger actions that mutate the state. This hook **never** rerenders.\n\nThe `useGraphiQLActions` hook **exposes all actions** across store slices.\nThe `useGraphiQL` hook **provides access to the following store slices**:\n\n| Store Slice                              | Responsibilities                                                                                          |\n| ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| [`storage`](./src/stores/storage.ts)     | Provides a storage API that can be used to persist state in the browser (by default using `localStorage`) |\n| [`editor`](./src/stores/editor.ts)       | Manages **query**, **variables**, **headers**, and **response** editors and tabs                          |\n| [`execution`](./src/stores/execution.ts) | Handles the execution of GraphQL requests                                                                 |\n| [`plugin`](./src/stores/plugin.ts)       | Manages plugins and the currently active plugin                                                           |\n| [`schema`](./src/stores/schema.ts)       | Fetches, validates, and stores the GraphQL schema                                                         |\n| [`theme`](./src/stores/theme.ts)         | Manages the current theme and provides a method to update it                                              |\n\n### Usage Example\n\n```js\nimport { useGraphiQL, useGraphiQLActions } from '@graphiql/react';\n\n// Get an action to fetch the schema and an action to change theme\nconst { introspect, setTheme } = useGraphiQLActions();\n\n// Use a selector to access specific parts of the state like current schema and theme\nconst { schema, theme } = useGraphiQL(state => ({\n  schema: state.schema,\n  theme: state.theme,\n}));\n```\n\nAll store properties are documented using TSDoc comments. If you're using an\nIDE like VSCode for development, these descriptions will show up in auto-complete\ntooltips. All these descriptions can also be found in the\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html).\n\n## Theming\n\nAll the components from `@graphiql/react` have been designed with customization\nin mind. We achieve this using CSS variables.\n\nAll variables that are available for customization can be found in the\n[`root.css` file](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/src/style/root.css).\n\n### Colors\n\nColors are defined using the\n[HSL format](https://en.wikipedia.org/wiki/HSL_and_HSV). All CSS variables for\ncolors are defined as a list of the three values that make up HSL (hue,\nsaturation and lightness).\n\nThis approach allows `@graphiql/react` to use transparent colors by passing the\nvalue of the CSS variable in the `hsla` function. This enables us to provide\ntruly reusable UI elements where good contrasts are preserved regardless of the\nelements background.\n\n## Development\n\nIf you want to develop with `@graphiql/react` locally - in particular when\nworking on the `graphiql` package - all you need to do is run `pnpm dev` in the\npackage folder in a separate terminal. This will build the package using Vite.\nWhen using it in combination with `pnpm dev:graphiql` (running in the repo\nroot) this will give you auto-reloading when working on `graphiql` and\n`@graphiql/react` simultaneously.\n","isInternal":false,"tokens":1522,"sizeBytes":6777},{"name":"README.md","path":"packages/graphiql-toolkit/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql-toolkit/README.md","title":"graphiql-toolkit Documentation","category":"plugin-manifest","format":"markdown","content":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-toolkit/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_toolkit.html)\n| [NPM](https://www.npmjs.com/package/@graphiql/toolkit) |\n[Discord](https://discord.gg/NP5vbPeUFp)\n\n# `@graphiql/toolkit`\n\nThis is a general purpose library for building GraphQL IDEs. It's being used by\nother packages like `graphiql` and `@graphiql/react` and also provides utilities\nthat are useful when working with these packages.\n\n## Docs\n\n- **[`createFetcher`](./docs/create-fetcher.md)** : a utility for creating a\n  `fetcher` prop implementation for HTTP GET, POST including multipart,\n  websockets fetcher\n- more to come!\n","isInternal":false,"tokens":191,"sizeBytes":714},{"name":"README.md","path":"packages/graphiql/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql/README.md","title":"graphiql Documentation","category":"plugin-manifest","format":"markdown","content":"# GraphiQL\n\n> **Security Notice:** All versions of `graphiql` < `1.4.3` are vulnerable to an\n> XSS attack in cases where the GraphQL server to which the GraphiQL web app\n> connects is not trusted. Learn more in\n> [our security advisory](https://github.com/graphql/graphiql/tree/main/docs/security/2021-introspection-schema-xss.md).\n\n[![NPM](https://img.shields.io/npm/v/graphiql.svg)](https://npmjs.com/graphiql)\n![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/graphiql)\n![npm downloads](https://img.shields.io/npm/dm/graphiql?label=npm%20downloads)\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/graphiql)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/min/graphiql/latest)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/graphiql/latest)\n[![License](https://img.shields.io/npm/l/graphiql.svg?style=flat-square)](LICENSE)\n[![](https://dcbadge.vercel.app/api/server/NP5vbPeUFp?style=flat)](https://discord.gg/NP5vbPeUFp)\n\n_/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE.\n[Try the live demo](https://graphql.org/swapi-graphql).\n\n[![](resources/graphiql.png)](https://graphql.org/swapi-graphql)\n\n## Features\n\n- Full language support of the latest\n  [GraphQL Specification](https://spec.graphql.org/draft/#sec-Language):\n- Syntax highlighting\n- Intelligent type ahead of fields, arguments, types, and more\n- Real-time error highlighting and reporting for queries and variables\n- Automatic query and variables completion\n- Automatic leaf node insertion for non-scalar fields\n- Documentation explorer with search and markdown support\n- Persisted state using `localStorage`\n- Simple API for adding custom plugins\n\n## Live Demos\n\n- The [latest stable version](https://graphql.org/swapi-graphql)\n- The current state of the `main` branch:\n  - An [installable PWA](https://graphiql-test.netlify.com/webpack) with plugins ([source](../../examples//graphiql-webpack))\n  - Using the [minified bundles](https://graphiql-test.netlify.com)\n  - Using the [development bundles](https://graphiql-test.netlify.com/dev) (good\n    for inspecting, debugging, etc)\n- Each pull request will also get its own preview deployment on Netlify, you'll\n  find a link in the GitHub checks\n\n## Examples\n\n- [`CDN (ESM-based)`](../../examples/graphiql-cdn) - A single HTML file using [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) from http URLs and a `<script>` tag\n- [`Webpack`](../../examples/graphiql-webpack) - A starter for Webpack\n- [`Create React App`](../../examples/graphiql-create-react-app) - An example\n  using [Create React App](https://create-react-app.dev)\n- [`Parcel`](../../examples/graphiql-parcel) - An example using\n  [Parcel](https://parceljs.org)\n\n## Getting started\n\n- [Migration guide to GraphiQL 2](../../docs/migration/graphiql-2.0.0.md)\n- [Migration guide to GraphiQL 4](../../docs/migration/graphiql-4.0.0.md)\n- [Migration guide to GraphiQL 5](../../docs/migration/graphiql-5.0.0.md)\n\n### CDN usage\n\n#### ESM-based (recommended)\n\nUse the modern, ESM-based CDN approach.\nSee the [ESM-based example](../../examples/graphiql-cdn) for setup details.\n\n#### UMD (deprecated)\n\n> [!WARNING]\n>\n> The UMD CDN build is **deprecated** and will be removed in a future major release of GraphiQL.\n> Please migrate to the [ESM-based example](../../examples/graphiql-cdn).\n\n## Usage\n\n### Using as package\n\nThe `graphiql` package can be installed using your favorite package manager. You\nalso need to have `react`,`react-dom` and `graphql` installed which are peer\ndependencies of `graphiql`.\n\n```sh\nnpm install graphiql react react-dom graphql\n```\n\nThe package exports a bunch of React components:\n\n- The `GraphiQLProvider` components renders multiple context providers that\n  encapsulate all state management\n- The `GraphiQLInterface` component renders the UI that makes up GraphiQL\n- The `GraphiQL` component is a combination of both the above components\n\nThere is a single prop that is required for the `GraphiQL` component called\nfetcher. A fetcher is a function that performs a request to a GraphQL API. It\nmay return a `Promise` for queries or mutations, but also an `Observable` or an\n`AsyncIterable` in order to handle subscriptions or multipart responses.\n\nAn easy way to get create such a function is the\n[`createGraphiQLFetcher`](../graphiql-toolkit/src/create-fetcher/createFetcher.ts)\nmethod exported from the `@graphiql/toolkit` package. If you want to implement\nyour own fetcher function, you can use the `Fetcher` type from\n`@graphiql/toolkit` to make sure the signature matches what GraphiQL expects.\n\nThe following is everything you need to render GraphiQL in your React\napplication:\n\n```jsx\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { GraphiQL } from 'graphiql';\nimport { createRoot } from 'react-dom/client';\nimport 'graphiql/style.css';\n\nconst fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(<GraphiQL fetcher={fetcher} />);\n```\n\nWhen the connected server supports GraphQL.js 17 fragment arguments, opt in\nwith `<GraphiQL fetcher={fetcher} experimentalFragmentArguments />`. The syntax\nis disabled by default.\n\n## Customize\n\nGraphiQL supports customization in UI and behavior by accepting React props and\nchildren.\n\n### Props\n\nFor props documentation, see the\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops-1)\n\n### Children\n\nParts of the UI can be customized by passing children to the `GraphiQL` or the\n`GraphiQLInterface` component.\n\n- `<GraphiQL.Logo>`: Replace the GraphiQL logo with your own.\n\n- `<GraphiQL.Toolbar>`: Add a custom toolbar below the execution button. Pass\n  the empty `<GraphiQL.Toolbar />` if an empty toolbar is desired. Use the\n  components provided by `@graphiql/react` to create toolbar buttons with proper\n  styles.\n\n- `<GraphiQL.Footer>`: Add a custom footer shown below the response editor.\n\n### Plugins\n\nStarting with `graphiql@2` there exists a simple plugin API that allows you to\nbuild your own custom tools right into GraphiQL.\n\nThere are two built-in plugins that come with GraphiQL: The documentation\nexplorer and the query history. Both can be toggled using icons in the sidebar\non the left side of the screen. When opened, they appear next to the sidebar in\na resizable portion of the screen.\n\nTo define your own plugin, all you need is a JavaScript object with three\nproperties:\n\n- `title`: A unique title for the plugin (this will show up in a tooltip when\n  hovering over the sidebar icon)\n- `icon`: A React component that renders an icon which will be included in the\n  sidebar\n- `content`: A React component that renders the plugin contents which will be\n  shown next to the sidebar when opening the plugin\n\nYou can pass a list of plugin objects to the `GraphiQL` component using the\n`plugins` prop. You can also control the visibility state of plugins using the\n`visiblePlugin` prop and react to changes of the plugin visibility state using\nthe `onTogglePluginVisibility` prop.\n\nInside the component you pass to `content` you can interact with the GraphiQL\nstate using the hooks provided by `@graphiql/react`. For example, check out\nhow you can integrate the OneGraph Explorer in GraphiQL using the plugin API in\nthe [plugin package](../graphiql-plugin-explorer) in this repo.\n\n### Theming\n\nThe GraphiQL interface uses CSS variables for theming, in particular for colors.\nCheck out the [`root.css`](../graphiql-react/src/style/root.css) file for the\navailable variables.\n\nOverriding these variables is the only officially supported way of customizing\nthe appearance of GraphiQL. Starting from version 2, class names are no longer\nbe considered stable and might change between minor or patch version updates.\n\n### Editor Theme\n\nThe colors inside the editor can also be altered using\n[CodeMirror editor themes](https://codemirror.net/demo/theme.html). You can use\nthe `editorTheme` prop to pass in the name of the theme. The CSS for the theme\nhas to be loaded for the theme prop to work.\n\n```jsx\n// In your document head:\n<link\n  rel=\"stylesheet\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/solarized.css\"\n/>\n```\n\n```jsx\n// When rendering GraphiQL:\n<GraphiQL editorTheme=\"solarized light\" />\n```\n\nYou can also create your own theme in CSS. As a reference, the default\n`graphiql` theme definition can be found\n[here](../graphiql-react/src/style/codemirror.css).\n\n## Usage with a Custom Storage Namespace\n\nWhen multiple GraphiQL instances run on the same origin—such as in different apps or\nenvironments—they can conflict by reading from and writing to the same `localStorage` keys. To\nprevent this, you can provide a custom `storage` object that prefixes all keys with a unique\nnamespace, isolating each instance’s state and avoiding collisions.\n\n```tsx\nimport type { FC } from 'react';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });\n\nconst NAMESPACE = 'my-namespace';\n\nconst storage: typeof localStorage = {\n  ...localStorage,\n  getItem(key) {\n    return localStorage.getItem(`${NAMESPACE}:${key}`);\n  },\n  setItem(key, value) {\n    return localStorage.setItem(`${NAMESPACE}:${key}`, value);\n  },\n  removeItem(key) {\n    return localStorage.removeItem(`${NAMESPACE}:${key}`);\n  },\n};\n\nexport const App: FC = () => {\n  return <GraphiQL fetcher={fetcher} storage={myStorage} />;\n};\n```\n","isInternal":false,"tokens":2380,"sizeBytes":9606},{"name":"README.md","path":"packages/graphiql/test/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphiql/test/README.md","title":"test Documentation","category":"plugin-manifest","format":"markdown","content":"# Test GraphiQL Application\n\nThis test folder serves as a basis for testing in-development changes and offers\nwatching/compiling of the `src` folder. To utilize this, simply:\n\n1. Run `npm install`\n2. Run `npm run dev`\n3. Open your browser to the address listed in your console. e.g.\n   `Started on http://localhost:49811/`\n","isInternal":false,"tokens":83,"sizeBytes":323},{"name":"README.md","path":"packages/graphql-language-service-cli/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphql-language-service-cli/README.md","title":"graphql-language-service-cli Documentation","category":"plugin-manifest","format":"markdown","content":"# graphql-language-service-cli\n\n> Note: As of 3.0.0, this package has been renamed from\n> `graphql-language-service` to `graphql-language-service-cli`. please now use\n> the `graphql-lsp` bin, instead of the `graphql` binary.\n\n[![NPM](https://img.shields.io/npm/v/graphql-language-service-cli.svg)](https://npmjs.com/graphql-language-service-cli)\n![npm downloads](https://img.shields.io/npm/dm/graphql-language-service-vli?label=npm%20downloads)\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/codemirror-graphql)\n[![License](https://img.shields.io/npm/l/graphql-language-service.svg?style=flat-square)](LICENSE)\n\n_We welcome your feedback and suggestions._\n\nGraphQL Language Service provides an interface for building GraphQL language\nservices for IDEs.\n\nAlmost 100% for\n[Microsoft's Language Server Protocol](https://github.com/Microsoft/language-server-protocol)\nis in place\n\nSupported features include:\n\n- Diagnostics (GraphQL syntax linting/validations) (**spec-compliant**)\n- Autocomplete suggestions (**spec-compliant**)\n- Hyperlink to fragment definitions and named types (type, input, enum)\n  definitions (**spec-compliant**)\n- Outline view support for queries and SDL\n- Symbols support across the workspace\n\nsee more information at\n[`graphql-language-service-server`](https://npmjs.com/graphql-language-service-server)\n\n## Installation and Usage\n\n### Dependencies\n\nAn LSP-compatible client with a file watcher that sends watch notifications to\nthe server.\n\n**DROPPED**: GraphQL Language Service no longer depends on\n[Watchman](https://facebook.github.io/watchman/)\n\nOnly node 9 or greater, and npm or yarn are required dependencies.\n\n### Installation\n\nwith `yarn`:\n\n```sh\nyarn global add graphql-language-service-cli\n```\n\nwith `npm`:\n\n```sh\nnpm install -g graphql-language-service-cli\n```\n\neither will install the `graphql-lsp` bin globally\n\n### GraphQL configuration file (`.graphqlrc.yml`)\n\nCheck out [graphql-config](https://graphql-config.com/docs)\n\nThe custom graphql language configurations are:\n\n- `customDirectives` - `['@myExampleDirective']`\n- `customValidationRules` - returns rules array with parameter\n  `ValidationContext` from `graphql/validation`\n\n### LSP Workspace Configuration\n\nWhen running `server`, your LSP-compatible client can\n[provide additional workspace configuration](https://npmjs.com/graphql-language-service-server#workspace-configuration).\n\nFor example, `coc.nvim` allows for providing custom `settings`\n\n```json\n\"languageserver\": {\n  \"graphql\": {\n    \"command\": \"graphql-lsp\",\n    \"args\": [\"server\", \"-m\", \"stream\"],\n    // customize filetypes to your needs\n    \"filetypes\": [\"typescript\", \"typescriptreact\", \"graphql\"],\n    \"settings\": {\n        \"graphql-config.load.legacy\": true\n    }\n  }\n}\n```\n\nthis would allow for legacy `graphql-config` file formats like `.graphqlconfig`,\nuseful on projects maintaining compatibility with the intellij plugin\n\n### Using the command-line interface\n\n```sh\ngraphql-lsp server --schema=localhost:3000\n```\n\nThe node executable contains several commands: `server` and the command-line\nlanguage service methods (`validate`, `autocomplete`, `outline`).\n\n### CLI Options\n\n```\nUsage: graphql-lsp <command> <file>\n\n[-h | --help][-c | --configDir] {configDir}\n[-t | --text] {textBuffer}\n[-f | --file] {filePath}\n[-s | --schema] {schemaPath}\n\nOptions:\n\n-h, --help Show help [boolean]\n\n-t, --text Text buffer to perform GraphQL diagnostics on.\nWill defer to --file option if omitted.\nOverrides the --file option, if any.\n[string]\n\n-f, --file File path to perform GraphQL diagnostics on.\nWill be ignored if --text option is supplied.\n[string]\n\n--row A row number from the cursor location for GraphQL\nautocomplete suggestions.\nIf omitted, the last row number will be used.\n[number]\n\n--column A column number from the cursor location for GraphQL\nautocomplete suggestions.\nIf omitted, the last column number will be used.\n[number]\n\n-c, --configDir Path to the .graphqlrc.yml configuration file.\nWalks up the directory tree from the provided config\ndirectory, or the current working directory, until a\n.graphqlrc is found or the root directory is found.\n[string]\n\n-s, --schemaPath a path to schema DSL file\n[string]\n\nAt least one command is required.\nCommands: \"server, validate, autocomplete, outline\"\n\n```\n","isInternal":false,"tokens":988,"sizeBytes":4312},{"name":"README.md","path":"packages/graphql-language-service-server/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphql-language-service-server/README.md","title":"graphql-language-service-server Documentation","category":"plugin-manifest","format":"markdown","content":"# graphql-language-service-server\n\n[![NPM](https://img.shields.io/npm/v/graphql-language-service-server.svg?style=flat-square)](https://npmjs.com/graphql-language-service-server)\n![npm downloads](https://img.shields.io/npm/dm/graphql-language-service-server?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/graphql-language-service-server.svg?style=flat-square)](LICENSE)\n\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service_server.html)\n| [Discord Channel](https://discord.gg/PXaRYrpgK4)\n\nServer process backing the\n[GraphQL Language Service](https://github.com/graphql/graphiql/tree/main/packages/graphql-language-service).\n\nGraphQL Language Service Server provides an interface for building GraphQL\nlanguage services for IDEs.\n\nPartial support for\n[Microsoft's Language Server Protocol](https://github.com/Microsoft/language-server-protocol)\nis in place, with more to come in the future.\n\nSupported features include:\n\n- Diagnostics (GraphQL syntax linting/validations) (**spec-compliant**)\n- Autocomplete suggestions (**spec-compliant**)\n- Hyperlink to fragment definitions and named types (type, input, enum)\n  definitions (**spec-compliant**)\n- Outline view support for queries\n- Support for `gql` `graphql` and other template tags inside javascript,\n  typescript, jsx, ts, vue and svelte files, and an interface to allow custom\n  parsing of all files.\n\n## Installation and Usage\n\n### Dependencies\n\n- An LSP compatible client with its own file watcher, that sends watch\n  notifications to the server, such as vscode, nvim, or sublime-lsp.\n- Node.js `^18.18.0 || >=20.9.0` or later is required.\n- (for now) a graphql config file is required\n\n### Installation\n\n```bash\nnpm install graphql-language-service-server\n# or\nyarn add graphql-language-service-server\n```\n\nWe also provide a CLI interface to this server, see\n[`graphql-language-service-cli`](../graphql-language-service-cli/)\n\n### Usage\n\nInitialize the GraphQL Language Server with the `startServer` function:\n\n```ts\nimport { startServer } from 'graphql-language-service-server';\n\nawait startServer({\n  method: 'node',\n});\n```\n\nIf you are developing a service or extension, this is the LSP language server\nyou want to run.\n\nWhen developing vscode extensions, just the above is enough to get started for\nyour extension's `ServerOptions.run.module`, for example.\n\n`startServer` function takes the following parameters:\n\n| Parameter      | Required                                             | Description                                                                       |\n| -------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------- |\n| port           | `true` when method is `socket`, `false` otherwise    | port for the LSP server to run on                                                 |\n| method         | `false`                                              | `socket`, `streams`, or `node` (ipc)                                              |\n| config         | `false`                                              | custom `graphql-config` instance from `loadConfig` (see example above)            |\n| configDir      | `false`                                              | the directory where graphql-config is found                                       |\n| extensions     | `false`                                              | array of functions to transform the graphql-config and add extensions dynamically |\n| parser         | `false`                                              | Customize _all_ file parsing by overriding the default `parseDocument` function   |\n| fileExtensions | `false`. defaults to `['.js', '.ts', '.tsx, '.jsx']` | Customize file extensions used by the default LSP parser                          |\n\n### GraphQL configuration file\n\nYou _must_ provide a graphql config file\n\nCheck out [graphql-config](https://graphql-config.com/introduction) to learn the\nmany ways you can define your graphql config\n\n#### `.graphqlrc` or `.graphqlrc.yml/yaml` or `graphql.config.yml`\n\n```yaml\nschema: 'packages/api/src/schema.graphql'\ndocuments: 'packages/app/src/components/**/*.{tsx,ts}'\nextensions:\n  endpoints:\n    example:\n      url: 'http://localhost:8000'\n  customExtension:\n    foo: true\n```\n\n#### `.graphqlrc` or `.graphqlrc.json` or `graphql.config.json`\n\n```json\n{\n  \"schema\": \"https://localhost:8000\"\n}\n```\n\n#### `graphql.config.js` or `.graphqlrc.js`\n\n```js\nmodule.exports = { schema: 'https://localhost:8000' };\n```\n\n#### custom `startServer`\n\nuse graphql config [`loadConfig`](https://graphql-config.com/load-config) for\nfurther customization:\n\n```ts\nimport { loadConfig } from 'graphql-config'; // 3.0.0 or later!\n\n// with required params\nconst config = await loadConfig();\n\nawait startServer({\n  method: 'node',\n  // or instead of configName, an exact path (relative from rootDir or absolute)\n\n  // deprecated for: loadConfigOptions.rootDir. root directory for graphql config file(s), or for relative resolution for exact `filePath`. default process.cwd()\n  // configDir: '',\n  loadConfigOptions: {\n    // any of the options for graphql-config@3 `loadConfig()`\n    schema: await config.getSchema(),\n    // rootDir is same as `configDir` before, the path where the graphql config file would be found by cosmic-config\n    rootDir: 'config/',\n    // or - the relative or absolute path to your file\n    filePath: 'exact/path/to/config.js', // (also supports yml, json, ts, toml)\n    // myPlatform.config.js/json/yaml works now!\n    configName: 'myPlatform',\n  },\n});\n```\n\n<span id=\"custom-graphql-config\" />\n\n#### Custom `graphql-config` features\n\nThe graphql-config features we support are:\n\n```js\nmodule.exports = {\n  extensions: {\n    // add customDirectives (legacy). you can now provide multiple schema pointers to config.schema/project.schema, including inline strings. same with scalars or any SDL type that you'd like to append to the schema\n    customDirectives: ['@myExampleDirective'],\n    // a function that returns an array of validation rules, ala https://github.com/graphql/graphql-js/tree/main/src/validation/rules\n    // note that this file will be loaded by the vscode runtime, so the node version and other factors will come into play\n    customValidationRules: require('./config/customValidationRules'),\n    schemaCacheTTL: 1000, // reduce or increase minimum schema cache lifetime from 30000ms (30 seconds). you may want to reduce this if you are developing fullstack with network schema\n    languageService: {\n      // this is enabled by default if non-local files are specified in the project `schema`\n      // NOTE: this will disable all definition lookup for local SDL files\n      cacheSchemaFileForLookup: true,\n      // undefined by default which has the same effect as `true`, set to `false` if you are already using // `graphql-eslint` or some other tool for validating graphql in your IDE. Must be explicitly `false` to disable this feature, not just \"falsy\"\n      enableValidation: true,\n      // (experimental) enhanced auto expansion of graphql leaf fields and arguments\n      fillLeafsOnComplete: true,\n      // enable GraphQL.js 17 experimental fragment arguments across language features\n      experimentalFragmentArguments: true,\n      // instead of jumping directly to the SDL file, you can override definition peek/jump results to point to different files or locations\n      // (for example, source files for your schema in any language!)\n      // based on Relay vscode's pathToLocateCommand\n      // see LocateCommand type!\n      locateCommand(projectName, typePath, info) {\n        // pass more info, such as GraphQLType with the ast node. info.project is also available if you need it\n        const { path, range } = ourLookupUtility(\n          projectName,\n          typePath,\n          info.type.node,\n        );\n        return { uri: path, range }; // range.start.line/range.end.character/etc, base 1\n        // you can also return relay LSP style\n        // return '/path/to/file.py:20:1'; // (range: 20:1 20:1 )\n        // return '/path/to/file.py'; // (range: 1:1 1:1)\n      },\n    },\n  },\n};\n```\n\nor for multi-project workspaces:\n\n```ts\n// graphql.config.ts\nexport default {\n  projects: {\n    myProject: {\n      schema: [\n        // internally in `graphql-config`, an attempt will be made to combine these schemas into one in-memory schema to use for validation, lookup, etc\n        'http://localhost:8080',\n        './my-project/schema.graphql',\n        './my-project/schema.ts',\n        '@customDirective(arg: String!)',\n        'scalar CustomScalar',\n      ],\n      // project specific defaults\n      extensions: {\n        languageService: {\n          cacheSchemaFileForLookup: true,\n          enableValidation: false,\n        },\n      },\n    },\n    anotherProject: {\n      schema: {\n        'http://localhost:8081': {\n          customHeaders: { Authorization: 'Bearer example' },\n        },\n      },\n    },\n  },\n  // global defaults for all projects\n  extensions: {\n    languageService: {\n      cacheSchemaFileForLookup: false,\n      enableValidation: true,\n    },\n  },\n};\n```\n\nYou can specify any of these settings globally as above, or per project. Read\nthe graphql-config docs to learn more about this!\n\nFor secrets (headers, urls, etc), you can import `dotenv()` and set a base path\nas you wish in your `graphql-config` file to pre-load `process.env` variables.\n\n### Troubleshooting notes\n\n- you may need to manually restart the language server for some of these\n  configurations to take effect\n- graphql-config's multi-project support is not related to multi-root workspaces\n  in vscode - in fact, each workspace can have multiple graphql config projects,\n  which is what makes multi-root workspaces tricky to support. coming soon!\n\n<span id=\"workspace-configuration\" />\n\n### Workspace Configuration\n\nThe LSP Server reads config by sending `workspace/configuration` method when it\ninitializes.\n\nNote: We still do not support LSP multi-root workspaces but will tackle this\nvery soon!\n\nMany LSP clients beyond vscode offer ways to set these configurations, such as\nvia `initializationOptions` in nvim.coc. The options are mostly designed to\nconfigure graphql-config's load parameters, the only thing we can't configure\nwith graphql config. The final option can be set in `graphql-config` as well\n\n| Parameter                                 | Default                                           | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `graphql-config.load.baseDir`             | workspace root or process.cwd()                   | the path where graphql config looks for config files                                                                                                                                                                                                                                                |\n| `graphql-config.load.filepath`            | `null`                                            | exact filepath of the config file.                                                                                                                                                                                                                                                                  |\n| `graphql-config.load.configName`          | `graphql`                                         | config name prefix instead of `graphql`                                                                                                                                                                                                                                                             |\n| `graphql-config.load.legacy`              | `true`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `graphql-config.dotEnvPath`               | `null`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `vscode-graphql.cacheSchemaFileForLookup` | `true` if `schema` contains non-SDL files or URLs | generate an SDL file based on your graphql-config schema configuration for definition lookup and other features. enabled by default when your `schema` config are URLs or introspection JSON, or if you have any non-local SDL files in `schema`                                                    |\n| `vscode-graphql.schemaCacheTTL`           | `30000`                                           | an integer value in milliseconds for the desired minimum cache lifetime for all schemas, which also causes the generated file to be re-written. set to 30s by default. effectively a \"lazy\" form of polling. if you are developing a schema alongside client queries, you may want to decrease this |\n| `vscode-graphql.debug`                    | `false`                                           | show more verbose log output in the output channel                                                                                                                                                                                                                                                  |\n\nall the `graphql-config.load.*` configuration values come from static\n`loadConfig()` options in graphql config.\n\n(more coming soon!)\n\n### Architectural Overview\n\nGraphQL Language Service currently communicates via Stream transport with the\nIDE server. GraphQL server will receive/send RPC messages to perform language\nservice features, while caching the necessary GraphQL artifacts such as fragment\ndefinitions, GraphQL schemas etc. More about the server interface and RPC\nmessage format below.\n\nThe IDE server should launch a separate GraphQL server with its own child\nprocess for each `.graphqlrc.yml` file the IDE finds (using the nearest ancestor\ndirectory relative to the file currently being edited):\n\n```\n./application\n\n  ./productA\n    .graphqlrc.yml\n    ProductAQuery.graphql\n    ProductASchema.graphql\n\n  ./productB\n    .graphqlrc.yml\n    ProductBQuery.graphql\n    ProductBSchema.graphql\n```\n\nA separate GraphQL server should be instantiated for `ProductA` and `ProductB`,\neach with its own `.graphqlrc.yml` file, as illustrated in the directory\nstructure above.\n\nThe IDE server should manage the lifecycle of the GraphQL server. Ideally, the\nIDE server should spawn a child process for each of the GraphQL Language Service\nprocesses necessary, and gracefully exit the processes as the IDE closes. In\ncase of errors or a sudden halt the GraphQL Language Service will close as the\nstream from the IDE closes.\n\n### Server Interface\n\nGraphQL Language Server uses [JSON-RPC](http://www.jsonrpc.org/specification) to\ncommunicate with the IDE servers. Microsoft's language server currently supports\ntwo communication transports: Stream (stdio) and IPC. For IPC transport, the\nreference guide to be used for development is\n[the language server protocol](https://microsoft.github.io/language-server-protocol/specification)\ndocumentation.\n\nFor each transport, there is a slight difference in JSON message format,\nespecially in how the methods to be invoked are defined - below are the\ncurrently supported methods for each transport (will be updated as progress is\nmade):\n\n|                      | Stream                       | IPC                                         |\n| -------------------: | ---------------------------- | ------------------------------------------- |\n|          Diagnostics | `getDiagnostics`             | `textDocument/publishDiagnostics`           |\n|       Autocompletion | `getAutocompleteSuggestions` | `textDocument/completion`                   |\n|              Outline | `getOutline`                 | `textDocument/outline`                      |\n|     Document Symbols | `getDocumentSymbols`         | `textDocument/symbols`                      |\n|    Workspace Symbols | `getWorkspaceSymbols`        | `workspace/symbols`                         |\n|     Go-to definition | `getDefinition`              | `textDocument/definition`                   |\n| Workspace Definition | `getWorkspaceDefinition`     | `workspace/definition`                      |\n|          File Events | Not supported yet            | `didOpen/didClose/didSave/didChange` events |\n","isInternal":false,"tokens":3224,"sizeBytes":17529},{"name":"README.md","path":"packages/graphql-language-service/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/graphql-language-service/README.md","title":"graphql-language-service Documentation","category":"plugin-manifest","format":"markdown","content":"# `graphql-language-service`\n\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service.html)\n| [Discord](https://discord.gg/wkQCKwazxj)\n\n> **Note**: Still mostly experimental, however it depends mostly on stable\n> libraries. **Migration Note**: As of 3.0.0, the LSP Server command line\n> interface has been moved to\n> [`graphql-language-service-cli`](../graphql-language-service-cli)\n\n## Purpose\n\nThis package brings together all the dependencies for building out web or\ndesktop IDE services for the GraphQL Language.\n\nIt is named as such to match the convention of other vscode language services.\n\n## Interface\n\nLanguage Service Protocol (LSP) methods written in TypeScript used by\n[`graphql-language-service-server`](https://github.com/graphql/graphiql/tree/main/packages/graphql-language-service-server),\n[`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql)\nand\n[`codemirror-graphql`](https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql).\n\nThe goal is to provide methods for creating\n[Language Server Protocol](https://langserver.org) compliant services to be used\nby an IDE plugin, a browser application or desktop application.\n\n## Parser\n\nA standalone online, immutable, dependency-free parser for\n[GraphQL](https://graphql.org), used by the LSP interface methods.\n\nWith GraphQL.js 17, fragment variable definitions and fragment spread arguments\ncan be enabled for parsing, diagnostics, outlines, operation facts, autocomplete,\nand hover information. Pass `experimentalFragmentArguments: true` through the\nrelevant language-service options. The feature defaults to `false` because the\nconnected GraphQL server must also support the experimental syntax.\n\n## Utils\n\nVarious utilities\n","isInternal":false,"tokens":398,"sizeBytes":1883},{"name":"README.md","path":"packages/monaco-graphql/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/monaco-graphql/README.md","title":"monaco-graphql Documentation","category":"plugin-manifest","format":"markdown","content":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service_server.html)\n| [Discord Channel](https://discord.gg/r4BxrAG6fN)\n\nGraphQL language plugin for the Monaco Editor. You can use it to build\nvscode/codespaces-like web or desktop IDEs using whatever frontend javascript\nlibraries or frameworks you want, or none!\n\n- [webpack example](https://github.com/graphql/graphiql/tree/main/examples/monaco-graphql-webpack/)\n  using plain javascript, shows how to change schemas\n- [vite + react example](https://stackblitz.com/edit/monaco-graphql-react-vite?file=src%2FApp.tsx&terminal=dev) -\n  minimal example with variables (C)JSON support using react\n- [live demo](https://monaco-graphql.netlify.com) of the monaco webpack example\n  (prompts for GitHub access token!)\n\n> **NOTE:** This is in pre-release state as we build towards GraphiQL 2.0.x.\n> [`codemirror-graphql`](https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql)\n> has more features (such as JSON variables validation) and is more stable.\n\n## Features\n\nIt provides the following features while editing GraphQL files:\n\n- Configurable multi-model, multi-schema language worker with `fileMatch`\n  expressions\n- Code completion (schema driven) for Operation and SDL types\n  - Automatic expansion & completion on leaf type completion\n- Hover (schema driven) with markdown support\n- Validation (schema driven)\n- JSON Variables validation and language features (schema driven)\n- Formatting - using prettier\n- Syntax Highlighting & Basic Languages provided by `monaco-editor` basic\n  languages support\n- Configurable formatting options\n- Providing external fragments\n- create custom workers for custom language service options - parser, validation\n  rules, schemaBuilder, etc\n\n## Usage\n\nFor now, we use `language` id of `graphql` until we can ensure we can dovetail\nnicely with the official `graphql` language ID.\n\nTo use with webpack, here is an example to get you started:\n\n```sh\nyarn add monaco-graphql\n```\n\n## Sync Example\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport { initializeMode } from 'monaco-graphql/initializeMode'; // `monaco-graphql/esm/initializeMode` is deprecated but still works\n\n// you can also configure these using the webpack or vite plugins for `monaco-editor`\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\n// instantiates the worker & language features with the schema!\nconst MonacoGraphQLAPI = initializeMode({\n  // Opt in only when the connected server supports fragment arguments.\n  experimentalFragmentArguments: true,\n  schemas: [\n    {\n      schema: myGraphqlSchema as GraphQLSchema,\n      // anything that monaco.URI.from() is compatible with\n      uri: 'https://my-schema.com',\n      uri: '/my-schema.graphql',\n      // match the monaco file uris for this schema.\n      // accepts specific uris and anything `picomatch` supports.\n      // (everything except bracket regular expressions)\n      fileMatch: ['**/*.graphql'],\n      // note: not sure if ^ works if the graphql model is using urls for uris?\n    },\n  ],\n});\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    // if you are using vite or webpack plugin, it will be found here\n    return new Worker('editor.worker.js');\n  },\n};\nmonaco.editor.create(document.getElementById('someElementId'), {\n  value: 'query { }',\n  language: 'graphql',\n  formatOnPaste: true,\n});\n```\n\n## Lazy Example\n\nThe existing API works as before in terms of instantiating the schema.\nTo avoid manually calling getWorker(), you can use the monaco editor plugins for webpack or vite (see examples, and below)\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n// enables our language worker right away, despite no schema\nimport 'monaco-graphql';\n\n// you can also configure these using the webpack or vite plugins for `monaco-editor`\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\n// lazily invoke the api config methods whenever we want!\nmonaco.languages.graphql.setSchemaConfig([\n  {\n    schema: myGraphqlSchema as GraphQLSchema,\n    // anything that monaco.URI.from() is compatible with\n    uri: 'https://my-schema.com',\n    uri: '/my-schema.graphql',\n    // match the monaco file uris for this schema.\n    // accepts specific uris and anything `picomatch` supports.\n    // (everything except bracket regular expressions)\n    fileMatch: ['**/*.graphql'],\n    // note: not sure if ^ works if the graphql model is using urls for uris?\n  },\n]);\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    return new Worker('editor.worker.js');\n  },\n};\nmonaco.editor.create(document.getElementById('someElementId'), {\n  value: 'query { }',\n  language: 'graphql',\n  formatOnPaste: true,\n});\n```\n\nThis will cover the basics, making an HTTP POST with the default\n`introspectionQuery()` operation. To customize the entire fetcher, see\n[advanced customization](<>) below. For more customization options, see the\n[Monaco Editor API Docs](https://microsoft.github.io/monaco-editor/api/index.html)\n\n## Advanced Usage\n\n### Variables JSON Support!\n\nIn `monaco-graphql@0.5.0` we introduced a method `getVariablesJSONSchema` that\nallows you to retrieve a `JSONSchema` description for the declared variables for\nany given set of operations\n\n## Full Sync Demo with Variables JSON\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    return new Worker('editor.worker.js');\n  },\n};\n\n// the language service will be instantiated once the schema is available\nconst MonacoGraphQLAPI = initializeMode({\n  schemas: [\n    {\n      // anything that monaco.URI.from() is compatible with\n      uri: 'https://my-schema.com',\n      // match the monaco file uris for this schema.\n      // accepts specific filenames and anything `picomatch` supports.\n      fileMatch: ['**/*.graphql'],\n      schema: myGraphqlSchema as GraphQLSchema,\n    },\n  ],\n});\n\nconst operationModel = monaco.editor.createModel(\n  'query {}',\n  'graphql',\n  '/operation.graphql',\n);\n\nconst operationEditor = monaco.editor.create(\n  document.getElementById('someElementId'),\n  {\n    model: operationModel,\n    language: 'graphql',\n    formatOnPaste: true,\n  },\n);\n\nconst variablesSchemaUri = monaco.editor.URI.file('/variables-schema.json');\n\nconst variablesModel = monaco.editor.createModel(\n  '{}',\n  'json',\n  '/variables.json',\n);\n\nconst variablesEditor = monaco.editor.create(\n  document.getElementById('someElementId'),\n  {\n    model: variablesModel,\n    language: 'graphql',\n    formatOnPaste: true,\n  },\n);\n\n// high-level method for configuring json variables validation\nMonacoGraphQLAPI.setDiagnosticSettings({\n  validateVariablesJson: {\n    // Urls, uris, anything that monaco.URI.from() is compatible with.\n    // Match operation model to variables editor,\n    // and the language service will automatically listen for changes,\n    // and compute the json schema using the GraphQLWorker.\n    // This is in the main process is applied to the global monaco json settings\n    // for validation, completion and more using monaco-json's built-in JSON Schema support.\n    [operationModel.uri.toString()]: [variablesModel.uri.toString()],\n  },\n  jsonDiagnosticSettings: {\n    allowComments: true, // allow json, parse with a jsonc parser to make requests\n  },\n});\n\nMonacoGraphQL.setCompletionSettings({\n  // this auto-fills NonNull leaf fields\n  // it used to be on by default, but is annoying when\n  // fields contain required argument.\n  // hoping to fix that soon!\n  __experimental__fillLeafsOnComplete: true,\n});\n```\n\nYou can also experiment with the built-in `jsonc`? (JSON\nsyntax that allows comments and trailing commas, for `tsconfig.json`, etc.) and the 3rd party `monaco-yaml` language modes\nfor completion of other types of variable input. you can also experiment with\neditor methods to parse detected input into different formats, etc (`yaml`\npastes as `json`, etc.)\n\nYou could of course prefer to generate a `jsonschema` form for variables input\nusing a framework of your choice, instead of an editor. Enjoy!\n\n## `monaco-graphql/lite`\n\nYou can also import a \"lite\" version, and manually enable only the monaco features you want!\n\nWarning: by default, completion and other features will not work, only highlighting and validation.\n\n```ts\nimport { initializeMode } from 'monaco-graphql/lite';\n\n// enable completion\nimport 'monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution';\n\nconst api = initializeMode({\n  schemas: [\n    {\n      // anything that monaco.URI.from() is compatible with\n      uri: 'schema.graphql',\n      // match the monaco file uris for this schema.\n      // accepts specific filenames and anything `picomatch` supports.\n      fileMatch: ['operation.graphql'],\n      schema: myGraphqlSchema as GraphQLSchema,\n    },\n  ],\n});\n```\n\n## `MonacoGraphQLAPI` ([typedoc](https://graphiql-test.netlify.app/typedoc/classes/monaco_graphql.monacoMonacoGraphQLAPI.html))\n\nIf you call any of these API methods to modify the language service\nconfiguration at any point at runtime, the webworker will reload relevant\nlanguage features.\n\nIf you `import 'monaco-graphql'` synchronously, you can access the api via\n`monaco.languages.graphql.api`.\n\n```ts\nimport 'monaco-graphql';\n// now the api will be available on the `monaco.languages` global\nconst { api } = monaco.languages.graphql;\n```\n\n```ts\nimport 'monaco-graphql';\n\n// also this\nimport { languages } from 'monaco-editor';\n// now the api will be available on the `monaco.languages` global\nconst { api } = languages.graphql;\n```\n\nOtherwise, you can, like in the sync demo above:\n\n```ts\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nconst api = initializeMode(config);\n```\n\n### `monaco.languages.graphql.api.setSchemaConfig([SchemaConfig])`\n\nsame as the above, except it overwrites the entire schema config.\n\nyou can provide multiple, and use `fileMatch` to map to various uri \"directory\"\nglobs or specific files. `uri` can be an url or file path, anything parsable\n\n```ts\n// you can load it lazily\nimport 'monaco-graphql';\n\nmonaco.languages.graphql.api.setSchemaConfig([\n  {\n    schema: GraphQLSchema,\n    fileMatch: ['**/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n]);\n```\n\nor you can load the language features only when you have your schema\n\n```ts\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nconst schemas = [\n  {\n    schema: GraphQLSchema,\n    fileMatch: ['operations/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n];\nconst api = initializeMode({ schemas });\n\n// add another schema. this will cause language workers and features to reset\napi.setSchemaConfig([\n  ...schemas,\n  {\n    introspectionJSON: myIntrospectionJSON,\n    fileMatch: ['specific/monaco/uri.graphql'],\n    uri: 'another-schema.graphql',\n  },\n]);\n```\n\nor if you want, replace the entire configuration with a single schema. this will\ncause the worker to be entirely re-created and language services reset\n\n```ts\napi.setSchemaConfig([\n  {\n    introspectionJSON: myIntrospectionJSON,\n    fileMatch: ['**/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n]);\n```\n\n### `monaco.languages.graphql.api.setModeConfiguration()`\n\nThis is where you can toggle monaco language features. all are enabled by\ndefault.\n\n```ts\nmonaco.languages.graphql.api.setModeConfiguration({\n  documentFormattingEdits: true,\n  completionItems: true,\n  hovers: true,\n  documentSymbols: true,\n  diagnostics: true,\n});\n```\n\n### `monaco.languages.graphql.api.setFormattingOptions()`\n\nthis accepts an object `{ prettierConfig: prettier.Options }`, which accepts\n[any prettier option](https://prettier.io/docs/en/options.html). it will not\nre-load the schema or language features, however the new prettier options will\ntake effect.\n\nthis method overwrites the previous configuration, and will only accept static\nvalues that can be passed between the main/worker process boundary.\n\n```ts\nmonaco.languages.graphql.api.setFormattingOptions({\n  // if you wanna be like that\n  prettierOptions: { tabWidth: 2, useTabs: true },\n});\n```\n\n### `monaco.languages.graphql.api.setExternalFragmentDefinitions()`\n\nAppend external fragments to be used by autocomplete and other language\nfeatures.\n\nThis accepts either a string that contains fragment definitions, or\n`TypeDefinitionNode[]`\n\n### `monaco.languages.graphql.api.getDiagnosticOptions`\n\n```ts\nmonaco.languages.graphql.api.setDiagnosticSettings({\n  validateVariablesJson: {\n    // Urls, uris, anything that monaco.URI.from() is compatible with.\n    // Match operation model to variables editor,\n    // and the language service will automatically listen for changes,\n    // and compute the json schema using the GraphQLWorker.\n    // This is in the main process is applied to the global monaco json settings\n    // for validation, completion and more using monaco-json's built-in JSON Schema support.\n    [operationModel.uri.toString()]: [variablesModel.uri.toString()],\n  },\n  jsonDiagnosticSettings: {\n    allowComments: true, // allow json, parse with a jsonc parser to make requests\n  },\n});\n```\n\n## Bundlers\n\n### Webpack\n\nyou'll can refer to the webpack configuration in the\n[full monaco webpack example](/examples/monaco-graphql-webpack#readme) to see\nhow it works with webpack and the official `monaco-editor-webpack-plugin`. there\nis probably an easier way to configure webpack `worker-loader` for this.\n\n**Notes:**\n\n- for additional features, please specify them in `features` for the webpack plugin, or import them directly\n- if you are trying to add `typescript` as a language, there is an outstanding [bug with the webpack plugin](https://github.com/microsoft/monaco-editor/issues/2738), see our [next.js example](../../examples/monaco-graphql-nextjs/next.config.js) for the workaround. do not specify `languages: ['typescript']` or `javascript`\n\n### Vite\n\nYou can configure vite to load `monaco-editor` json mode and even the language\neditor worker using\n[the example for our mode](https://github.com/vdesjs/vite-plugin-monaco-editor#options)\n\nBe sure to import additional editor features and language modes manually, as the vite plugin only allows you to specify `languageWorkers`.\nSee the vite example to see how to add typescript support\n\n## Web Frameworks\n\nthe plain javascript\n[webpack example](https://github.com/graphql/graphiql/tree/main/examples/monaco-graphql-webpack/)\nshould give you a starting point to see how to implement it with\n\n### React\n\n- [`use-monaco`](https://www.npmjs.com/package/use-monaco) seems to support the\n  custom language worker configuration we want, and seems to be well built! we\n  hope to help them build their\n- when loading it yourself, either dynamic import the mode and/or instantiate it\n  yourself using `useEffect` on `didMount` to prevent breaking SSR.\n- it may work with other libraries by using a similar strategy to\n  [this](https://github.com/graphql/graphiql/blob/9df315b44896efa313ed6744445fc8f9e702ebc3/examples/monaco-graphql-webpack/src/editors.ts#L15).\n  you can also provide `MonacoEnvironment.getWorkerUrl` which works better as an\n  async import of your pre-build worker files\n\n## Custom Webworker (for passing non-static config to worker)\n\nIf you want to pass a custom parser and/or validation rules, it is supported,\nhowever the setup is a bit more complicated.\n\nYou can add any `LanguageServiceConfig`\n([typedoc](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service.html#graphqllanguageconfig-1))\nconfiguration options you like here to `languageConfig` as below.\n\nThis is because we can't pass non-static configuration to the existing worker\nprogrammatically, so you must import these and build the worker custom with\nthose functions. Part of the (worthwhile) cost of crossing runtimes!\n\nyou'll want to create your own `my-graphql.worker.ts` file, and add your custom\nconfig such as `schemaLoader` to `createData`:\n\n```ts\n// my-graphql.worker.ts\nimport type * as monaco from 'monaco-editor';\nimport type { ICreateData } from 'monaco-graphql';\n// @ts-expect-error -- ignore missing types\nimport { initialize } from 'monaco-editor/esm/vs/editor/editor.worker';\nimport { GraphQLWorker } from 'monaco-graphql/esm/GraphQLWorker';\nimport { GraphQLError, ValidationRule } from 'graphql';\n\nconst RequireOperationNameRule: ValidationRule = context => {\n  return {\n    OperationDefinition(node) {\n      if (node.name) {\n        return;\n      }\n      context.reportError(\n        new GraphQLError('Oops, all operations must be named.', {\n          nodes: [node],\n        }),\n      );\n    },\n  };\n};\n\nglobalThis.onmessage = () => {\n  initialize((ctx: monaco.worker.IWorkerContext, createData: ICreateData) => {\n    createData.languageConfig.customValidationRules = [\n      RequireOperationNameRule,\n    ];\n    return new GraphQLWorker(ctx, createData);\n  });\n};\n```\n\nthen, in your application:\n\n```ts\n// Vite query suffixes https://vite.dev/guide/features.html#import-with-query-suffixes\nimport EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';\nimport GraphQLWorker from './my-graphql.worker?worker';\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    return label === 'graphql' ? new GraphQLWorker() : new EditorWorker();\n  },\n};\n```\n\nor, if you have webpack configured for it:\n\n```ts\nglobalThis.MonacoEnvironment = {\n  getWorkerUrl(_workerId: string, label: string) {\n    return label === 'graphql' ? 'my-graphql.worker.js' : 'editor.worker.js';\n  },\n};\n```\n\nwith vite you just need:\n\n```ts\nimport { defineConfig } from 'vite';\nimport monacoEditorPlugin from 'vite-plugin-monaco-editor';\n\nexport default defineConfig({\n  plugins: [\n    monacoEditorPlugin({\n      customWorker: [\n        {\n          label: 'graphql',\n          entry: 'my-graphql.worker.js',\n        },\n      ],\n    }),\n  ],\n});\n```\n\n## Monaco Editor Tips\n\nIf you are familiar with Codemirror/Atom-era terminology and features, here's\nsome gotchas:\n\n- \"hinting\" => \"code completion\" in LSP terminology\n- \"linting\" => \"diagnostics\" in lsp terminology\n- the default keymap is different, more vscode like\n- command palette and right click context menu are important\n- you can extend the provided standard completion, linting, etc. for example,\n  `editor.setModelMarkers()`\n- [Monaco Editor API Docs](https://microsoft.github.io/monaco-editor/api/index.html)\n- [Monaco Editor Samples](https://github.com/Microsoft/monaco-editor-samples)\n  repository is great for tips on implementing with different bundlers,\n  runtimes, etc.\n\n## Avoid Bundle All `monaco-editor`'s Languages\n\nWhile importing `monaco-editor` in your project, you silently import 83 builtin\nlanguages, such as `typescript`, `html`, `css`, `json` and others. You can found\na full list of\n[basic-languages](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages)\nand\n[languages](https://github.com/microsoft/monaco-editor/tree/main/src/language).\n\nFor `monaco-graphql`, you need only 2 languages - `graphql` and `json`.\nIn version `monaco-graphql@1.3.0` and later, you can replace all `monaco-editor`'s\nimports with `monaco-graphql/monaco-editor` to improve performance, load\nonly `graphql` and `json` languages, and skip loading unused languages.\n\n```diff\n-import { ... } from 'monaco-editor'\n+import { ... } from 'monaco-graphql/monaco-editor'\n```\n\n> The `monaco-graphql/esm/*` import pattern is deprecated. It is retained for\n> backwards compatibility but the wildcard export that enables it is planned\n> for removal in the next major version. New code should use the canonical\n> subpaths: `monaco-graphql/monaco-editor`, `monaco-graphql/initializeMode`,\n> `monaco-graphql/graphql.worker`, `monaco-graphql/lite`.\n\n### Catch Future Import Mistakes with ESLint\n\nTo prevent mis-importing of `monaco-editor`, you can set up default\n`no-restricted-imports` rule for JavaScript projects or\n`@typescript-eslint/no-restricted-imports` for TypeScript projects.\n\n```json5\n{\n  rules: {\n    // or @typescript-eslint/no-restricted-imports\n    'no-restricted-imports': [\n      'error',\n      {\n        name: 'monaco-editor',\n        message: '`monaco-editor` imports all languages; use `monaco-graphql/monaco-editor` instead to import only `json` and `graphql` languages',\n      },\n    ],\n  },\n}\n```\n\n## Inspiration\n\n`microsoft/monaco-json` was our inspiration from the outset, when it was still a\nstandalone repository. @acao actually wholesale copied many files, you could\nalmost say it was a fork!\n\n## TODO\n\n- [x] variables JSON validation\n- [x] variables completion\n- [ ] Symbols & Definitions\n- [x] file uri-driven schema loading\n- [x] op -> schema & schema -> schema references\n- [x] `insertText` for field and argument completion\n","isInternal":false,"tokens":5038,"sizeBytes":21281},{"name":"README.md","path":"packages/vscode-graphql-execution/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/vscode-graphql-execution/README.md","title":"vscode-graphql-execution Documentation","category":"plugin-manifest","format":"markdown","content":"## `graphql.vscode-graphql-execution`\n\nThis extension provides standalone support for executing graphql operations\ninline in your code for:\n\n- .ts/.tsx\n- .js/.jsx\n- .graphql, .gql or .graphqls files\n\n## How it works\n\n1. A codelens will appear above all operations - clicking will begin executing\n   the operation.\n2. (If variables are specified in the operation), a dialog will prompt for these\n   variables\n3. Then, the results or network error should appear, voilà!\n4. If no endpoints are configured, it will exit early and tell you to define\n   them.\n\n## Configuring the extension\n\n### `graphql-config`\n\nYour graphql config file will need to contain either a schema-as-url OR an\nendpoints configuration. Either of the following are valid:\n\n```yaml\nschema: https://localhost:3000/graphql\n```\n\n```yaml\nschema: schema.graphql\nextensions:\n  endpoints:\n    default:\n      url: 'https://localhost:3000/graphql'\n```\n\n```yaml\nprojects:\n  app:\n    schema: schema.graphql\n    extensions:\n      endpoints:\n        default:\n          url: 'https://localhost:3000/graphql'\n```\n\n### Disable codelens\n\nTo disable the codelens, please specify this setting in `settings.json` or\n`user.json`:\n\n```json\n{\n  ...\n \"vscode-graphql-execution.showExecCodelens\": false\n}\n```\n\n### Self Signed Certificates\n\nEnable this (`false` by default) to allow node to use non-authorized SSL\ncertificates.\n\n```json\n{\n  \"vscode-graphql-execution.rejectUnauthorized\": true\n}\n```\n","isInternal":false,"tokens":357,"sizeBytes":1443},{"name":"README.md","path":"packages/vscode-graphql-syntax/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/vscode-graphql-syntax/README.md","title":"vscode-graphql-syntax Documentation","category":"plugin-manifest","format":"markdown","content":"# GraphQL Syntax Support\n\nAdds full GraphQL syntax highlighting and language support such as bracket\nmatching.\n\n- Supports `.graphql`/`.gql`/`.graphqls` highlighting\n- Javascript, Typescript & JSX/TSX (examples: [test.js](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.js) & [test.ts](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts))\n- Vue (examples: [test-sfc-comp.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc-comp.vue) & [test-sfc.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc.vue))\n- Svelte (example: [test.svelte](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte))\n- ReasonML/ReScript (`%graphql()` ) (example: [test.re](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.re))\n- Python (example: [test.py](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.py))\n- PHP (example: [test.php](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.php))\n- Markdown (examples: [test.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.md) & [test-py.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md))\n- Scala (example: [test.scala](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.scala))\n\nYou'll want to install this if you do not use `graphql-config`, or want to use\nthe highlighting with other extensions than `vscode-graphql`\n\n## Contributing\n\nFeel free to open a PR to fix, enhance any language support, or even add new\nlanguages 😍\n\nsee:\n\n- [the grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/)\n- [the applicable vscode docs](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide)\n\n### Contributor Guide: Improving a Language\n\nWhether fixing a bug or adding a new delimiter for your language, here are a few tips for you:\n\n1. TDD approach: add your bug case or new delimiter example to the relevant file in `tests/__fixtures__`\n1. run `pnpm test -- -u` in the syntax extension workspace, and observe whether vscode-textmate tokenizes your example properly\n1. fix/update/add the relevant pattern, and repeat the above to see if the tokenization changes. you should see `meta.embedded.block.graphql`\n1. to test manually, run `pnpm vsce:package` in the workspace and right click to install the bundled vsix extension, and open the fixture file\n\n<span id=\"adding-a-lang\"></span>\n\n### Contributor Guide: Adding a Language\n\n1.  add a file to [grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/) following our other examples.\n1.  be sure to add it to `package.json` contributions as well, in the `grammars` section. the `text.html.markdown` is for applying to markdown codeblocks\n1.  use a scope ala `source.{lang}` from a vscode-provided syntax grammar, or a popular, official contributed grammar. To find the name of the scope for any token's highlighting, use `Developer: Inspect Editor Tokens & Scopes` from the vscode command palette.\n1.  name it `inline.graphql.{lang}` for consistency\n1.  add a test file `tests/__fixture__` to document example usage, and a test spec to `__tests__` to assert the snapshot, pointing to the source you created\n1.  run `pnpm test -- -u` in the workspace to add the snapshot\n1.  use the snapshots to ensure your capture groups are working and serializing the graphql as expected\n1.  in the test fixture, document all working cases and non working cases with Todo comments for common usage in your language. be sure to think of cases such as string interpolation and generics for typed languages.\n1.  add it to the list above in the readme, with links to your test fixtures as usage documentation\n1.  to manually test it in vscode itself, run `pnpm vsce:package` in the syntax extension workspace and right click and install the bundled vsix file, then view the test fixture\n\n## Usage Note\n\nWe would love for the other graphql extension authors to freely use this syntax\nextension as well! Even if your extension is designed to replace\n`vscode-graphql`, or if it's designed for other other purposes. It uses an MIT\nlicense, but attribution is always a nice gesture to the original authors :)\n\n## License\n\nMIT License\n\nCopyright 2022 GraphQL Contributors\n","isInternal":false,"tokens":1119,"sizeBytes":4720},{"name":"README.md","path":"packages/vscode-graphql/README.md","rawUrl":"https://raw.githubusercontent.com/graphql/graphiql/HEAD/packages/vscode-graphql/README.md","title":"vscode-graphql Documentation","category":"plugin-manifest","format":"markdown","content":"[Changelog](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql/CHANGELOG.md)\n| [Discord Channel](https://discord.gg/r4BxrAG6fN) |\n[LSP Server Docs](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server/README.md)\n\nGraphQL extension for VSCode built with the aim to tightly integrate the GraphQL\nEcosystem with VSCode for an awesome developer experience.\n\n![](https://camo.githubusercontent.com/97dc1080d5e6883c4eec3eaa6b7d0f29802e6b4b/687474703a2f2f672e7265636f726469742e636f2f497379504655484e5a342e676966)\n\n### `.graphql`, `.gql` file extension support and `gql`/`graphql` tagged template literal support for tsx, jsx, ts, js\n\n- syntax highlighting (provided by `vscode-graphql-syntax`)\n- autocomplete suggestions\n- validation against schema\n- snippets (interface, type, input, enum, union)\n- hover support\n- go to definition support (input, enum, type)\n- outline support\n\n## Getting Started\n\n> **This extension requires a graphql-config file**.\n\nTo support language features like completion and \"go-to definition\" across multiple files,\nplease include `documents` in the `graphql-config` file default or per-project\n\n### Simplest Config Example\n\n```yaml\n# .graphqlrc.yml or graphql.config.yml\nschema: 'schema.graphql'\ndocuments: 'src/**/*.{graphql,js,ts,jsx,tsx}'\n```\n\n`package.json`:\n\n```json\n\"graphql\": {\n  \"schema\": \"https://localhost:3001/graphql\",\n  \"documents\": \"**/*.{graphql,js,ts,jsx,tsx}\"\n},\n```\n\n```ts\n// .graphqlrc.ts or graphql.config.ts\nexport default {\n  schema: 'schema.graphql',\n  documents: '**/*.{graphql,js,ts,jsx,tsx}',\n};\n```\n\nsame for .json, .toml, etc\n\n## Additional Features\n\n- Loads the LSP server upon detecting a `graphql-config` file at root level or in a\n  parent level directory, or a `package.json` file with `graphql` config\n- Loads `.graphql`, `.gql` files, and detects `gql`, `graphql` tags and `/** GraphQL */` and `#graphql` comments in js, ts, jsx, tsx, vue files\n- pre-load schema and fragment definitions\n- Support [`graphql-config`](https://graphql-config.com/) files with one or multiple projects (multi-root workspaces are not yet supported)\n- the language service re-starts on saved changes to vscode settings and/or graphql config!\n\n## Configuration\n\n| Parameter                                 | Default                                           | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `graphql-config.load.baseDir`             | workspace root or process.cwd()                   | the path where graphql config looks for config files                                                                                                                                                                                                                                                |\n| `graphql-config.load.filepath`            | `null`                                            | exact filepath of the config file.                                                                                                                                                                                                                                                                  |\n| `graphql-config.load.configName`          | `graphql`                                         | config name prefix instead of `graphql`                                                                                                                                                                                                                                                             |\n| `graphql-config.load.legacy`              | `true`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `graphql-config.dotEnvPath`               | `null`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `vscode-graphql.cacheSchemaFileForLookup` | `true` if `schema` contains non-SDL files or URLs | generate an SDL file based on your graphql-config schema configuration for definition lookup and other features. enabled by default when your `schema` config are URLs or introspection JSON, or if you have any non-local SDL files in `schema`                                                    |\n| `vscode-graphql.schemaCacheTTL`           | `30000`                                           | an integer value in milliseconds for the desired minimum cache lifetime for all schemas, which also causes the generated file to be re-written. set to 30s by default. effectively a \"lazy\" form of polling. if you are developing a schema alongside client queries, you may want to decrease this |\n| `vscode-graphql.debug`                    | `false`                                           | show more verbose log output in the output channel                                                                                                                                                                                                                                                  |\n\n### Advanced Example\n\nMulti-project can be used for both local files, URL defined schema, or both\n\n```js\nimport dotenv from 'dotenv';\ndotenv.config();\n\n// .graphqlrc.ts or graphql.config.ts\nexport default {\n  projects: {\n    app: {\n      schema: ['src/schema.graphql', 'directives.graphql'],\n      documents: ['**/*.{graphql,js,ts,jsx,tsx}', 'my/fragments.graphql'],\n    },\n    db: {\n      schema: 'src/generated/db.graphql',\n      documents: ['src/db/**/*.graphql', 'my/fragments.graphql'],\n      extensions: {\n        endpoints: {\n          default: {\n            url: 'https://localhost:3001/graphql/',\n            headers: {\n              Authorization: `Bearer ${process.env.API_TOKEN}`,\n            },\n          },\n        },\n      },\n    },\n  },\n};\n```\n\nNotice that `documents` key supports glob pattern and hence `[\"**/*.graphql\"]`\nis also valid.\n\n## Frequently Asked Questions\n\n### The extension fails with errors about duplicate types\n\nYour object types must be unique per project (as they must be unique per schema), and your fragment names must also be unique per project.\n\n### The extension fails with errors about missing scalars, directives, etc\n\nMake sure that your `schema` pointers refer to a complete schema!\n\n### In JSX and TSX files I see completion items I don't need\n\nThe way vscode lets you filter these out is\n[on the user end](https://github.com/microsoft/vscode/issues/45039)\n\nSo you'll need to add something like this to your global vscode settings:\n\n```json\n\"[typescriptreact]\": {\n  \"editor.suggest.filteredTypes\": {\n    \"snippet\": false\n  }\n},\n\"[javascriptreact]\": {\n  \"editor.suggest.filteredTypes\": {\n    \"snippet\": false\n  }\n}\n```\n\n### My graphql config file is not at the root\n\nGood news, we have configs for this now!\n\nYou can search a folder for any of the matching config file names listed above:\n\n```json\n\"graphql-config.load.rootDir\": \"./config\"\n\"graphql-config.dotEnvPath\": \"./config/.dev.env\"\n```\n\nOr a specific filepath:\n\n```json\n\"graphql-config.load.filepath\": \"./config/my-graphql-config.js\"\n```\n\nOr a different `configName` that allows different formats:\n\n```json\n\"graphql-config.load.rootDir\": \"./config\",\n\"graphql-config.load.configName\": \"acme\"\n```\n\nwhich would search for `./config/.acmerc`, `.config/.acmerc.js`,\n`.config/acme.config.json`, etc matching the config paths above\n\nIf you have multiple projects, you need to define one top-level config that\ndefines all project configs using `projects`\n\n### How do I enable language features for an embedded graphql string?\n\nPlease refer to the `vscode-graphql-syntax` reference files ([js](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.js),[ts](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts),[svelte](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte),[vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.vue)) to learn our template tag, comment and other graphql delimiter patterns for the file types that the language server supports. The syntax highlighter currently supports more languages than the language server. If you notice any places where one or the other doesn't work, please report it!\n\n## Known Issues\n\n- the locally generated schema file for definition lookup currently does not re-generate on schema changes. this will be fixed soon.\n- multi-root workspaces support will be added soon as well.\n- some graphql-config options aren't always honored, this will also be fixed soon\n\n## Attribution\n\nThanks to apollo for their\n[graphql-vscode grammars](https://github.com/apollographql/vscode-graphql/blob/main/syntaxes/graphql.js.json)!\nWe have borrowed from these on several occasions. If you are looking for the\nmost replete set of vscode grammars for writing your own extension, look no\nfurther!\n\n## Development\n\nThis plugin uses the\n[GraphQL language server](https://github.com/graphql/graphql-language-service-server)\n\n1.  Clone the repository - https://github.com/graphql/graphiql\n1.  `pnpm install`\n1.  Run \"VSCode Extension\" launcher in vscode\n1.  This will open another VSCode instance with extension enabled\n1.  Open a project with a graphql config file - \":electric_plug: graphql\" in\n    VSCode status bar indicates that the extension is in use\n1.  Logs for GraphQL language service will appear in output section under\n    GraphQL Language Service\n\n### Contributing back to this project\n\nThis repository is managed by EasyCLA. Project participants must sign the free\n([GraphQL Specification Membership agreement](https://preview-spec-membership.graphql.org))\nbefore making a contribution. You only need to do this one time, and it can be\nsigned by\n[individual contributors](http://individual-spec-membership.graphql.org) or\ntheir [employers](http://corporate-spec-membership.graphql.org).\n\nTo initiate the signature process please open a PR against this repo. The\nEasyCLA bot will block the merge if we still need a membership agreement from\nyou.\n\nYou can find\n[detailed information here](https://github.com/graphql/graphql-wg/tree/main/membership).\nIf you have issues, please email\n[operations@graphql.org](mailto:operations@graphql.org).\n\nIf your company benefits from GraphQL and you would like to provide essential\nfinancial support for the systems and people that power our community, please\nalso consider membership in the\n[GraphQL Foundation](https://foundation.graphql.org/join).\n\n## License\n\nMIT\n","isInternal":false,"tokens":2191,"sizeBytes":11720}],"systemPromptSnippet":"<yakaai_skills repo=\"graphql/graphiql\">\n<!-- File: packages/graphiql-toolkit/docs/create-fetcher.md (Tokens: ~1484 | Category: anthropic-skill) -->\n# `createGraphiQLFetcher`\n\nA utility for generating a full-featured `fetcher` for GraphiQL including\n`@stream`, `@defer` `IncrementalDelivery`and `multipart` and subscriptions using\n`graphql-ws` or the legacy websockets protocol.\n\nUnder the hood, it uses [`graphql-ws`](https://www.npmjs.com/package/graphql-ws)\nclient and [`meros`](https://www.npmjs.com/package/meros) which act as client\nreference implementations of the\n[GraphQL over HTTP Working Group Spec](https://github.com/graphql/graphql-over-http)\nspecification, and the most popular transport spec proposals.\n\n## Setup\n\nYou can install `@graphiql/toolkit` using your favorite package manager:\n\n```bash\nnpm install @graphiql/toolkit\n```\n\n## Getting Started\n\nWe have a few flexible options to get you started with the client. It's meant to\ncover the majority of common use cases with a simple encapsulation.\n\n### Default HTTP/Multipart IncrementalDelivery Usage\n\nHere's a simple example. In this case, a websocket client isn't even\ninitialized, only http (with multipart `@stream` and `@defer` Incremental\nDelivery support of course!).\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n### Adding `graphql-ws` websockets subscriptions\n\nFirst you'll need to install `graphql-ws` as a peer dependency:\n\n```bash\nnpm install graphql-ws\n```\n\nJust by providing the `subscriptionUrl`, you can also generate a `graphql-ws`\nclient. This client now supports both HTTP/Multipart Incremental Delivery for\n`@defer` and `@stream`, _and_ websockets subscriptions.\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url, subscriptionUrl });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\nYou can further customize the `graphql-ws` implementation by creating a custom\nclient instance and providing it as the `wsClient` parameter.\n\n## Options\n\n### `url` (_required_)\n\nThis is url used for all `HTTP` requests, and for schema introspection.\n\n### `subscriptionUrl`\n\nThis generates a `graphql-ws` client using the provided url. Note that a server\nmust be compatible with the new `graphql-ws` subscriptions spec for this to\nwork.\n\n### `wsClient`\n\nProvide your own subscriptions client. Using this option bypasses\n`subscriptionUrl`. In theory, this could be any client using any transport, as\nlong as it matches `graphql-ws` `Client` signature.\n\n## `wsConnectionParams`\n\nProvide your initial connection params.\n\n```jsx\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://localhost:3000',\n  subscriptionUrl: 'https://localhost:3001',\n  wsConnectionParams: { Authorization: 'token 1234' },\n});\n\nconst App = () => {\n  return <GraphiQL fetcher={fetcher} />;\n};\n```\n\n### `legacyWsClient` or `legacyClient`\n\nProvide a legacy subscriptions client using `subscriptions-transport-ws`\nprotocol. Using this option bypasses `subscriptionUrl`. In theory, this could be\nany client using any transport, as long as it matches\n`subscriptions-transport-ws` `Client` signature.\n\n### `headers`\n\nSpecify headers that will be passed to all requests.\n\n### `fetch`\n\nPass a custom fetch implementation such as `isomorphic-fetch`.\n\n## Customization Examples\n\n### Custom `wsClient` Example using `graphql-ws`\n\nThis example passes a `graphql-ws` client to the `wsClient` option:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { createClient } from 'graphql-ws';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  wsClient: createClient({\n    url: subscriptionUrl,\n    keepAlive: 2000,\n  }),\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n### Custom `legacyClient` Example\n\n(not recommended)\n\nBy providing the `legacyClient` you can support a `subscriptions-transport-ws`\nclient implementation, or equivalent:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { SubscriptionClient } from 'subscriptions-transport-ws';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst subscriptionUrl = 'wss://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  legacyWsClient: new SubscriptionClient(subscriptionUrl),\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\nNote that you will need to install the client separately:\n\n```bash\nnpm install subscriptions-transport-ws\n```\n\n### Custom `fetcher` Example\n\nFor SSR, we might want to use something like `isomorphic-fetch`:\n\n```jsx\nimport * as React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { GraphiQL } from 'graphiql';\nimport { fetch } from 'isomorphic-fetch';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst url = 'https://my-schema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url, fetch });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nconst root = createRoot(document.getElementById('graphiql'));\nroot.render(<App />);\n```\n\n## Credits\n\nThis is originally inspired by `graphql-subscriptions-fetcher` created by @Urigo\n\n<!-- File: packages/cm6-graphql/README.md (Tokens: ~431 | Category: plugin-manifest) -->\n# CodeMirror 6 GraphQL Language extension\n\n[![NPM](https://img.shields.io/npm/v/cm6-graphql.svg?style=flat-square)](https://npmjs.com/cm6-graphql)\n![npm downloads](https://img.shields.io/npm/dm/cm6-graphql?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/cm6-graphql.svg?style=flat-square)](LICENSE)\n[Discord Channel](https://discord.gg/cffZwk8NJW)\n\nProvides CodeMirror 6 extension with a parser mode for GraphQL along with\nautocomplete and linting powered by your GraphQL Schema.\n\n### Getting Started\n\n```sh\nnpm install cm6-graphql\n```\n\n[CodeMirror 6](https://codemirror.net/) customization is done through\n[extensions](https://codemirror.net/docs/guide/#extension). This package is\nan extension that customizes CodeMirror 6 for GraphQL.\n\n```js\nimport { basicSetup, EditorView } from 'codemirror';\nimport { graphql } from 'cm6-graphql';\n\nconst view = new EditorView({\n  doc: `mutation mutationName {\n    setString(value: \"newString\")\n  }`,\n  extensions: [basicSetup, graphql(myGraphQLSchema)],\n  parent: document.body,\n});\n```\n\n_**Note:** You have to provide a theme to CodeMirror 6 for the styling you want. You\ncan take a look at\n[this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts)\nor see the CodeMirror 6\n[documentation examples](https://codemirror.net/examples/styling/) for more\ndetails._\n\n### Updating schema\n\nIf you need to dynamically update the GraphQL schema used in the editor, you can\ncall `updateSchema` with the CodeMirror `EditorView` instance and the new schema\n\n```js\nimport { updateSchema } from 'cm6-graphql';\n\nconst onNewSchema = schema => {\n  updateSchema(view, schema);\n};\n```\n\n<!-- File: packages/codemirror-graphql/README.md (Tokens: ~836 | Category: plugin-manifest) -->\n# GraphQL mode for CodeMirror\n\n[![NPM](https://img.shields.io/npm/v/codemirror-graphql.svg?style=flat-square)](https://npmjs.com/codemirror-graphql)\n![npm downloads](https://img.shields.io/npm/dm/codemirror-graphql?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/codemirror-graphql.svg?style=flat-square)](LICENSE)\n[Discord Channel](https://discord.gg/cffZwk8NJW)\n\n**NOTE: For CodeMirror 6, use [cm6-graphql](/packages/cm6-graphql/) instead**\n\nProvides CodeMirror with a parser mode for GraphQL along with a live linter and\ntypeahead hinter powered by your GraphQL Schema.\n\n![Demo .gif of GraphQL Codemirror Mode](https://raw.githubusercontent.com/graphql/graphiql/main/packages/codemirror-graphql/resources/example.gif)\n\n### Getting Started\n\n```sh\nnpm install codemirror-graphql\n```\n\nCodeMirror helpers install themselves to the global CodeMirror when they are\nimported.\n\n```ts\nimport type { ValidationContext, SDLValidationContext } from 'graphql';\n\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n    validationRules: [ExampleRule],\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n  },\n});\n```\n\n## External Fragments Example\n\nIf you want to have autocompletion for external fragment definitions, there's a\nnew configuration setting available\n\n```ts\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nconst externalFragments = /* GraphQL */ `\n  fragment MyFragment on Example {\n    id: ID!\n    name: String!\n  }\n   fragment AnotherFragment on Example {\n    id: ID!\n    title: String!\n  }\n`;\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n    // here we use a string, but\n    // you can also provide an array of FragmentDefinitionNodes\n    externalFragments,\n  },\n});\n```\n\n### Custom Validation Rules\n\nIf you want to show custom validation, you can do that too! It uses the\n`ValidationRule` interface.\n\n```ts\nimport type { ValidationRule } from 'graphql';\n\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/hint/show-hint';\nimport 'codemirror/addon/lint/lint';\nimport 'codemirror-graphql/hint';\nimport 'codemirror-graphql/lint';\nimport 'codemirror-graphql/mode';\n\nconst ExampleRule: ValidationRule = context => {\n  // your custom rules here\n  const schema = context.getSchema();\n  const document = context.getDocument();\n  return {\n    NamedType(node) {\n      if (node.name.value !== node.name.value.toLowercase()) {\n        context.reportError('only lowercase type names allowed!');\n      }\n    },\n  };\n};\n\nCodeMirror.fromTextArea(myTextarea, {\n  mode: 'graphql',\n  lint: {\n    schema: myGraphQLSchema,\n    validationRules: [ExampleRule],\n  },\n  hintOptions: {\n    schema: myGraphQLSchema,\n  },\n});\n```\n\nBuild for the web with [webpack](http://webpack.github.io) or\n[browserify](http://browserify.org).\n\n<!-- File: packages/graphiql-plugin-code-exporter/README.md (Tokens: ~545 | Category: plugin-manifest) -->\n# GraphiQL Code Exporter Plugin\n\nThis package provides a plugin that integrates the\n[GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.\n\n## Installation\n\nInstall the plugin using your preferred package manager:\n\n```sh\nnpm install @graphiql/plugin-code-exporter\n```\n\nMake sure to also install the required peer dependencies:\n\n```sh\nnpm install react react-dom graphql\n```\n\n## Usage\n\nRefer to the\n[GraphiQL Code Exporter README](https://github.com/OneGraph/graphiql-code-exporter) for full details on available `props` and how to [create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).\n\nExample integration:\n\n```jsx\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { codeExporterPlugin } from '@graphiql/plugin-code-exporter';\nimport 'graphiql/style.css';\nimport '@graphiql/plugin-code-exporter/style.css';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://countries.trevorblades.com',\n});\nfunction getQuery(arg, spaceCount = 2) {\n  const spaces = ' '.repeat(spaceCount);\n  const { query } = arg.operationDataList[0];\n  return spaces + query.replaceAll('\\n', '\\n' + spaces);\n}\n\nconst codeExporter = codeExporterPlugin({\n  /**\n   * Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details.\n   */\n  snippets: [\n    {\n      name: 'Example One',\n      language: 'JavaScript',\n      codeMirrorMode: 'jsx',\n      options: [],\n      generate: arg =>\n        ['export const query = graphql`', getQuery(arg), '`'].join('\\n'),\n    },\n    {\n      name: 'Example Two',\n      language: 'JavaScript',\n      codeMirrorMode: 'jsx',\n      options: [],\n      generate: arg =>\n        [\n          \"import { graphql } from 'graphql'\",\n          '',\n          'export const query = graphql`',\n          getQuery(arg),\n          '`',\n        ].join('\\n'),\n    },\n  ],\n});\nfunction App() {\n  return <GraphiQL fetcher={fetcher} plugins={[codeExporter]} />;\n}\n```\n\n## CDN bundles\n\nYou can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh).\n\nSee the [CDN example](./example/index.html) for a working demo.\n\n<!-- File: packages/graphiql-plugin-doc-explorer/README.md (Tokens: ~42 | Category: plugin-manifest) -->\n# `@graphiql/plugin-doc-explorer`\n\n## API\n\n- `useDocExplorer`: Handles the state for the doc explorer\n- `useDocExplorerActions`: Actions related to the doc explorer\n\n<!-- File: packages/graphiql-plugin-explorer/README.md (Tokens: ~279 | Category: plugin-manifest) -->\n# GraphiQL Explorer Plugin\n\nThis package provides a plugin that integrates the\n[`GraphiQL Explorer`](https://github.com/OneGraph/graphiql-explorer) into the GraphiQL UI.\n\n## Installation\n\nUse your preferred package manager to install the plugin:\n\n```sh\nnpm install @graphiql/plugin-explorer\n```\n\nMake sure to also install the required peer dependencies:\n\n```sh\nnpm install react react-dom graphql\n```\n\n## Usage\n\n```jsx\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { explorerPlugin } from '@graphiql/plugin-explorer';\nimport 'graphiql/style.css';\nimport '@graphiql/plugin-explorer/style.css';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',\n});\n\n// Pass the explorer props here if you want\nconst explorer = explorerPlugin();\n\nfunction GraphiQLWithExplorer() {\n  return <GraphiQL fetcher={fetcher} plugins={[explorer]} />;\n}\n```\n\n## CDN bundles\n\nYou can also use this plugin via an ESM-based CDN like [esm.sh](https://esm.sh).\n\nSee the [CDN example](./example/index.html) for a working demo.\n\n<!-- File: packages/graphiql-plugin-history/README.md (Tokens: ~36 | Category: plugin-manifest) -->\n# `@graphiql/plugin-history`\n\n## API\n\n- `useHistory`: Persists executed requests in storage\n- `useHistoryActions`: Actions related to the history\n\n<!-- File: packages/graphiql-react/README.md (Tokens: ~1522 | Category: plugin-manifest) -->\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html)\n| [NPM](https://www.npmjs.com/package/@graphiql/react)\n\n# `@graphiql/react`\n\nA React SDK for building integrated GraphQL developer experiences for the web.\n\n## Purpose\n\nThis package contains a set of building blocks that allow its users to build\nGraphQL IDEs with ease. It's the set of components that make up Graph*i*QL, the\nfirst and official GraphQL IDE, owned and maintained by the GraphQL Foundation.\n\nThere are two kinds of building blocks that this package provides: Stateful\ncontext providers for state management and simple UI components.\n\n## Getting started\n\nAll the state for your GraphQL IDE lives in multiple contexts. The easiest way\nto get started is by using the `GraphiQLProvider` component that renders all the\nindividual providers.\n\nThere is one required prop called `fetcher`. This is a function that performs\nGraphQL request against a given endpoint. You can easily create a fetcher using\nthe method `createGraphiQLFetcher` from the `@graphiql/toolkit` package.\n\n```jsx\nimport { GraphiQLProvider } from '@graphiql/react';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst fetcher = createGraphiQLFetcher({\n  url: 'https://my.graphql.api/graphql',\n});\n\nfunction MyGraphQLIDE() {\n  return (\n    <GraphiQLProvider fetcher={fetcher}>\n      <div className=\"graphiql-container\">Hello GraphQL</div>\n    </GraphiQLProvider>\n  );\n}\n```\n\nInside the provider you can now use any UI component provided by\n`@graphiql/react`. For example, you can render an operation editor like this:\n\n```jsx\nimport { QueryEditor } from '@graphiql/react';\n\nfunction MyGraphQLIDE() {\n  return (\n    <GraphiQLProvider fetcher={fetcher}>\n      <div className=\"graphiql-container\">\n        <QueryEditor />\n      </div>\n    </GraphiQLProvider>\n  );\n}\n```\n\nThe package also ships the necessary CSS that all its UI components need. You\ncan import them from `@graphiql/react/style.css`.\n\n> **Note**: In order for these styles to apply, the UI components need to be\n> rendered inside an element that has a class name `graphiql-container`.\n\nBy default, the UI components will try to use the\n[Roboto](https://fonts.google.com/specimen/Roboto) font for regular text and the\n[Fira Code](https://fonts.google.com/specimen/Fira+Code) font for mono-space\ntext. If you want to use the default fonts you can load them using these files:\n\n- `@graphiql/react/font/roboto.css`\n- `@graphiql/react/font/fira-code.css`.\n\nYou can, of course, use any other method to load these fonts (for example, loading\nthem from Google Fonts).\n\nFurther details on how to use `@graphiql/react` can be found in the reference\nimplementation of a GraphQL IDE - Graph*i*QL - in the\n[`graphiql` package](https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/components/GraphiQL.tsx).\n\n## Available Stores\n\nGraphiQL uses a set of state management stores, each responsible for a specific part of the IDE's\nbehavior. These stores contain all logic related to state management and can be accessed via custom\nReact hooks.\n\n### Core Hooks\n\n- **`useMonaco`**: Access `monaco-editor` exports and the `monaco-graphql` instance. Designed for safe use in SSR environments.\n- **`useGraphiQL`**: Access the current state.\n- **`useGraphiQLActions`**: Trigger actions that mutate the state. This hook **never** rerenders.\n\nThe `useGraphiQLActions` hook **exposes all actions** across store slices.\nThe `useGraphiQL` hook **provides access to the following store slices**:\n\n| Store Slice                              | Responsibilities                                                                                          |\n| ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| [`storage`](./src/stores/storage.ts)     | Provides a storage API that can be used to persist state in the browser (by default using `localStorage`) |\n| [`editor`](./src/stores/editor.ts)       | Manages **query**, **variables**, **headers**, and **response** editors and tabs                          |\n| [`execution`](./src/stores/execution.ts) | Handles the execution of GraphQL requests                                                                 |\n| [`plugin`](./src/stores/plugin.ts)       | Manages plugins and the currently active plugin                                                           |\n| [`schema`](./src/stores/schema.ts)       | Fetches, validates, and stores the GraphQL schema                                                         |\n| [`theme`](./src/stores/theme.ts)         | Manages the current theme and provides a method to update it                                              |\n\n### Usage Example\n\n```js\nimport { useGraphiQL, useGraphiQLActions } from '@graphiql/react';\n\n// Get an action to fetch the schema and an action to change theme\nconst { introspect, setTheme } = useGraphiQLActions();\n\n// Use a selector to access specific parts of the state like current schema and theme\nconst { schema, theme } = useGraphiQL(state => ({\n  schema: state.schema,\n  theme: state.theme,\n}));\n```\n\nAll store properties are documented using TSDoc comments. If you're using an\nIDE like VSCode for development, these descriptions will show up in auto-complete\ntooltips. All these descriptions can also be found in the\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html).\n\n## Theming\n\nAll the components from `@graphiql/react` have been designed with customization\nin mind. We achieve this using CSS variables.\n\nAll variables that are available for customization can be found in the\n[`root.css` file](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/src/style/root.css).\n\n### Colors\n\nColors are defined using the\n[HSL format](https://en.wikipedia.org/wiki/HSL_and_HSV). All CSS variables for\ncolors are defined as a list of the three values that make up HSL (hue,\nsaturation and lightness).\n\nThis approach allows `@graphiql/react` to use transparent colors by passing the\nvalue of the CSS variable in the `hsla` function. This enables us to provide\ntruly reusable UI elements where good contrasts are preserved regardless of the\nelements background.\n\n## Development\n\nIf you want to develop with `@graphiql/react` locally - in particular when\nworking on the `graphiql` package - all you need to do is run `pnpm dev` in the\npackage folder in a separate terminal. This will build the package using Vite.\nWhen using it in combination with `pnpm dev:graphiql` (running in the repo\nroot) this will give you auto-reloading when working on `graphiql` and\n`@graphiql/react` simultaneously.\n\n<!-- File: packages/graphiql-toolkit/README.md (Tokens: ~191 | Category: plugin-manifest) -->\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-toolkit/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_toolkit.html)\n| [NPM](https://www.npmjs.com/package/@graphiql/toolkit) |\n[Discord](https://discord.gg/NP5vbPeUFp)\n\n# `@graphiql/toolkit`\n\nThis is a general purpose library for building GraphQL IDEs. It's being used by\nother packages like `graphiql` and `@graphiql/react` and also provides utilities\nthat are useful when working with these packages.\n\n## Docs\n\n- **[`createFetcher`](./docs/create-fetcher.md)** : a utility for creating a\n  `fetcher` prop implementation for HTTP GET, POST including multipart,\n  websockets fetcher\n- more to come!\n\n<!-- File: packages/graphiql/README.md (Tokens: ~2380 | Category: plugin-manifest) -->\n# GraphiQL\n\n> **Security Notice:** All versions of `graphiql` < `1.4.3` are vulnerable to an\n> XSS attack in cases where the GraphQL server to which the GraphiQL web app\n> connects is not trusted. Learn more in\n> [our security advisory](https://github.com/graphql/graphiql/tree/main/docs/security/2021-introspection-schema-xss.md).\n\n[![NPM](https://img.shields.io/npm/v/graphiql.svg)](https://npmjs.com/graphiql)\n![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/graphiql)\n![npm downloads](https://img.shields.io/npm/dm/graphiql?label=npm%20downloads)\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/graphiql)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/min/graphiql/latest)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/graphiql/latest)\n[![License](https://img.shields.io/npm/l/graphiql.svg?style=flat-square)](LICENSE)\n[![](https://dcbadge.vercel.app/api/server/NP5vbPeUFp?style=flat)](https://discord.gg/NP5vbPeUFp)\n\n_/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE.\n[Try the live demo](https://graphql.org/swapi-graphql).\n\n[![](resources/graphiql.png)](https://graphql.org/swapi-graphql)\n\n## Features\n\n- Full language support of the latest\n  [GraphQL Specification](https://spec.graphql.org/draft/#sec-Language):\n- Syntax highlighting\n- Intelligent type ahead of fields, arguments, types, and more\n- Real-time error highlighting and reporting for queries and variables\n- Automatic query and variables completion\n- Automatic leaf node insertion for non-scalar fields\n- Documentation explorer with search and markdown support\n- Persisted state using `localStorage`\n- Simple API for adding custom plugins\n\n## Live Demos\n\n- The [latest stable version](https://graphql.org/swapi-graphql)\n- The current state of the `main` branch:\n  - An [installable PWA](https://graphiql-test.netlify.com/webpack) with plugins ([source](../../examples//graphiql-webpack))\n  - Using the [minified bundles](https://graphiql-test.netlify.com)\n  - Using the [development bundles](https://graphiql-test.netlify.com/dev) (good\n    for inspecting, debugging, etc)\n- Each pull request will also get its own preview deployment on Netlify, you'll\n  find a link in the GitHub checks\n\n## Examples\n\n- [`CDN (ESM-based)`](../../examples/graphiql-cdn) - A single HTML file using [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) from http URLs and a `<script>` tag\n- [`Webpack`](../../examples/graphiql-webpack) - A starter for Webpack\n- [`Create React App`](../../examples/graphiql-create-react-app) - An example\n  using [Create React App](https://create-react-app.dev)\n- [`Parcel`](../../examples/graphiql-parcel) - An example using\n  [Parcel](https://parceljs.org)\n\n## Getting started\n\n- [Migration guide to GraphiQL 2](../../docs/migration/graphiql-2.0.0.md)\n- [Migration guide to GraphiQL 4](../../docs/migration/graphiql-4.0.0.md)\n- [Migration guide to GraphiQL 5](../../docs/migration/graphiql-5.0.0.md)\n\n### CDN usage\n\n#### ESM-based (recommended)\n\nUse the modern, ESM-based CDN approach.\nSee the [ESM-based example](../../examples/graphiql-cdn) for setup details.\n\n#### UMD (deprecated)\n\n> [!WARNING]\n>\n> The UMD CDN build is **deprecated** and will be removed in a future major release of GraphiQL.\n> Please migrate to the [ESM-based example](../../examples/graphiql-cdn).\n\n## Usage\n\n### Using as package\n\nThe `graphiql` package can be installed using your favorite package manager. You\nalso need to have `react`,`react-dom` and `graphql` installed which are peer\ndependencies of `graphiql`.\n\n```sh\nnpm install graphiql react react-dom graphql\n```\n\nThe package exports a bunch of React components:\n\n- The `GraphiQLProvider` components renders multiple context providers that\n  encapsulate all state management\n- The `GraphiQLInterface` component renders the UI that makes up GraphiQL\n- The `GraphiQL` component is a combination of both the above components\n\nThere is a single prop that is required for the `GraphiQL` component called\nfetcher. A fetcher is a function that performs a request to a GraphQL API. It\nmay return a `Promise` for queries or mutations, but also an `Observable` or an\n`AsyncIterable` in order to handle subscriptions or multipart responses.\n\nAn easy way to get create such a function is the\n[`createGraphiQLFetcher`](../graphiql-toolkit/src/create-fetcher/createFetcher.ts)\nmethod exported from the `@graphiql/toolkit` package. If you want to implement\nyour own fetcher function, you can use the `Fetcher` type from\n`@graphiql/toolkit` to make sure the signature matches what GraphiQL expects.\n\nThe following is everything you need to render GraphiQL in your React\napplication:\n\n```jsx\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\nimport { GraphiQL } from 'graphiql';\nimport { createRoot } from 'react-dom/client';\nimport 'graphiql/style.css';\n\nconst fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(<GraphiQL fetcher={fetcher} />);\n```\n\nWhen the connected server supports GraphQL.js 17 fragment arguments, opt in\nwith `<GraphiQL fetcher={fetcher} experimentalFragmentArguments />`. The syntax\nis disabled by default.\n\n## Customize\n\nGraphiQL supports customization in UI and behavior by accepting React props and\nchildren.\n\n### Props\n\nFor props documentation, see the\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops-1)\n\n### Children\n\nParts of the UI can be customized by passing children to the `GraphiQL` or the\n`GraphiQLInterface` component.\n\n- `<GraphiQL.Logo>`: Replace the GraphiQL logo with your own.\n\n- `<GraphiQL.Toolbar>`: Add a custom toolbar below the execution button. Pass\n  the empty `<GraphiQL.Toolbar />` if an empty toolbar is desired. Use the\n  components provided by `@graphiql/react` to create toolbar buttons with proper\n  styles.\n\n- `<GraphiQL.Footer>`: Add a custom footer shown below the response editor.\n\n### Plugins\n\nStarting with `graphiql@2` there exists a simple plugin API that allows you to\nbuild your own custom tools right into GraphiQL.\n\nThere are two built-in plugins that come with GraphiQL: The documentation\nexplorer and the query history. Both can be toggled using icons in the sidebar\non the left side of the screen. When opened, they appear next to the sidebar in\na resizable portion of the screen.\n\nTo define your own plugin, all you need is a JavaScript object with three\nproperties:\n\n- `title`: A unique title for the plugin (this will show up in a tooltip when\n  hovering over the sidebar icon)\n- `icon`: A React component that renders an icon which will be included in the\n  sidebar\n- `content`: A React component that renders the plugin contents which will be\n  shown next to the sidebar when opening the plugin\n\nYou can pass a list of plugin objects to the `GraphiQL` component using the\n`plugins` prop. You can also control the visibility state of plugins using the\n`visiblePlugin` prop and react to changes of the plugin visibility state using\nthe `onTogglePluginVisibility` prop.\n\nInside the component you pass to `content` you can interact with the GraphiQL\nstate using the hooks provided by `@graphiql/react`. For example, check out\nhow you can integrate the OneGraph Explorer in GraphiQL using the plugin API in\nthe [plugin package](../graphiql-plugin-explorer) in this repo.\n\n### Theming\n\nThe GraphiQL interface uses CSS variables for theming, in particular for colors.\nCheck out the [`root.css`](../graphiql-react/src/style/root.css) file for the\navailable variables.\n\nOverriding these variables is the only officially supported way of customizing\nthe appearance of GraphiQL. Starting from version 2, class names are no longer\nbe considered stable and might change between minor or patch version updates.\n\n### Editor Theme\n\nThe colors inside the editor can also be altered using\n[CodeMirror editor themes](https://codemirror.net/demo/theme.html). You can use\nthe `editorTheme` prop to pass in the name of the theme. The CSS for the theme\nhas to be loaded for the theme prop to work.\n\n```jsx\n// In your document head:\n<link\n  rel=\"stylesheet\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/solarized.css\"\n/>\n```\n\n```jsx\n// When rendering GraphiQL:\n<GraphiQL editorTheme=\"solarized light\" />\n```\n\nYou can also create your own theme in CSS. As a reference, the default\n`graphiql` theme definition can be found\n[here](../graphiql-react/src/style/codemirror.css).\n\n## Usage with a Custom Storage Namespace\n\nWhen multiple GraphiQL instances run on the same origin—such as in different apps or\nenvironments—they can conflict by reading from and writing to the same `localStorage` keys. To\nprevent this, you can provide a custom `storage` object that prefixes all keys with a unique\nnamespace, isolating each instance’s state and avoiding collisions.\n\n```tsx\nimport type { FC } from 'react';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/toolkit';\n\nconst fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });\n\nconst NAMESPACE = 'my-namespace';\n\nconst storage: typeof localStorage = {\n  ...localStorage,\n  getItem(key) {\n    return localStorage.getItem(`${NAMESPACE}:${key}`);\n  },\n  setItem(key, value) {\n    return localStorage.setItem(`${NAMESPACE}:${key}`, value);\n  },\n  removeItem(key) {\n    return localStorage.removeItem(`${NAMESPACE}:${key}`);\n  },\n};\n\nexport const App: FC = () => {\n  return <GraphiQL fetcher={fetcher} storage={myStorage} />;\n};\n```\n\n<!-- File: packages/graphiql/test/README.md (Tokens: ~83 | Category: plugin-manifest) -->\n# Test GraphiQL Application\n\nThis test folder serves as a basis for testing in-development changes and offers\nwatching/compiling of the `src` folder. To utilize this, simply:\n\n1. Run `npm install`\n2. Run `npm run dev`\n3. Open your browser to the address listed in your console. e.g.\n   `Started on http://localhost:49811/`\n\n<!-- File: packages/graphql-language-service-cli/README.md (Tokens: ~988 | Category: plugin-manifest) -->\n# graphql-language-service-cli\n\n> Note: As of 3.0.0, this package has been renamed from\n> `graphql-language-service` to `graphql-language-service-cli`. please now use\n> the `graphql-lsp` bin, instead of the `graphql` binary.\n\n[![NPM](https://img.shields.io/npm/v/graphql-language-service-cli.svg)](https://npmjs.com/graphql-language-service-cli)\n![npm downloads](https://img.shields.io/npm/dm/graphql-language-service-vli?label=npm%20downloads)\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/codemirror-graphql)\n[![License](https://img.shields.io/npm/l/graphql-language-service.svg?style=flat-square)](LICENSE)\n\n_We welcome your feedback and suggestions._\n\nGraphQL Language Service provides an interface for building GraphQL language\nservices for IDEs.\n\nAlmost 100% for\n[Microsoft's Language Server Protocol](https://github.com/Microsoft/language-server-protocol)\nis in place\n\nSupported features include:\n\n- Diagnostics (GraphQL syntax linting/validations) (**spec-compliant**)\n- Autocomplete suggestions (**spec-compliant**)\n- Hyperlink to fragment definitions and named types (type, input, enum)\n  definitions (**spec-compliant**)\n- Outline view support for queries and SDL\n- Symbols support across the workspace\n\nsee more information at\n[`graphql-language-service-server`](https://npmjs.com/graphql-language-service-server)\n\n## Installation and Usage\n\n### Dependencies\n\nAn LSP-compatible client with a file watcher that sends watch notifications to\nthe server.\n\n**DROPPED**: GraphQL Language Service no longer depends on\n[Watchman](https://facebook.github.io/watchman/)\n\nOnly node 9 or greater, and npm or yarn are required dependencies.\n\n### Installation\n\nwith `yarn`:\n\n```sh\nyarn global add graphql-language-service-cli\n```\n\nwith `npm`:\n\n```sh\nnpm install -g graphql-language-service-cli\n```\n\neither will install the `graphql-lsp` bin globally\n\n### GraphQL configuration file (`.graphqlrc.yml`)\n\nCheck out [graphql-config](https://graphql-config.com/docs)\n\nThe custom graphql language configurations are:\n\n- `customDirectives` - `['@myExampleDirective']`\n- `customValidationRules` - returns rules array with parameter\n  `ValidationContext` from `graphql/validation`\n\n### LSP Workspace Configuration\n\nWhen running `server`, your LSP-compatible client can\n[provide additional workspace configuration](https://npmjs.com/graphql-language-service-server#workspace-configuration).\n\nFor example, `coc.nvim` allows for providing custom `settings`\n\n```json\n\"languageserver\": {\n  \"graphql\": {\n    \"command\": \"graphql-lsp\",\n    \"args\": [\"server\", \"-m\", \"stream\"],\n    // customize filetypes to your needs\n    \"filetypes\": [\"typescript\", \"typescriptreact\", \"graphql\"],\n    \"settings\": {\n        \"graphql-config.load.legacy\": true\n    }\n  }\n}\n```\n\nthis would allow for legacy `graphql-config` file formats like `.graphqlconfig`,\nuseful on projects maintaining compatibility with the intellij plugin\n\n### Using the command-line interface\n\n```sh\ngraphql-lsp server --schema=localhost:3000\n```\n\nThe node executable contains several commands: `server` and the command-line\nlanguage service methods (`validate`, `autocomplete`, `outline`).\n\n### CLI Options\n\n```\nUsage: graphql-lsp <command> <file>\n\n[-h | --help][-c | --configDir] {configDir}\n[-t | --text] {textBuffer}\n[-f | --file] {filePath}\n[-s | --schema] {schemaPath}\n\nOptions:\n\n-h, --help Show help [boolean]\n\n-t, --text Text buffer to perform GraphQL diagnostics on.\nWill defer to --file option if omitted.\nOverrides the --file option, if any.\n[string]\n\n-f, --file File path to perform GraphQL diagnostics on.\nWill be ignored if --text option is supplied.\n[string]\n\n--row A row number from the cursor location for GraphQL\nautocomplete suggestions.\nIf omitted, the last row number will be used.\n[number]\n\n--column A column number from the cursor location for GraphQL\nautocomplete suggestions.\nIf omitted, the last column number will be used.\n[number]\n\n-c, --configDir Path to the .graphqlrc.yml configuration file.\nWalks up the directory tree from the provided config\ndirectory, or the current working directory, until a\n.graphqlrc is found or the root directory is found.\n[string]\n\n-s, --schemaPath a path to schema DSL file\n[string]\n\nAt least one command is required.\nCommands: \"server, validate, autocomplete, outline\"\n\n```\n\n<!-- File: packages/graphql-language-service-server/README.md (Tokens: ~3224 | Category: plugin-manifest) -->\n# graphql-language-service-server\n\n[![NPM](https://img.shields.io/npm/v/graphql-language-service-server.svg?style=flat-square)](https://npmjs.com/graphql-language-service-server)\n![npm downloads](https://img.shields.io/npm/dm/graphql-language-service-server?label=npm%20downloads)\n[![License](https://img.shields.io/npm/l/graphql-language-service-server.svg?style=flat-square)](LICENSE)\n\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service_server.html)\n| [Discord Channel](https://discord.gg/PXaRYrpgK4)\n\nServer process backing the\n[GraphQL Language Service](https://github.com/graphql/graphiql/tree/main/packages/graphql-language-service).\n\nGraphQL Language Service Server provides an interface for building GraphQL\nlanguage services for IDEs.\n\nPartial support for\n[Microsoft's Language Server Protocol](https://github.com/Microsoft/language-server-protocol)\nis in place, with more to come in the future.\n\nSupported features include:\n\n- Diagnostics (GraphQL syntax linting/validations) (**spec-compliant**)\n- Autocomplete suggestions (**spec-compliant**)\n- Hyperlink to fragment definitions and named types (type, input, enum)\n  definitions (**spec-compliant**)\n- Outline view support for queries\n- Support for `gql` `graphql` and other template tags inside javascript,\n  typescript, jsx, ts, vue and svelte files, and an interface to allow custom\n  parsing of all files.\n\n## Installation and Usage\n\n### Dependencies\n\n- An LSP compatible client with its own file watcher, that sends watch\n  notifications to the server, such as vscode, nvim, or sublime-lsp.\n- Node.js `^18.18.0 || >=20.9.0` or later is required.\n- (for now) a graphql config file is required\n\n### Installation\n\n```bash\nnpm install graphql-language-service-server\n# or\nyarn add graphql-language-service-server\n```\n\nWe also provide a CLI interface to this server, see\n[`graphql-language-service-cli`](../graphql-language-service-cli/)\n\n### Usage\n\nInitialize the GraphQL Language Server with the `startServer` function:\n\n```ts\nimport { startServer } from 'graphql-language-service-server';\n\nawait startServer({\n  method: 'node',\n});\n```\n\nIf you are developing a service or extension, this is the LSP language server\nyou want to run.\n\nWhen developing vscode extensions, just the above is enough to get started for\nyour extension's `ServerOptions.run.module`, for example.\n\n`startServer` function takes the following parameters:\n\n| Parameter      | Required                                             | Description                                                                       |\n| -------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------- |\n| port           | `true` when method is `socket`, `false` otherwise    | port for the LSP server to run on                                                 |\n| method         | `false`                                              | `socket`, `streams`, or `node` (ipc)                                              |\n| config         | `false`                                              | custom `graphql-config` instance from `loadConfig` (see example above)            |\n| configDir      | `false`                                              | the directory where graphql-config is found                                       |\n| extensions     | `false`                                              | array of functions to transform the graphql-config and add extensions dynamically |\n| parser         | `false`                                              | Customize _all_ file parsing by overriding the default `parseDocument` function   |\n| fileExtensions | `false`. defaults to `['.js', '.ts', '.tsx, '.jsx']` | Customize file extensions used by the default LSP parser                          |\n\n### GraphQL configuration file\n\nYou _must_ provide a graphql config file\n\nCheck out [graphql-config](https://graphql-config.com/introduction) to learn the\nmany ways you can define your graphql config\n\n#### `.graphqlrc` or `.graphqlrc.yml/yaml` or `graphql.config.yml`\n\n```yaml\nschema: 'packages/api/src/schema.graphql'\ndocuments: 'packages/app/src/components/**/*.{tsx,ts}'\nextensions:\n  endpoints:\n    example:\n      url: 'http://localhost:8000'\n  customExtension:\n    foo: true\n```\n\n#### `.graphqlrc` or `.graphqlrc.json` or `graphql.config.json`\n\n```json\n{\n  \"schema\": \"https://localhost:8000\"\n}\n```\n\n#### `graphql.config.js` or `.graphqlrc.js`\n\n```js\nmodule.exports = { schema: 'https://localhost:8000' };\n```\n\n#### custom `startServer`\n\nuse graphql config [`loadConfig`](https://graphql-config.com/load-config) for\nfurther customization:\n\n```ts\nimport { loadConfig } from 'graphql-config'; // 3.0.0 or later!\n\n// with required params\nconst config = await loadConfig();\n\nawait startServer({\n  method: 'node',\n  // or instead of configName, an exact path (relative from rootDir or absolute)\n\n  // deprecated for: loadConfigOptions.rootDir. root directory for graphql config file(s), or for relative resolution for exact `filePath`. default process.cwd()\n  // configDir: '',\n  loadConfigOptions: {\n    // any of the options for graphql-config@3 `loadConfig()`\n    schema: await config.getSchema(),\n    // rootDir is same as `configDir` before, the path where the graphql config file would be found by cosmic-config\n    rootDir: 'config/',\n    // or - the relative or absolute path to your file\n    filePath: 'exact/path/to/config.js', // (also supports yml, json, ts, toml)\n    // myPlatform.config.js/json/yaml works now!\n    configName: 'myPlatform',\n  },\n});\n```\n\n<span id=\"custom-graphql-config\" />\n\n#### Custom `graphql-config` features\n\nThe graphql-config features we support are:\n\n```js\nmodule.exports = {\n  extensions: {\n    // add customDirectives (legacy). you can now provide multiple schema pointers to config.schema/project.schema, including inline strings. same with scalars or any SDL type that you'd like to append to the schema\n    customDirectives: ['@myExampleDirective'],\n    // a function that returns an array of validation rules, ala https://github.com/graphql/graphql-js/tree/main/src/validation/rules\n    // note that this file will be loaded by the vscode runtime, so the node version and other factors will come into play\n    customValidationRules: require('./config/customValidationRules'),\n    schemaCacheTTL: 1000, // reduce or increase minimum schema cache lifetime from 30000ms (30 seconds). you may want to reduce this if you are developing fullstack with network schema\n    languageService: {\n      // this is enabled by default if non-local files are specified in the project `schema`\n      // NOTE: this will disable all definition lookup for local SDL files\n      cacheSchemaFileForLookup: true,\n      // undefined by default which has the same effect as `true`, set to `false` if you are already using // `graphql-eslint` or some other tool for validating graphql in your IDE. Must be explicitly `false` to disable this feature, not just \"falsy\"\n      enableValidation: true,\n      // (experimental) enhanced auto expansion of graphql leaf fields and arguments\n      fillLeafsOnComplete: true,\n      // enable GraphQL.js 17 experimental fragment arguments across language features\n      experimentalFragmentArguments: true,\n      // instead of jumping directly to the SDL file, you can override definition peek/jump results to point to different files or locations\n      // (for example, source files for your schema in any language!)\n      // based on Relay vscode's pathToLocateCommand\n      // see LocateCommand type!\n      locateCommand(projectName, typePath, info) {\n        // pass more info, such as GraphQLType with the ast node. info.project is also available if you need it\n        const { path, range } = ourLookupUtility(\n          projectName,\n          typePath,\n          info.type.node,\n        );\n        return { uri: path, range }; // range.start.line/range.end.character/etc, base 1\n        // you can also return relay LSP style\n        // return '/path/to/file.py:20:1'; // (range: 20:1 20:1 )\n        // return '/path/to/file.py'; // (range: 1:1 1:1)\n      },\n    },\n  },\n};\n```\n\nor for multi-project workspaces:\n\n```ts\n// graphql.config.ts\nexport default {\n  projects: {\n    myProject: {\n      schema: [\n        // internally in `graphql-config`, an attempt will be made to combine these schemas into one in-memory schema to use for validation, lookup, etc\n        'http://localhost:8080',\n        './my-project/schema.graphql',\n        './my-project/schema.ts',\n        '@customDirective(arg: String!)',\n        'scalar CustomScalar',\n      ],\n      // project specific defaults\n      extensions: {\n        languageService: {\n          cacheSchemaFileForLookup: true,\n          enableValidation: false,\n        },\n      },\n    },\n    anotherProject: {\n      schema: {\n        'http://localhost:8081': {\n          customHeaders: { Authorization: 'Bearer example' },\n        },\n      },\n    },\n  },\n  // global defaults for all projects\n  extensions: {\n    languageService: {\n      cacheSchemaFileForLookup: false,\n      enableValidation: true,\n    },\n  },\n};\n```\n\nYou can specify any of these settings globally as above, or per project. Read\nthe graphql-config docs to learn more about this!\n\nFor secrets (headers, urls, etc), you can import `dotenv()` and set a base path\nas you wish in your `graphql-config` file to pre-load `process.env` variables.\n\n### Troubleshooting notes\n\n- you may need to manually restart the language server for some of these\n  configurations to take effect\n- graphql-config's multi-project support is not related to multi-root workspaces\n  in vscode - in fact, each workspace can have multiple graphql config projects,\n  which is what makes multi-root workspaces tricky to support. coming soon!\n\n<span id=\"workspace-configuration\" />\n\n### Workspace Configuration\n\nThe LSP Server reads config by sending `workspace/configuration` method when it\ninitializes.\n\nNote: We still do not support LSP multi-root workspaces but will tackle this\nvery soon!\n\nMany LSP clients beyond vscode offer ways to set these configurations, such as\nvia `initializationOptions` in nvim.coc. The options are mostly designed to\nconfigure graphql-config's load parameters, the only thing we can't configure\nwith graphql config. The final option can be set in `graphql-config` as well\n\n| Parameter                                 | Default                                           | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `graphql-config.load.baseDir`             | workspace root or process.cwd()                   | the path where graphql config looks for config files                                                                                                                                                                                                                                                |\n| `graphql-config.load.filepath`            | `null`                                            | exact filepath of the config file.                                                                                                                                                                                                                                                                  |\n| `graphql-config.load.configName`          | `graphql`                                         | config name prefix instead of `graphql`                                                                                                                                                                                                                                                             |\n| `graphql-config.load.legacy`              | `true`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `graphql-config.dotEnvPath`               | `null`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `vscode-graphql.cacheSchemaFileForLookup` | `true` if `schema` contains non-SDL files or URLs | generate an SDL file based on your graphql-config schema configuration for definition lookup and other features. enabled by default when your `schema` config are URLs or introspection JSON, or if you have any non-local SDL files in `schema`                                                    |\n| `vscode-graphql.schemaCacheTTL`           | `30000`                                           | an integer value in milliseconds for the desired minimum cache lifetime for all schemas, which also causes the generated file to be re-written. set to 30s by default. effectively a \"lazy\" form of polling. if you are developing a schema alongside client queries, you may want to decrease this |\n| `vscode-graphql.debug`                    | `false`                                           | show more verbose log output in the output channel                                                                                                                                                                                                                                                  |\n\nall the `graphql-config.load.*` configuration values come from static\n`loadConfig()` options in graphql config.\n\n(more coming soon!)\n\n### Architectural Overview\n\nGraphQL Language Service currently communicates via Stream transport with the\nIDE server. GraphQL server will receive/send RPC messages to perform language\nservice features, while caching the necessary GraphQL artifacts such as fragment\ndefinitions, GraphQL schemas etc. More about the server interface and RPC\nmessage format below.\n\nThe IDE server should launch a separate GraphQL server with its own child\nprocess for each `.graphqlrc.yml` file the IDE finds (using the nearest ancestor\ndirectory relative to the file currently being edited):\n\n```\n./application\n\n  ./productA\n    .graphqlrc.yml\n    ProductAQuery.graphql\n    ProductASchema.graphql\n\n  ./productB\n    .graphqlrc.yml\n    ProductBQuery.graphql\n    ProductBSchema.graphql\n```\n\nA separate GraphQL server should be instantiated for `ProductA` and `ProductB`,\neach with its own `.graphqlrc.yml` file, as illustrated in the directory\nstructure above.\n\nThe IDE server should manage the lifecycle of the GraphQL server. Ideally, the\nIDE server should spawn a child process for each of the GraphQL Language Service\nprocesses necessary, and gracefully exit the processes as the IDE closes. In\ncase of errors or a sudden halt the GraphQL Language Service will close as the\nstream from the IDE closes.\n\n### Server Interface\n\nGraphQL Language Server uses [JSON-RPC](http://www.jsonrpc.org/specification) to\ncommunicate with the IDE servers. Microsoft's language server currently supports\ntwo communication transports: Stream (stdio) and IPC. For IPC transport, the\nreference guide to be used for development is\n[the language server protocol](https://microsoft.github.io/language-server-protocol/specification)\ndocumentation.\n\nFor each transport, there is a slight difference in JSON message format,\nespecially in how the methods to be invoked are defined - below are the\ncurrently supported methods for each transport (will be updated as progress is\nmade):\n\n|                      | Stream                       | IPC                                         |\n| -------------------: | ---------------------------- | ------------------------------------------- |\n|          Diagnostics | `getDiagnostics`             | `textDocument/publishDiagnostics`           |\n|       Autocompletion | `getAutocompleteSuggestions` | `textDocument/completion`                   |\n|              Outline | `getOutline`                 | `textDocument/outline`                      |\n|     Document Symbols | `getDocumentSymbols`         | `textDocument/symbols`                      |\n|    Workspace Symbols | `getWorkspaceSymbols`        | `workspace/symbols`                         |\n|     Go-to definition | `getDefinition`              | `textDocument/definition`                   |\n| Workspace Definition | `getWorkspaceDefinition`     | `workspace/definition`                      |\n|          File Events | Not supported yet            | `didOpen/didClose/didSave/didChange` events |\n\n<!-- File: packages/graphql-language-service/README.md (Tokens: ~398 | Category: plugin-manifest) -->\n# `graphql-language-service`\n\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service.html)\n| [Discord](https://discord.gg/wkQCKwazxj)\n\n> **Note**: Still mostly experimental, however it depends mostly on stable\n> libraries. **Migration Note**: As of 3.0.0, the LSP Server command line\n> interface has been moved to\n> [`graphql-language-service-cli`](../graphql-language-service-cli)\n\n## Purpose\n\nThis package brings together all the dependencies for building out web or\ndesktop IDE services for the GraphQL Language.\n\nIt is named as such to match the convention of other vscode language services.\n\n## Interface\n\nLanguage Service Protocol (LSP) methods written in TypeScript used by\n[`graphql-language-service-server`](https://github.com/graphql/graphiql/tree/main/packages/graphql-language-service-server),\n[`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql)\nand\n[`codemirror-graphql`](https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql).\n\nThe goal is to provide methods for creating\n[Language Server Protocol](https://langserver.org) compliant services to be used\nby an IDE plugin, a browser application or desktop application.\n\n## Parser\n\nA standalone online, immutable, dependency-free parser for\n[GraphQL](https://graphql.org), used by the LSP interface methods.\n\nWith GraphQL.js 17, fragment variable definitions and fragment spread arguments\ncan be enabled for parsing, diagnostics, outlines, operation facts, autocomplete,\nand hover information. Pass `experimentalFragmentArguments: true` through the\nrelevant language-service options. The feature defaults to `false` because the\nconnected GraphQL server must also support the experimental syntax.\n\n## Utils\n\nVarious utilities\n\n<!-- File: packages/monaco-graphql/README.md (Tokens: ~5038 | Category: plugin-manifest) -->\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql/CHANGELOG.md)\n|\n[API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service_server.html)\n| [Discord Channel](https://discord.gg/r4BxrAG6fN)\n\nGraphQL language plugin for the Monaco Editor. You can use it to build\nvscode/codespaces-like web or desktop IDEs using whatever frontend javascript\nlibraries or frameworks you want, or none!\n\n- [webpack example](https://github.com/graphql/graphiql/tree/main/examples/monaco-graphql-webpack/)\n  using plain javascript, shows how to change schemas\n- [vite + react example](https://stackblitz.com/edit/monaco-graphql-react-vite?file=src%2FApp.tsx&terminal=dev) -\n  minimal example with variables (C)JSON support using react\n- [live demo](https://monaco-graphql.netlify.com) of the monaco webpack example\n  (prompts for GitHub access token!)\n\n> **NOTE:** This is in pre-release state as we build towards GraphiQL 2.0.x.\n> [`codemirror-graphql`](https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql)\n> has more features (such as JSON variables validation) and is more stable.\n\n## Features\n\nIt provides the following features while editing GraphQL files:\n\n- Configurable multi-model, multi-schema language worker with `fileMatch`\n  expressions\n- Code completion (schema driven) for Operation and SDL types\n  - Automatic expansion & completion on leaf type completion\n- Hover (schema driven) with markdown support\n- Validation (schema driven)\n- JSON Variables validation and language features (schema driven)\n- Formatting - using prettier\n- Syntax Highlighting & Basic Languages provided by `monaco-editor` basic\n  languages support\n- Configurable formatting options\n- Providing external fragments\n- create custom workers for custom language service options - parser, validation\n  rules, schemaBuilder, etc\n\n## Usage\n\nFor now, we use `language` id of `graphql` until we can ensure we can dovetail\nnicely with the official `graphql` language ID.\n\nTo use with webpack, here is an example to get you started:\n\n```sh\nyarn add monaco-graphql\n```\n\n## Sync Example\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport { initializeMode } from 'monaco-graphql/initializeMode'; // `monaco-graphql/esm/initializeMode` is deprecated but still works\n\n// you can also configure these using the webpack or vite plugins for `monaco-editor`\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\n// instantiates the worker & language features with the schema!\nconst MonacoGraphQLAPI = initializeMode({\n  // Opt in only when the connected server supports fragment arguments.\n  experimentalFragmentArguments: true,\n  schemas: [\n    {\n      schema: myGraphqlSchema as GraphQLSchema,\n      // anything that monaco.URI.from() is compatible with\n      uri: 'https://my-schema.com',\n      uri: '/my-schema.graphql',\n      // match the monaco file uris for this schema.\n      // accepts specific uris and anything `picomatch` supports.\n      // (everything except bracket regular expressions)\n      fileMatch: ['**/*.graphql'],\n      // note: not sure if ^ works if the graphql model is using urls for uris?\n    },\n  ],\n});\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    // if you are using vite or webpack plugin, it will be found here\n    return new Worker('editor.worker.js');\n  },\n};\nmonaco.editor.create(document.getElementById('someElementId'), {\n  value: 'query { }',\n  language: 'graphql',\n  formatOnPaste: true,\n});\n```\n\n## Lazy Example\n\nThe existing API works as before in terms of instantiating the schema.\nTo avoid manually calling getWorker(), you can use the monaco editor plugins for webpack or vite (see examples, and below)\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n// enables our language worker right away, despite no schema\nimport 'monaco-graphql';\n\n// you can also configure these using the webpack or vite plugins for `monaco-editor`\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\n// lazily invoke the api config methods whenever we want!\nmonaco.languages.graphql.setSchemaConfig([\n  {\n    schema: myGraphqlSchema as GraphQLSchema,\n    // anything that monaco.URI.from() is compatible with\n    uri: 'https://my-schema.com',\n    uri: '/my-schema.graphql',\n    // match the monaco file uris for this schema.\n    // accepts specific uris and anything `picomatch` supports.\n    // (everything except bracket regular expressions)\n    fileMatch: ['**/*.graphql'],\n    // note: not sure if ^ works if the graphql model is using urls for uris?\n  },\n]);\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    return new Worker('editor.worker.js');\n  },\n};\nmonaco.editor.create(document.getElementById('someElementId'), {\n  value: 'query { }',\n  language: 'graphql',\n  formatOnPaste: true,\n});\n```\n\nThis will cover the basics, making an HTTP POST with the default\n`introspectionQuery()` operation. To customize the entire fetcher, see\n[advanced customization](<>) below. For more customization options, see the\n[Monaco Editor API Docs](https://microsoft.github.io/monaco-editor/api/index.html)\n\n## Advanced Usage\n\n### Variables JSON Support!\n\nIn `monaco-graphql@0.5.0` we introduced a method `getVariablesJSONSchema` that\nallows you to retrieve a `JSONSchema` description for the declared variables for\nany given set of operations\n\n## Full Sync Demo with Variables JSON\n\n```ts\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nimport GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    if (label === 'graphql') {\n      return new GraphQLWorker();\n    }\n    return new Worker('editor.worker.js');\n  },\n};\n\n// the language service will be instantiated once the schema is available\nconst MonacoGraphQLAPI = initializeMode({\n  schemas: [\n    {\n      // anything that monaco.URI.from() is compatible with\n      uri: 'https://my-schema.com',\n      // match the monaco file uris for this schema.\n      // accepts specific filenames and anything `picomatch` supports.\n      fileMatch: ['**/*.graphql'],\n      schema: myGraphqlSchema as GraphQLSchema,\n    },\n  ],\n});\n\nconst operationModel = monaco.editor.createModel(\n  'query {}',\n  'graphql',\n  '/operation.graphql',\n);\n\nconst operationEditor = monaco.editor.create(\n  document.getElementById('someElementId'),\n  {\n    model: operationModel,\n    language: 'graphql',\n    formatOnPaste: true,\n  },\n);\n\nconst variablesSchemaUri = monaco.editor.URI.file('/variables-schema.json');\n\nconst variablesModel = monaco.editor.createModel(\n  '{}',\n  'json',\n  '/variables.json',\n);\n\nconst variablesEditor = monaco.editor.create(\n  document.getElementById('someElementId'),\n  {\n    model: variablesModel,\n    language: 'graphql',\n    formatOnPaste: true,\n  },\n);\n\n// high-level method for configuring json variables validation\nMonacoGraphQLAPI.setDiagnosticSettings({\n  validateVariablesJson: {\n    // Urls, uris, anything that monaco.URI.from() is compatible with.\n    // Match operation model to variables editor,\n    // and the language service will automatically listen for changes,\n    // and compute the json schema using the GraphQLWorker.\n    // This is in the main process is applied to the global monaco json settings\n    // for validation, completion and more using monaco-json's built-in JSON Schema support.\n    [operationModel.uri.toString()]: [variablesModel.uri.toString()],\n  },\n  jsonDiagnosticSettings: {\n    allowComments: true, // allow json, parse with a jsonc parser to make requests\n  },\n});\n\nMonacoGraphQL.setCompletionSettings({\n  // this auto-fills NonNull leaf fields\n  // it used to be on by default, but is annoying when\n  // fields contain required argument.\n  // hoping to fix that soon!\n  __experimental__fillLeafsOnComplete: true,\n});\n```\n\nYou can also experiment with the built-in `jsonc`? (JSON\nsyntax that allows comments and trailing commas, for `tsconfig.json`, etc.) and the 3rd party `monaco-yaml` language modes\nfor completion of other types of variable input. you can also experiment with\neditor methods to parse detected input into different formats, etc (`yaml`\npastes as `json`, etc.)\n\nYou could of course prefer to generate a `jsonschema` form for variables input\nusing a framework of your choice, instead of an editor. Enjoy!\n\n## `monaco-graphql/lite`\n\nYou can also import a \"lite\" version, and manually enable only the monaco features you want!\n\nWarning: by default, completion and other features will not work, only highlighting and validation.\n\n```ts\nimport { initializeMode } from 'monaco-graphql/lite';\n\n// enable completion\nimport 'monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution';\n\nconst api = initializeMode({\n  schemas: [\n    {\n      // anything that monaco.URI.from() is compatible with\n      uri: 'schema.graphql',\n      // match the monaco file uris for this schema.\n      // accepts specific filenames and anything `picomatch` supports.\n      fileMatch: ['operation.graphql'],\n      schema: myGraphqlSchema as GraphQLSchema,\n    },\n  ],\n});\n```\n\n## `MonacoGraphQLAPI` ([typedoc](https://graphiql-test.netlify.app/typedoc/classes/monaco_graphql.monacoMonacoGraphQLAPI.html))\n\nIf you call any of these API methods to modify the language service\nconfiguration at any point at runtime, the webworker will reload relevant\nlanguage features.\n\nIf you `import 'monaco-graphql'` synchronously, you can access the api via\n`monaco.languages.graphql.api`.\n\n```ts\nimport 'monaco-graphql';\n// now the api will be available on the `monaco.languages` global\nconst { api } = monaco.languages.graphql;\n```\n\n```ts\nimport 'monaco-graphql';\n\n// also this\nimport { languages } from 'monaco-editor';\n// now the api will be available on the `monaco.languages` global\nconst { api } = languages.graphql;\n```\n\nOtherwise, you can, like in the sync demo above:\n\n```ts\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nconst api = initializeMode(config);\n```\n\n### `monaco.languages.graphql.api.setSchemaConfig([SchemaConfig])`\n\nsame as the above, except it overwrites the entire schema config.\n\nyou can provide multiple, and use `fileMatch` to map to various uri \"directory\"\nglobs or specific files. `uri` can be an url or file path, anything parsable\n\n```ts\n// you can load it lazily\nimport 'monaco-graphql';\n\nmonaco.languages.graphql.api.setSchemaConfig([\n  {\n    schema: GraphQLSchema,\n    fileMatch: ['**/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n]);\n```\n\nor you can load the language features only when you have your schema\n\n```ts\nimport { initializeMode } from 'monaco-graphql/initializeMode';\n\nconst schemas = [\n  {\n    schema: GraphQLSchema,\n    fileMatch: ['operations/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n];\nconst api = initializeMode({ schemas });\n\n// add another schema. this will cause language workers and features to reset\napi.setSchemaConfig([\n  ...schemas,\n  {\n    introspectionJSON: myIntrospectionJSON,\n    fileMatch: ['specific/monaco/uri.graphql'],\n    uri: 'another-schema.graphql',\n  },\n]);\n```\n\nor if you want, replace the entire configuration with a single schema. this will\ncause the worker to be entirely re-created and language services reset\n\n```ts\napi.setSchemaConfig([\n  {\n    introspectionJSON: myIntrospectionJSON,\n    fileMatch: ['**/*.graphql'],\n    uri: 'my-schema.graphql',\n  },\n]);\n```\n\n### `monaco.languages.graphql.api.setModeConfiguration()`\n\nThis is where you can toggle monaco language features. all are enabled by\ndefault.\n\n```ts\nmonaco.languages.graphql.api.setModeConfiguration({\n  documentFormattingEdits: true,\n  completionItems: true,\n  hovers: true,\n  documentSymbols: true,\n  diagnostics: true,\n});\n```\n\n### `monaco.languages.graphql.api.setFormattingOptions()`\n\nthis accepts an object `{ prettierConfig: prettier.Options }`, which accepts\n[any prettier option](https://prettier.io/docs/en/options.html). it will not\nre-load the schema or language features, however the new prettier options will\ntake effect.\n\nthis method overwrites the previous configuration, and will only accept static\nvalues that can be passed between the main/worker process boundary.\n\n```ts\nmonaco.languages.graphql.api.setFormattingOptions({\n  // if you wanna be like that\n  prettierOptions: { tabWidth: 2, useTabs: true },\n});\n```\n\n### `monaco.languages.graphql.api.setExternalFragmentDefinitions()`\n\nAppend external fragments to be used by autocomplete and other language\nfeatures.\n\nThis accepts either a string that contains fragment definitions, or\n`TypeDefinitionNode[]`\n\n### `monaco.languages.graphql.api.getDiagnosticOptions`\n\n```ts\nmonaco.languages.graphql.api.setDiagnosticSettings({\n  validateVariablesJson: {\n    // Urls, uris, anything that monaco.URI.from() is compatible with.\n    // Match operation model to variables editor,\n    // and the language service will automatically listen for changes,\n    // and compute the json schema using the GraphQLWorker.\n    // This is in the main process is applied to the global monaco json settings\n    // for validation, completion and more using monaco-json's built-in JSON Schema support.\n    [operationModel.uri.toString()]: [variablesModel.uri.toString()],\n  },\n  jsonDiagnosticSettings: {\n    allowComments: true, // allow json, parse with a jsonc parser to make requests\n  },\n});\n```\n\n## Bundlers\n\n### Webpack\n\nyou'll can refer to the webpack configuration in the\n[full monaco webpack example](/examples/monaco-graphql-webpack#readme) to see\nhow it works with webpack and the official `monaco-editor-webpack-plugin`. there\nis probably an easier way to configure webpack `worker-loader` for this.\n\n**Notes:**\n\n- for additional features, please specify them in `features` for the webpack plugin, or import them directly\n- if you are trying to add `typescript` as a language, there is an outstanding [bug with the webpack plugin](https://github.com/microsoft/monaco-editor/issues/2738), see our [next.js example](../../examples/monaco-graphql-nextjs/next.config.js) for the workaround. do not specify `languages: ['typescript']` or `javascript`\n\n### Vite\n\nYou can configure vite to load `monaco-editor` json mode and even the language\neditor worker using\n[the example for our mode](https://github.com/vdesjs/vite-plugin-monaco-editor#options)\n\nBe sure to import additional editor features and language modes manually, as the vite plugin only allows you to specify `languageWorkers`.\nSee the vite example to see how to add typescript support\n\n## Web Frameworks\n\nthe plain javascript\n[webpack example](https://github.com/graphql/graphiql/tree/main/examples/monaco-graphql-webpack/)\nshould give you a starting point to see how to implement it with\n\n### React\n\n- [`use-monaco`](https://www.npmjs.com/package/use-monaco) seems to support the\n  custom language worker configuration we want, and seems to be well built! we\n  hope to help them build their\n- when loading it yourself, either dynamic import the mode and/or instantiate it\n  yourself using `useEffect` on `didMount` to prevent breaking SSR.\n- it may work with other libraries by using a similar strategy to\n  [this](https://github.com/graphql/graphiql/blob/9df315b44896efa313ed6744445fc8f9e702ebc3/examples/monaco-graphql-webpack/src/editors.ts#L15).\n  you can also provide `MonacoEnvironment.getWorkerUrl` which works better as an\n  async import of your pre-build worker files\n\n## Custom Webworker (for passing non-static config to worker)\n\nIf you want to pass a custom parser and/or validation rules, it is supported,\nhowever the setup is a bit more complicated.\n\nYou can add any `LanguageServiceConfig`\n([typedoc](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service.html#graphqllanguageconfig-1))\nconfiguration options you like here to `languageConfig` as below.\n\nThis is because we can't pass non-static configuration to the existing worker\nprogrammatically, so you must import these and build the worker custom with\nthose functions. Part of the (worthwhile) cost of crossing runtimes!\n\nyou'll want to create your own `my-graphql.worker.ts` file, and add your custom\nconfig such as `schemaLoader` to `createData`:\n\n```ts\n// my-graphql.worker.ts\nimport type * as monaco from 'monaco-editor';\nimport type { ICreateData } from 'monaco-graphql';\n// @ts-expect-error -- ignore missing types\nimport { initialize } from 'monaco-editor/esm/vs/editor/editor.worker';\nimport { GraphQLWorker } from 'monaco-graphql/esm/GraphQLWorker';\nimport { GraphQLError, ValidationRule } from 'graphql';\n\nconst RequireOperationNameRule: ValidationRule = context => {\n  return {\n    OperationDefinition(node) {\n      if (node.name) {\n        return;\n      }\n      context.reportError(\n        new GraphQLError('Oops, all operations must be named.', {\n          nodes: [node],\n        }),\n      );\n    },\n  };\n};\n\nglobalThis.onmessage = () => {\n  initialize((ctx: monaco.worker.IWorkerContext, createData: ICreateData) => {\n    createData.languageConfig.customValidationRules = [\n      RequireOperationNameRule,\n    ];\n    return new GraphQLWorker(ctx, createData);\n  });\n};\n```\n\nthen, in your application:\n\n```ts\n// Vite query suffixes https://vite.dev/guide/features.html#import-with-query-suffixes\nimport EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';\nimport GraphQLWorker from './my-graphql.worker?worker';\n\nglobalThis.MonacoEnvironment = {\n  getWorker(_workerId: string, label: string) {\n    return label === 'graphql' ? new GraphQLWorker() : new EditorWorker();\n  },\n};\n```\n\nor, if you have webpack configured for it:\n\n```ts\nglobalThis.MonacoEnvironment = {\n  getWorkerUrl(_workerId: string, label: string) {\n    return label === 'graphql' ? 'my-graphql.worker.js' : 'editor.worker.js';\n  },\n};\n```\n\nwith vite you just need:\n\n```ts\nimport { defineConfig } from 'vite';\nimport monacoEditorPlugin from 'vite-plugin-monaco-editor';\n\nexport default defineConfig({\n  plugins: [\n    monacoEditorPlugin({\n      customWorker: [\n        {\n          label: 'graphql',\n          entry: 'my-graphql.worker.js',\n        },\n      ],\n    }),\n  ],\n});\n```\n\n## Monaco Editor Tips\n\nIf you are familiar with Codemirror/Atom-era terminology and features, here's\nsome gotchas:\n\n- \"hinting\" => \"code completion\" in LSP terminology\n- \"linting\" => \"diagnostics\" in lsp terminology\n- the default keymap is different, more vscode like\n- command palette and right click context menu are important\n- you can extend the provided standard completion, linting, etc. for example,\n  `editor.setModelMarkers()`\n- [Monaco Editor API Docs](https://microsoft.github.io/monaco-editor/api/index.html)\n- [Monaco Editor Samples](https://github.com/Microsoft/monaco-editor-samples)\n  repository is great for tips on implementing with different bundlers,\n  runtimes, etc.\n\n## Avoid Bundle All `monaco-editor`'s Languages\n\nWhile importing `monaco-editor` in your project, you silently import 83 builtin\nlanguages, such as `typescript`, `html`, `css`, `json` and others. You can found\na full list of\n[basic-languages](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages)\nand\n[languages](https://github.com/microsoft/monaco-editor/tree/main/src/language).\n\nFor `monaco-graphql`, you need only 2 languages - `graphql` and `json`.\nIn version `monaco-graphql@1.3.0` and later, you can replace all `monaco-editor`'s\nimports with `monaco-graphql/monaco-editor` to improve performance, load\nonly `graphql` and `json` languages, and skip loading unused languages.\n\n```diff\n-import { ... } from 'monaco-editor'\n+import { ... } from 'monaco-graphql/monaco-editor'\n```\n\n> The `monaco-graphql/esm/*` import pattern is deprecated. It is retained for\n> backwards compatibility but the wildcard export that enables it is planned\n> for removal in the next major version. New code should use the canonical\n> subpaths: `monaco-graphql/monaco-editor`, `monaco-graphql/initializeMode`,\n> `monaco-graphql/graphql.worker`, `monaco-graphql/lite`.\n\n### Catch Future Import Mistakes with ESLint\n\nTo prevent mis-importing of `monaco-editor`, you can set up default\n`no-restricted-imports` rule for JavaScript projects or\n`@typescript-eslint/no-restricted-imports` for TypeScript projects.\n\n```json5\n{\n  rules: {\n    // or @typescript-eslint/no-restricted-imports\n    'no-restricted-imports': [\n      'error',\n      {\n        name: 'monaco-editor',\n        message: '`monaco-editor` imports all languages; use `monaco-graphql/monaco-editor` instead to import only `json` and `graphql` languages',\n      },\n    ],\n  },\n}\n```\n\n## Inspiration\n\n`microsoft/monaco-json` was our inspiration from the outset, when it was still a\nstandalone repository. @acao actually wholesale copied many files, you could\nalmost say it was a fork!\n\n## TODO\n\n- [x] variables JSON validation\n- [x] variables completion\n- [ ] Symbols & Definitions\n- [x] file uri-driven schema loading\n- [x] op -> schema & schema -> schema references\n- [x] `insertText` for field and argument completion\n\n<!-- File: packages/vscode-graphql-execution/README.md (Tokens: ~357 | Category: plugin-manifest) -->\n## `graphql.vscode-graphql-execution`\n\nThis extension provides standalone support for executing graphql operations\ninline in your code for:\n\n- .ts/.tsx\n- .js/.jsx\n- .graphql, .gql or .graphqls files\n\n## How it works\n\n1. A codelens will appear above all operations - clicking will begin executing\n   the operation.\n2. (If variables are specified in the operation), a dialog will prompt for these\n   variables\n3. Then, the results or network error should appear, voilà!\n4. If no endpoints are configured, it will exit early and tell you to define\n   them.\n\n## Configuring the extension\n\n### `graphql-config`\n\nYour graphql config file will need to contain either a schema-as-url OR an\nendpoints configuration. Either of the following are valid:\n\n```yaml\nschema: https://localhost:3000/graphql\n```\n\n```yaml\nschema: schema.graphql\nextensions:\n  endpoints:\n    default:\n      url: 'https://localhost:3000/graphql'\n```\n\n```yaml\nprojects:\n  app:\n    schema: schema.graphql\n    extensions:\n      endpoints:\n        default:\n          url: 'https://localhost:3000/graphql'\n```\n\n### Disable codelens\n\nTo disable the codelens, please specify this setting in `settings.json` or\n`user.json`:\n\n```json\n{\n  ...\n \"vscode-graphql-execution.showExecCodelens\": false\n}\n```\n\n### Self Signed Certificates\n\nEnable this (`false` by default) to allow node to use non-authorized SSL\ncertificates.\n\n```json\n{\n  \"vscode-graphql-execution.rejectUnauthorized\": true\n}\n```\n\n<!-- File: packages/vscode-graphql-syntax/README.md (Tokens: ~1119 | Category: plugin-manifest) -->\n# GraphQL Syntax Support\n\nAdds full GraphQL syntax highlighting and language support such as bracket\nmatching.\n\n- Supports `.graphql`/`.gql`/`.graphqls` highlighting\n- Javascript, Typescript & JSX/TSX (examples: [test.js](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.js) & [test.ts](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts))\n- Vue (examples: [test-sfc-comp.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc-comp.vue) & [test-sfc.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc.vue))\n- Svelte (example: [test.svelte](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte))\n- ReasonML/ReScript (`%graphql()` ) (example: [test.re](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.re))\n- Python (example: [test.py](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.py))\n- PHP (example: [test.php](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.php))\n- Markdown (examples: [test.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.md) & [test-py.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md))\n- Scala (example: [test.scala](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.scala))\n\nYou'll want to install this if you do not use `graphql-config`, or want to use\nthe highlighting with other extensions than `vscode-graphql`\n\n## Contributing\n\nFeel free to open a PR to fix, enhance any language support, or even add new\nlanguages 😍\n\nsee:\n\n- [the grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/)\n- [the applicable vscode docs](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide)\n\n### Contributor Guide: Improving a Language\n\nWhether fixing a bug or adding a new delimiter for your language, here are a few tips for you:\n\n1. TDD approach: add your bug case or new delimiter example to the relevant file in `tests/__fixtures__`\n1. run `pnpm test -- -u` in the syntax extension workspace, and observe whether vscode-textmate tokenizes your example properly\n1. fix/update/add the relevant pattern, and repeat the above to see if the tokenization changes. you should see `meta.embedded.block.graphql`\n1. to test manually, run `pnpm vsce:package` in the workspace and right click to install the bundled vsix extension, and open the fixture file\n\n<span id=\"adding-a-lang\"></span>\n\n### Contributor Guide: Adding a Language\n\n1.  add a file to [grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/) following our other examples.\n1.  be sure to add it to `package.json` contributions as well, in the `grammars` section. the `text.html.markdown` is for applying to markdown codeblocks\n1.  use a scope ala `source.{lang}` from a vscode-provided syntax grammar, or a popular, official contributed grammar. To find the name of the scope for any token's highlighting, use `Developer: Inspect Editor Tokens & Scopes` from the vscode command palette.\n1.  name it `inline.graphql.{lang}` for consistency\n1.  add a test file `tests/__fixture__` to document example usage, and a test spec to `__tests__` to assert the snapshot, pointing to the source you created\n1.  run `pnpm test -- -u` in the workspace to add the snapshot\n1.  use the snapshots to ensure your capture groups are working and serializing the graphql as expected\n1.  in the test fixture, document all working cases and non working cases with Todo comments for common usage in your language. be sure to think of cases such as string interpolation and generics for typed languages.\n1.  add it to the list above in the readme, with links to your test fixtures as usage documentation\n1.  to manually test it in vscode itself, run `pnpm vsce:package` in the syntax extension workspace and right click and install the bundled vsix file, then view the test fixture\n\n## Usage Note\n\nWe would love for the other graphql extension authors to freely use this syntax\nextension as well! Even if your extension is designed to replace\n`vscode-graphql`, or if it's designed for other other purposes. It uses an MIT\nlicense, but attribution is always a nice gesture to the original authors :)\n\n## License\n\nMIT License\n\nCopyright 2022 GraphQL Contributors\n\n<!-- File: packages/vscode-graphql/README.md (Tokens: ~2191 | Category: plugin-manifest) -->\n[Changelog](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql/CHANGELOG.md)\n| [Discord Channel](https://discord.gg/r4BxrAG6fN) |\n[LSP Server Docs](https://github.com/graphql/graphiql/blob/main/packages/graphql-language-service-server/README.md)\n\nGraphQL extension for VSCode built with the aim to tightly integrate the GraphQL\nEcosystem with VSCode for an awesome developer experience.\n\n![](https://camo.githubusercontent.com/97dc1080d5e6883c4eec3eaa6b7d0f29802e6b4b/687474703a2f2f672e7265636f726469742e636f2f497379504655484e5a342e676966)\n\n### `.graphql`, `.gql` file extension support and `gql`/`graphql` tagged template literal support for tsx, jsx, ts, js\n\n- syntax highlighting (provided by `vscode-graphql-syntax`)\n- autocomplete suggestions\n- validation against schema\n- snippets (interface, type, input, enum, union)\n- hover support\n- go to definition support (input, enum, type)\n- outline support\n\n## Getting Started\n\n> **This extension requires a graphql-config file**.\n\nTo support language features like completion and \"go-to definition\" across multiple files,\nplease include `documents` in the `graphql-config` file default or per-project\n\n### Simplest Config Example\n\n```yaml\n# .graphqlrc.yml or graphql.config.yml\nschema: 'schema.graphql'\ndocuments: 'src/**/*.{graphql,js,ts,jsx,tsx}'\n```\n\n`package.json`:\n\n```json\n\"graphql\": {\n  \"schema\": \"https://localhost:3001/graphql\",\n  \"documents\": \"**/*.{graphql,js,ts,jsx,tsx}\"\n},\n```\n\n```ts\n// .graphqlrc.ts or graphql.config.ts\nexport default {\n  schema: 'schema.graphql',\n  documents: '**/*.{graphql,js,ts,jsx,tsx}',\n};\n```\n\nsame for .json, .toml, etc\n\n## Additional Features\n\n- Loads the LSP server upon detecting a `graphql-config` file at root level or in a\n  parent level directory, or a `package.json` file with `graphql` config\n- Loads `.graphql`, `.gql` files, and detects `gql`, `graphql` tags and `/** GraphQL */` and `#graphql` comments in js, ts, jsx, tsx, vue files\n- pre-load schema and fragment definitions\n- Support [`graphql-config`](https://graphql-config.com/) files with one or multiple projects (multi-root workspaces are not yet supported)\n- the language service re-starts on saved changes to vscode settings and/or graphql config!\n\n## Configuration\n\n| Parameter                                 | Default                                           | Description                                                                                                                                                                                                                                                                                         |\n| ----------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `graphql-config.load.baseDir`             | workspace root or process.cwd()                   | the path where graphql config looks for config files                                                                                                                                                                                                                                                |\n| `graphql-config.load.filepath`            | `null`                                            | exact filepath of the config file.                                                                                                                                                                                                                                                                  |\n| `graphql-config.load.configName`          | `graphql`                                         | config name prefix instead of `graphql`                                                                                                                                                                                                                                                             |\n| `graphql-config.load.legacy`              | `true`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `graphql-config.dotEnvPath`               | `null`                                            | backwards compatibility with `graphql-config@2`                                                                                                                                                                                                                                                     |\n| `vscode-graphql.cacheSchemaFileForLookup` | `true` if `schema` contains non-SDL files or URLs | generate an SDL file based on your graphql-config schema configuration for definition lookup and other features. enabled by default when your `schema` config are URLs or introspection JSON, or if you have any non-local SDL files in `schema`                                                    |\n| `vscode-graphql.schemaCacheTTL`           | `30000`                                           | an integer value in milliseconds for the desired minimum cache lifetime for all schemas, which also causes the generated file to be re-written. set to 30s by default. effectively a \"lazy\" form of polling. if you are developing a schema alongside client queries, you may want to decrease this |\n| `vscode-graphql.debug`                    | `false`                                           | show more verbose log output in the output channel                                                                                                                                                                                                                                                  |\n\n### Advanced Example\n\nMulti-project can be used for both local files, URL defined schema, or both\n\n```js\nimport dotenv from 'dotenv';\ndotenv.config();\n\n// .graphqlrc.ts or graphql.config.ts\nexport default {\n  projects: {\n    app: {\n      schema: ['src/schema.graphql', 'directives.graphql'],\n      documents: ['**/*.{graphql,js,ts,jsx,tsx}', 'my/fragments.graphql'],\n    },\n    db: {\n      schema: 'src/generated/db.graphql',\n      documents: ['src/db/**/*.graphql', 'my/fragments.graphql'],\n      extensions: {\n        endpoints: {\n          default: {\n            url: 'https://localhost:3001/graphql/',\n            headers: {\n              Authorization: `Bearer ${process.env.API_TOKEN}`,\n            },\n          },\n        },\n      },\n    },\n  },\n};\n```\n\nNotice that `documents` key supports glob pattern and hence `[\"**/*.graphql\"]`\nis also valid.\n\n## Frequently Asked Questions\n\n### The extension fails with errors about duplicate types\n\nYour object types must be unique per project (as they must be unique per schema), and your fragment names must also be unique per project.\n\n### The extension fails with errors about missing scalars, directives, etc\n\nMake sure that your `schema` pointers refer to a complete schema!\n\n### In JSX and TSX files I see completion items I don't need\n\nThe way vscode lets you filter these out is\n[on the user end](https://github.com/microsoft/vscode/issues/45039)\n\nSo you'll need to add something like this to your global vscode settings:\n\n```json\n\"[typescriptreact]\": {\n  \"editor.suggest.filteredTypes\": {\n    \"snippet\": false\n  }\n},\n\"[javascriptreact]\": {\n  \"editor.suggest.filteredTypes\": {\n    \"snippet\": false\n  }\n}\n```\n\n### My graphql config file is not at the root\n\nGood news, we have configs for this now!\n\nYou can search a folder for any of the matching config file names listed above:\n\n```json\n\"graphql-config.load.rootDir\": \"./config\"\n\"graphql-config.dotEnvPath\": \"./config/.dev.env\"\n```\n\nOr a specific filepath:\n\n```json\n\"graphql-config.load.filepath\": \"./config/my-graphql-config.js\"\n```\n\nOr a different `configName` that allows different formats:\n\n```json\n\"graphql-config.load.rootDir\": \"./config\",\n\"graphql-config.load.configName\": \"acme\"\n```\n\nwhich would search for `./config/.acmerc`, `.config/.acmerc.js`,\n`.config/acme.config.json`, etc matching the config paths above\n\nIf you have multiple projects, you need to define one top-level config that\ndefines all project configs using `projects`\n\n### How do I enable language features for an embedded graphql string?\n\nPlease refer to the `vscode-graphql-syntax` reference files ([js](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.js),[ts](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts),[svelte](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte),[vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.vue)) to learn our template tag, comment and other graphql delimiter patterns for the file types that the language server supports. The syntax highlighter currently supports more languages than the language server. If you notice any places where one or the other doesn't work, please report it!\n\n## Known Issues\n\n- the locally generated schema file for definition lookup currently does not re-generate on schema changes. this will be fixed soon.\n- multi-root workspaces support will be added soon as well.\n- some graphql-config options aren't always honored, this will also be fixed soon\n\n## Attribution\n\nThanks to apollo for their\n[graphql-vscode grammars](https://github.com/apollographql/vscode-graphql/blob/main/syntaxes/graphql.js.json)!\nWe have borrowed from these on several occasions. If you are looking for the\nmost replete set of vscode grammars for writing your own extension, look no\nfurther!\n\n## Development\n\nThis plugin uses the\n[GraphQL language server](https://github.com/graphql/graphql-language-service-server)\n\n1.  Clone the repository - https://github.com/graphql/graphiql\n1.  `pnpm install`\n1.  Run \"VSCode Extension\" launcher in vscode\n1.  This will open another VSCode instance with extension enabled\n1.  Open a project with a graphql config file - \":electric_plug: graphql\" in\n    VSCode status bar indicates that the extension is in use\n1.  Logs for GraphQL language service will appear in output section under\n    GraphQL Language Service\n\n### Contributing back to this project\n\nThis repository is managed by EasyCLA. Project participants must sign the free\n([GraphQL Specification Membership agreement](https://preview-spec-membership.graphql.org))\nbefore making a contribution. You only need to do this one time, and it can be\nsigned by\n[individual contributors](http://individual-spec-membership.graphql.org) or\ntheir [employers](http://corporate-spec-membership.graphql.org).\n\nTo initiate the signature process please open a PR against this repo. The\nEasyCLA bot will block the merge if we still need a membership agreement from\nyou.\n\nYou can find\n[detailed information here](https://github.com/graphql/graphql-wg/tree/main/membership).\nIf you have issues, please email\n[operations@graphql.org](mailto:operations@graphql.org).\n\nIf your company benefits from GraphQL and you would like to provide essential\nfinancial support for the systems and people that power our community, please\nalso consider membership in the\n[GraphQL Foundation](https://foundation.graphql.org/join).\n\n## License\n\nMIT\n</yakaai_skills>"}