diff --git a/.changeset/config.json b/.changeset/config.json
index 4a40bb63b8e..36fce60cf83 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -1,13 +1,18 @@
{
- "$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json",
+ "$schema": "https://unpkg.com/@changesets/config@2.0.1/schema.json",
"changelog": ["@changesets/changelog-github", { "repo": "graphql/graphiql" }],
"commit": false,
"linked": [],
"access": "public",
"baseBranch": "main",
- "ignore": ["example-*"],
+ "ignore": [
+ "example-graphiql-webpack",
+ "example-monaco-graphql-nextjs",
+ "example-monaco-graphql-react-vite",
+ "example-monaco-graphql-webpack"
+ ],
"updateInternalDependencies": "patch",
"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
- "updateInternalDependents": "always"
+ "onlyUpdatePeerDependentsWhenOutOfRange": true
}
}
diff --git a/.eslintignore b/.eslintignore
index ac46f475f89..d9f524de260 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,4 @@
-.changeset/
+.changeset/*.md
# ignore working-group dir markdown so it's easier for people to edit from the UI
working-group/
@@ -6,3 +6,4 @@ packages/codemirror-graphql/src/__tests__/schema-kitchen-sink.graphql
CHANGELOG.md
**/CHANGELOG.md
packages/vscode-graphql-syntax/tests/__fixtures__/
+packages/graphql-language-service-server/src/__tests__/parseDocument.test.ts
diff --git a/.eslintrc.js b/.eslintrc.js
index f9f7e78023c..0a9cdf1f0ec 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -35,7 +35,7 @@ module.exports = {
overrides: [
{
// Rules for all code files
- files: ['**/*.{js,jsx,ts,tsx}'],
+ files: ['**/*.{js,jsx,ts,tsx,mts,cts}'],
parserOptions: {
ecmaVersion: 6,
},
@@ -54,21 +54,14 @@ module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
- 'plugin:import/recommended',
- 'plugin:import/typescript',
+ 'plugin:import-x/recommended',
+ 'plugin:import-x/typescript',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:react/jsx-runtime',
'prettier',
],
- plugins: [
- 'promise',
- 'sonarjs',
- 'unicorn',
- '@arthurgeron/react-usememo',
- 'sonar',
- '@shopify',
- ],
+ plugins: ['promise', 'sonarjs', 'unicorn', 'sonar', '@shopify'],
globals: {
atom: false,
document: false,
@@ -81,10 +74,6 @@ module.exports = {
'@shopify/prefer-early-return': ['error', { maximumStatements: 2 }],
'@shopify/prefer-class-properties': 'off', // enable after https://github.com/Shopify/web-configs/issues/387 will be fixed
'sonarjs/no-inverted-boolean-check': 'error',
- '@arthurgeron/react-usememo/require-usememo': [
- 'error',
- { checkHookCalls: false },
- ],
// Possible Errors (http://eslint.org/docs/rules/#possible-errors)
'no-console': 'error',
'no-constant-binary-expression': 'error',
@@ -133,7 +122,14 @@ module.exports = {
'no-octal-escape': 'error',
'no-param-reassign': 'error',
'no-proto': 'error',
- 'no-restricted-properties': 'off',
+ 'no-restricted-properties': [
+ 'error',
+ {
+ object: 'window',
+ property: 'localStorage',
+ message: 'Use `localStorage` instead',
+ },
+ ],
'no-return-assign': 'error',
'no-return-await': 'error',
'no-script-url': 'error',
@@ -144,7 +140,6 @@ module.exports = {
'no-useless-call': 'error',
'no-useless-concat': 'error',
'no-useless-return': 'off',
- '@typescript-eslint/prefer-optional-chain': 'error',
'no-warning-comments': 'off',
radix: 'error',
'require-await': 'off',
@@ -281,9 +276,9 @@ module.exports = {
'sonarjs/no-ignored-return': 'error',
'unicorn/no-array-push-push': 'error',
- 'import/no-extraneous-dependencies': 'error',
- 'import/no-duplicates': 'error',
- 'import/no-named-as-default': 'error',
+ 'import-x/no-extraneous-dependencies': 'error',
+ 'import-x/no-duplicates': 'error',
+ 'import-x/no-named-as-default': 'error',
'prefer-object-spread': 'error',
// React rules
'react/no-unused-state': 'error',
@@ -336,7 +331,15 @@ module.exports = {
'sonar/prefer-promise-shorthand': 'error',
'sonar/no-dead-store': 'error',
'unicorn/prefer-node-protocol': 'error',
- 'import/no-unresolved': ['error', { ignore: ['^node:'] }],
+ 'import-x/no-unresolved': [
+ 'error',
+ { ignore: ['^node:', '\\.svg\\?react$'] },
+ ],
+ 'no-extra-boolean-cast': [
+ 'error',
+ { enforceForInnerExpressions: true },
+ ],
+ 'unicorn/no-length-as-slice-end': 'error',
'unicorn/prefer-string-replace-all': 'error',
'unicorn/no-hex-escape': 'off', // TODO: enable
// doesn't catch a lot of cases; we use ESLint builtin `no-restricted-syntax` to forbid `.keyCode`
@@ -351,14 +354,16 @@ module.exports = {
},
{
// Rules that requires type information
- files: ['**/*.{ts,tsx}'],
+ files: ['**/*.{ts,tsx,mts,cts}'],
excludedFiles: ['**/*.{md,mdx}/*.{ts,tsx}'],
// extends: ['plugin:@typescript-eslint/recommended-type-checked'],
rules: {
+ '@typescript-eslint/prefer-optional-chain': 'error',
'@typescript-eslint/no-unnecessary-type-assertion': 'error',
'@typescript-eslint/no-floating-promises': 'error',
'@typescript-eslint/non-nullable-type-assertion-style': 'error',
'@typescript-eslint/consistent-type-assertions': 'error',
+ '@typescript-eslint/no-duplicate-type-constituents': 'error',
// TODO: Fix all errors for the following rules included in recommended config
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
@@ -398,7 +403,6 @@ module.exports = {
rules: {
'jest/no-conditional-expect': 'off',
'jest/expect-expect': ['error', { assertFunctionNames: ['expect*'] }],
- '@arthurgeron/react-usememo/require-usememo': 'off',
},
},
{
@@ -415,14 +419,14 @@ module.exports = {
'no-console': 'off',
'no-new': 'off',
'no-alert': 'off',
- 'import/no-unresolved': 'off',
+ 'import-x/no-unresolved': 'off',
},
},
{
// Rule for ignoring imported dependencies from tests files
files: ['**/__tests__/**', 'webpack.config.js', '**/tests/**'],
rules: {
- 'import/no-extraneous-dependencies': 'off',
+ 'import-x/no-extraneous-dependencies': 'off',
},
},
{
@@ -432,7 +436,7 @@ module.exports = {
'packages/vscode-graphql-execution/**',
],
rules: {
- 'import/no-unresolved': ['error', { ignore: ['^node:', 'vscode'] }],
+ 'import-x/no-unresolved': ['error', { ignore: ['^node:', 'vscode'] }],
},
},
{
@@ -473,14 +477,13 @@ module.exports = {
// Rules for codeblocks inside Markdown/MDX
files: ['**/*.{md,mdx}/*.{js,jsx,ts,tsx}'],
rules: {
- 'import/no-extraneous-dependencies': 'off',
+ 'import-x/no-extraneous-dependencies': 'off',
'@typescript-eslint/no-unused-vars': 'off',
- 'import/no-unresolved': 'off',
+ 'import-x/no-unresolved': 'off',
'no-console': 'off',
'no-undef': 'off',
'react/jsx-no-undef': 'off',
'react-hooks/rules-of-hooks': 'off',
- '@arthurgeron/react-usememo/require-usememo': 'off',
'sonar/no-dead-store': 'off',
'@typescript-eslint/no-restricted-imports': 'off',
},
diff --git a/.github/workflows/main-test.yml b/.github/workflows/main-test.yml
index 7a93be632ca..53e4db10da6 100644
--- a/.github/workflows/main-test.yml
+++ b/.github/workflows/main-test.yml
@@ -10,23 +10,22 @@ jobs:
steps:
- name: Checkout Code
- uses: actions/checkout@v3
- - uses: actions/setup-node@v3
+ uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
with:
- node-version: 16
cache: yarn
- name: Cache node modules
id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- - uses: actions/cache@v3
+ - uses: actions/cache@v4
with:
path: |
~/.cache/Cypress
- key: cypress-${{ runner.os }}
+ key: cypress-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- run: yarn install --frozen-lockfile --immutable
jest:
@@ -34,18 +33,17 @@ jobs:
runs-on: ubuntu-latest
needs: [install]
steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
- with:
- node-version: 16
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- run: yarn test --coverage
- - uses: codecov/codecov-action@v3
+ - uses: codecov/codecov-action@v4
with:
token: ${{ secrets.CODECOV_TOKEN }}
files: coverage/lcov.info
diff --git a/.github/workflows/pr-graphql-compat-check.yml b/.github/workflows/pr-graphql-compat-check.yml
index 7c2d7ead6f0..7643e219f43 100644
--- a/.github/workflows/pr-graphql-compat-check.yml
+++ b/.github/workflows/pr-graphql-compat-check.yml
@@ -23,17 +23,17 @@ jobs:
runs-on: ubuntu-20.04
strategy:
matrix:
- release: ['15.5.3', '^15.8.0', '16.1.0', '16.2.0', '16.3.0']
+ release:
+ ['15.5.3', '^15.8.0', '16.1.0', '16.2.0', '16.3.0', '17.0.0-alpha.5']
steps:
- name: Checkout Code
- uses: actions/checkout@v3
+ uses: actions/checkout@v4
- - uses: actions/setup-node@v3
+ - uses: actions/setup-node@v4
with:
cache: yarn
- node-version: 16
- name: Cache node modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: node_modules
key: node_modules-${{hashFiles('yarn.lock')}}
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index b6c35bd1a43..5c7690b69dc 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -10,23 +10,22 @@ jobs:
steps:
- name: Checkout Code
- uses: actions/checkout@v3
- - uses: actions/setup-node@v3
+ uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
with:
- node-version: 16
cache: yarn
- name: Cache node modules
id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- - uses: actions/cache@v3
+ - uses: actions/cache@v4
with:
path: |
~/.cache/Cypress
- key: cypress-${{ runner.os }}
+ key: cypress-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- run: yarn install --frozen-lockfile --immutable
build:
@@ -35,19 +34,18 @@ jobs:
needs: [install]
steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
- with:
- node-version: 16
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- run: yarn build
- - uses: actions/cache@v3
+ - uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
@@ -57,12 +55,10 @@ jobs:
runs-on: ubuntu-latest
needs: [install]
steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
- with:
- node-version: 16
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
@@ -74,12 +70,10 @@ jobs:
runs-on: ubuntu-latest
needs: [install]
steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
- with:
- node-version: 16
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
@@ -87,22 +81,20 @@ jobs:
- run: yarn pretty-check
jest:
- name: Jest Unit Tests
+ name: Jest Unit & Integration Tests
runs-on: ubuntu-latest
needs: [install]
steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
- with:
- node-version: 16
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- run: yarn test --coverage
- - uses: codecov/codecov-action@v3
+ - uses: codecov/codecov-action@v4
with:
token: ${{ secrets.CODECOV_TOKEN }}
files: coverage/lcov.info
@@ -115,18 +107,17 @@ jobs:
needs: [build]
steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
- with:
- node-version: 16
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- - uses: actions/cache@v3
+ - uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
@@ -138,17 +129,16 @@ jobs:
needs: [build]
steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
- with:
- node-version: 16
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- - uses: actions/cache@v3
+ - uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
@@ -160,34 +150,34 @@ jobs:
needs: [build]
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- - uses: actions/cache@v3
+ - uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
- - uses: actions/cache@v3
+ - uses: actions/cache@v4
with:
path: |
~/.cache/Cypress
- key: cypress-${{ runner.os }}
+ key: cypress-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- name: Cypress run
- uses: cypress-io/github-action@v5
+ uses: cypress-io/github-action@v6
with:
install: false
command: yarn e2e
- - uses: actions/upload-artifact@v3
+ - uses: actions/upload-artifact@v4
if: failure()
with:
name: cypress-screenshots
path: packages/graphiql/cypress/screenshots
if-no-files-found: ignore
- - uses: actions/upload-artifact@v3
+ - uses: actions/upload-artifact@v4
if: failure()
with:
name: cypress-videos
@@ -201,19 +191,17 @@ jobs:
needs: [build, jest, eslint, vitest, e2e]
if: github.event.pull_request.head.repo.full_name == github.repository
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
with:
fetch-depth: 0
- - uses: actions/setup-node@v3
- with:
- node-version: 16
+ - uses: actions/setup-node@v4
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
key: modules-${{ github.sha }}
- - uses: actions/cache@v3
+ - uses: actions/cache@v4
with:
key: build-${{ github.sha }}
path: ${{ env.BUILD-CACHE-LIST }}
@@ -262,12 +250,10 @@ jobs:
needs: [install]
steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
- with:
- node-version: 16
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
- id: cache-modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
**/node_modules
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index a84a1e070be..aa44f00b12a 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -2,8 +2,7 @@ name: Release
on:
push:
- branches:
- - main
+ branches: [main, graphiql-v4]
permissions: {}
jobs:
release:
@@ -14,15 +13,14 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout Code
- uses: actions/checkout@v3
+ uses: actions/checkout@v4
with:
fetch-depth: 0
- - uses: actions/setup-node@v3
+ - uses: actions/setup-node@v4
with:
- node-version: 16
cache: yarn
- name: Cache node modules
- uses: actions/cache@v3
+ uses: actions/cache@v4
id: cache-modules
with:
path: node_modules
diff --git a/.nvmrc b/.nvmrc
index 19c7bdba7b1..209e3ef4b62 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-16
\ No newline at end of file
+20
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000000..5ded8c95b13
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+# removing this will break tests b/c of whitespace changes + format on save/commit, etc
+packages/graphql-language-service-server/src/__tests__/parseDocument.test.ts
diff --git a/.prettierrc b/.prettierrc
index a219e18edf6..d0ab7b6eb11 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -10,6 +10,12 @@
"printWidth": 80,
"proseWrap": "preserve"
}
+ },
+ {
+ "files": "*.svg",
+ "options": {
+ "parser": "html"
+ }
}
]
}
diff --git a/README.md b/README.md
index 237dfa2f167..523ed4efde8 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+[](https://graphql.org/conf/2024/?utm_source=github&utm_medium=graphiql&utm_campaign=readme)
+
# GraphQL IDE Monorepo
diff --git a/babel.config.js b/babel.config.js
index 56fedcc08d2..50347139e3d 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -6,7 +6,7 @@ const envConfig = {
if (process.env.ESM) {
envConfig.modules = false;
- envConfig.targets = { node: true };
+ envConfig.targets = { node: 'current' };
envConfig.bugfixes = true;
}
@@ -36,7 +36,10 @@ module.exports = {
},
plugins: [
require.resolve('@babel/plugin-proposal-class-properties'),
+
require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
require.resolve('@babel/plugin-proposal-optional-chaining'),
+ require.resolve('@babel/plugin-transform-private-methods'),
+ ['babel-plugin-transform-import-meta', { module: 'ES6' }],
],
};
diff --git a/cspell.json b/cspell.json
index 24ff11ab942..9b714e08196 100644
--- a/cspell.json
+++ b/cspell.json
@@ -9,7 +9,7 @@
"dictionaryDefinitions": [
{
"name": "custom-words",
- "path": "./custom-words.txt",
+ "path": "./resources/custom-words.txt",
"addWords": true
}
],
diff --git a/examples/cm6-graphql-legacy-parcel/package.json b/examples/cm6-graphql-legacy-parcel/package.json
index 320173bbe95..7397dfc7d0f 100644
--- a/examples/cm6-graphql-legacy-parcel/package.json
+++ b/examples/cm6-graphql-legacy-parcel/package.json
@@ -1,6 +1,6 @@
{
"name": "example-cm6-graphql-legacy-parcel",
- "version": "1.1.10-alpha.8",
+ "version": "0.0.0",
"license": "MIT",
"description": "GraphiQL Parcel Example",
"main": "index.js",
diff --git a/examples/cm6-graphql-parcel/package.json b/examples/cm6-graphql-parcel/package.json
index 890d04885d1..416f31729ec 100644
--- a/examples/cm6-graphql-parcel/package.json
+++ b/examples/cm6-graphql-parcel/package.json
@@ -1,6 +1,6 @@
{
"name": "example-cm6-graphql-parcel",
- "version": "1.1.10-alpha.8",
+ "version": "0.0.0",
"license": "MIT",
"description": "GraphiQL Parcel Example",
"main": "index.js",
diff --git a/examples/graphiql-cdn/package.json b/examples/graphiql-cdn/package.json
index fb2b68a60d1..1ad81c99f97 100644
--- a/examples/graphiql-cdn/package.json
+++ b/examples/graphiql-cdn/package.json
@@ -1,6 +1,6 @@
{
"name": "example-graphiql-cdn",
- "version": "0.0.8",
+ "version": "0.0.0",
"private": true,
"license": "MIT",
"description": "An example using GraphiQL",
diff --git a/examples/graphiql-create-react-app/CHANGELOG.md b/examples/graphiql-create-react-app/CHANGELOG.md
deleted file mode 100644
index 2f39755401f..00000000000
--- a/examples/graphiql-create-react-app/CHANGELOG.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.1.11-alpha.8](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.11-alpha.7...example-graphiql-create-react-app@0.1.11-alpha.8) (2021-01-07)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.11-alpha.7](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.11-alpha.6...example-graphiql-create-react-app@0.1.11-alpha.7) (2021-01-07)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.11-alpha.6](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.11-alpha.5...example-graphiql-create-react-app@0.1.11-alpha.6) (2021-01-07)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.11-alpha.5](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.11-alpha.4...example-graphiql-create-react-app@0.1.11-alpha.5) (2021-01-03)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.11-alpha.4](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.11-alpha.3...example-graphiql-create-react-app@0.1.11-alpha.4) (2020-12-28)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.11-alpha.3](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.11-alpha.2...example-graphiql-create-react-app@0.1.11-alpha.3) (2020-08-26)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.11-alpha.2](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.11-alpha.1...example-graphiql-create-react-app@0.1.11-alpha.2) (2020-08-22)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.11-alpha.1](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.11-alpha.0...example-graphiql-create-react-app@0.1.11-alpha.1) (2020-08-12)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.11-alpha.0](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.10...example-graphiql-create-react-app@0.1.11-alpha.0) (2020-08-10)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.10](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.6...example-graphiql-create-react-app@0.1.10) (2020-08-06)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.6](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.5...example-graphiql-create-react-app@0.1.6) (2020-06-11)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.5](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.4...example-graphiql-create-react-app@0.1.5) (2020-06-04)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.4](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.3...example-graphiql-create-react-app@0.1.4) (2020-06-04)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.3](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.2...example-graphiql-create-react-app@0.1.3) (2020-05-28)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## [0.1.2](https://github.com/graphql/graphiql/compare/example-graphiql-create-react-app@0.1.1...example-graphiql-create-react-app@0.1.2) (2020-05-19)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
-
-## 0.1.1 (2020-05-17)
-
-**Note:** Version bump only for package example-graphiql-create-react-app
diff --git a/examples/graphiql-create-react-app/package.json b/examples/graphiql-create-react-app/package.json
index beac9385e65..e46b92ee19e 100644
--- a/examples/graphiql-create-react-app/package.json
+++ b/examples/graphiql-create-react-app/package.json
@@ -1,12 +1,12 @@
{
"name": "example-graphiql-create-react-app",
- "version": "0.1.11-alpha.8",
+ "version": "0.0.0",
"private": true,
"dependencies": {
- "graphiql": "^2.2.0",
- "graphql": "^16.8.1",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
+ "graphiql": "^3.4.0",
+ "graphql": "^16.9.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
"react-scripts": "5.0.1"
},
"scripts": {
@@ -26,7 +26,6 @@
]
},
"devDependencies": {
- "eslint-config-react-app": "^5.2.1",
- "worker-loader": "^2.0.0"
+ "eslint-config-react-app": "^7.0.1"
}
}
diff --git a/examples/graphiql-create-react-app/public/index.html b/examples/graphiql-create-react-app/public/index.html
index 701a1dbef87..010622e92eb 100644
--- a/examples/graphiql-create-react-app/public/index.html
+++ b/examples/graphiql-create-react-app/public/index.html
@@ -6,12 +6,11 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
-
+
-
GraphiQL create-react-app Example
diff --git a/examples/graphiql-create-react-app/src/App.tsx b/examples/graphiql-create-react-app/src/App.jsx
similarity index 62%
rename from examples/graphiql-create-react-app/src/App.tsx
rename to examples/graphiql-create-react-app/src/App.jsx
index 022260f5c67..9175fb03fee 100644
--- a/examples/graphiql-create-react-app/src/App.tsx
+++ b/examples/graphiql-create-react-app/src/App.jsx
@@ -1,10 +1,8 @@
-import React from 'react';
import { GraphiQL } from 'graphiql';
-import type { Fetcher } from '@graphiql/toolkit';
-import 'graphiql/graphiql.min.css';
+import 'graphiql/graphiql.css';
-const fetcher: Fetcher = async graphQLParams => {
- const data = await fetch(
+const fetcher = async graphQLParams => {
+ const response = await fetch(
'https://swapi-graphql.netlify.app/.netlify/functions/index',
{
method: 'POST',
@@ -16,7 +14,7 @@ const fetcher: Fetcher = async graphQLParams => {
credentials: 'same-origin',
},
);
- return data.json().catch(() => data.text());
+ return response.json();
};
const App = () => ;
diff --git a/examples/graphiql-create-react-app/src/index.css b/examples/graphiql-create-react-app/src/index.css
index d95d5ede303..2b7ec48b007 100644
--- a/examples/graphiql-create-react-app/src/index.css
+++ b/examples/graphiql-create-react-app/src/index.css
@@ -1,8 +1,6 @@
body {
- padding: 0;
margin: 0;
- min-height: 100vh;
}
#root {
- height: 100vh;
+ height: 100dvh;
}
diff --git a/examples/graphiql-create-react-app/src/index.tsx b/examples/graphiql-create-react-app/src/index.jsx
similarity index 57%
rename from examples/graphiql-create-react-app/src/index.tsx
rename to examples/graphiql-create-react-app/src/index.jsx
index ac32f49914d..16e6dbd33a2 100644
--- a/examples/graphiql-create-react-app/src/index.tsx
+++ b/examples/graphiql-create-react-app/src/index.jsx
@@ -1,7 +1,6 @@
-import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';
-const root = createRoot(document.getElementById('root')!);
+const root = createRoot(document.getElementById('root'));
root.render();
diff --git a/examples/graphiql-create-react-app/src/react-app-env.d.ts b/examples/graphiql-create-react-app/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5fc6b..00000000000
--- a/examples/graphiql-create-react-app/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
diff --git a/examples/graphiql-create-react-app/tsconfig.json b/examples/graphiql-create-react-app/tsconfig.json
deleted file mode 100644
index af10394b4c3..00000000000
--- a/examples/graphiql-create-react-app/tsconfig.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "compilerOptions": {
- "target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "esnext",
- "moduleResolution": "node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react"
- },
- "include": ["src"]
-}
diff --git a/examples/graphiql-parcel/package.json b/examples/graphiql-parcel/package.json
index 53b1c11d246..affd3a4dd5d 100644
--- a/examples/graphiql-parcel/package.json
+++ b/examples/graphiql-parcel/package.json
@@ -1,6 +1,6 @@
{
"name": "example-graphiql-parcel",
- "version": "1.1.10-alpha.8",
+ "version": "0.0.0",
"license": "MIT",
"description": "GraphiQL Parcel Example",
"main": "index.js",
diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
index 8c3bc3c25bf..0559ab93327 100644
--- a/examples/graphiql-webpack/package.json
+++ b/examples/graphiql-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "example-graphiql-webpack",
- "version": "1.1.1-alpha.8",
+ "version": "0.0.0",
"private": true,
"license": "MIT",
"description": "A GraphiQL example with webpack and typescript",
@@ -9,11 +9,11 @@
"start": "NODE_ENV=development webpack-cli serve"
},
"dependencies": {
- "@graphiql/plugin-code-exporter": "^1.0.4",
- "@graphiql/plugin-explorer": "^1.0.3",
- "@graphiql/toolkit": "^0.9.1",
- "@graphiql/react": "^0.20.3",
- "graphiql": "^3.1.1",
+ "@graphiql/plugin-code-exporter": "^3.1.0",
+ "@graphiql/plugin-explorer": "^3.2.0",
+ "@graphiql/toolkit": "^0.10.0",
+ "@graphiql/react": "^0.24.0",
+ "graphiql": "^3.5.0",
"graphql": "^16.8.1",
"graphql-ws": "^5.5.5",
"react": "^18.2.0",
diff --git a/examples/graphiql-webpack/public/logo.svg b/examples/graphiql-webpack/public/logo.svg
index 337843aca18..43e513e06ca 100644
--- a/examples/graphiql-webpack/public/logo.svg
+++ b/examples/graphiql-webpack/public/logo.svg
@@ -1 +1,27 @@
-
+
diff --git a/examples/graphiql-webpack/src/index.css b/examples/graphiql-webpack/src/index.css
index 986c0b8a9ad..179e59ca66e 100644
--- a/examples/graphiql-webpack/src/index.css
+++ b/examples/graphiql-webpack/src/index.css
@@ -97,10 +97,10 @@ li.select-server--previous-entry button:hover {
li.select-server--previous-entry button {
background-color: transparent;
- border: hsla(var(--color-neutral), 1);
+ border: hsl(var(--color-neutral));
display: flex;
- color: hsla(var(--color-neutral), 1);
+ color: hsl(var(--color-neutral));
font-size: 1rem;
- cursor: pinter;
+ cursor: pointer;
padding: 0.5rem;
}
diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
index 455f6540093..ea0adb4c667 100644
--- a/examples/graphiql-webpack/src/index.jsx
+++ b/examples/graphiql-webpack/src/index.jsx
@@ -84,7 +84,6 @@ const App = () => {
return (
(
statusCode: init.status,
};
} catch (err) {
- // The handler should'nt throw errors.
+ // The handler shouldn't throw errors.
// If you wish to handle them differently, consider implementing your own request handler.
console.error(
- 'Internal error occurred during request handling. ' +
- 'Please check your implementation.',
+ 'Internal error occurred during request handling. Please check your implementation.',
err,
);
return { statusCode: 500 };
@@ -57,4 +57,4 @@ export function createHandler(
};
}
-export const handler = createHandler({ schema });
+export const handler = createHandler({ schema, execute: customExecute });
diff --git a/jest.config.base.js b/jest.config.base.js
index 15e87eda8f8..029f7e79290 100644
--- a/jest.config.base.js
+++ b/jest.config.base.js
@@ -37,13 +37,14 @@ module.exports = (dir, env = 'jsdom') => {
testEnvironment: env,
testPathIgnorePatterns: ['node_modules', 'dist', 'cypress'],
collectCoverageFrom: ['**/src/**/*.{js,jsx,ts,tsx}'],
+ transformIgnorePatterns: ['node_modules/(!@astrojs/compiler)'],
coveragePathIgnorePatterns: [
'dist',
'esm',
'node_modules',
'__tests__',
'resources',
- 'test',
+
'examples',
'.d.ts',
'types.ts',
diff --git a/package.json b/package.json
index 21399374029..41f402e9534 100644
--- a/package.json
+++ b/package.json
@@ -14,13 +14,13 @@
},
"lint-staged": {
"*.{js,ts,jsx,tsx}": [
- "eslint --cache --fix",
- "prettier --write --ignore-path .eslintignore",
+ "cross-env ESLINT_USE_FLAT_CONFIG=false eslint --cache --fix",
+ "prettier --write --ignore-path .eslintignore --ignore-path resources/prettierignore",
"jest --passWithNoTests",
"yarn lint-cspell"
],
"*.{md,html,json,css}": [
- "prettier --write --ignore-path .eslintignore",
+ "prettier --write --ignore-path .eslintignore --ignore-path resources/prettierignore",
"yarn lint-cspell"
]
},
@@ -29,9 +29,7 @@
"pre-commit": "lint-staged"
}
},
- "engines": {
- "npm": "please_use_yarn_instead"
- },
+ "packageManager": "yarn@1.22.22",
"scripts": {
"build": "yarn build-clean && yarn tsc && yarn build:nontsc",
"build-bundles": "yarn prebuild-bundles && yarn wsrun:noexamples --stages build-bundles",
@@ -43,14 +41,14 @@
"build:watch": "yarn tsc --watch",
"build-demo": "wsrun -m build-demo",
"watch": "yarn build:watch",
- "watch-vscode": "yarn workspace vscode-graphql compile",
+ "watch-vscode": "yarn tsc && yarn workspace vscode-graphql compile",
"watch-vscode-exec": "yarn workspace vscode-graphql-execution compile",
"check": "yarn tsc --noEmit",
"cypress-open": "yarn workspace graphiql cypress-open",
"dev-graphiql": "yarn workspace graphiql dev",
"e2e": "yarn run e2e:build && yarn workspace graphiql e2e",
"e2e:build": "WEBPACK_SERVE=1 yarn workspace graphiql build-bundles",
- "eslint": "NODE_OPTIONS=--max-old-space-size=4096 eslint --max-warnings=0 --ignore-path .gitignore --cache .",
+ "eslint": "NODE_OPTIONS=--max-old-space-size=4096 ESLINT_USE_FLAT_CONFIG=false eslint --max-warnings=0 --ignore-path .gitignore --cache .",
"format": "yarn eslint --fix && yarn pretty",
"jest": "jest",
"license-check": "jsgl --local packages/*",
@@ -62,7 +60,7 @@
"prepublishOnly": "./scripts/prepublish.sh",
"postbuild": "wsrun --exclude-missing postbuild",
"pretty": "yarn pretty-check --write",
- "pretty-check": "prettier --cache --check --ignore-path .gitignore --ignore-path .eslintignore .",
+ "pretty-check": "prettier --cache --check --ignore-path .gitignore --ignore-path resources/prettierignore --ignore-path .eslintignore .",
"ci:version": "yarn changeset version && yarn build && yarn format",
"release": "yarn build && yarn build-bundles && (wsrun release --exclude-missing --serial --recursive --changedSince main -- || true) && yarn changeset publish",
"release:canary": "(node scripts/canary-release.js && yarn build-bundles && yarn changeset publish --tag canary) || echo Skipping Canary...",
@@ -76,23 +74,27 @@
"test:watch": "yarn jest --watch",
"tsc": "tsc --build",
"vitest": "yarn wsrun -p -m test",
- "wsrun:noexamples": "wsrun --exclude-missing --exclude example-monaco-graphql-react-vite --exclude example-monaco-graphql-nextjs --exclude example-monaco-graphql-webpack --exclude example-graphiql-webpack"
+ "wsrun:noexamples": "wsrun --exclude-missing --exclude example-monaco-graphql-react-vite --exclude example-monaco-graphql-nextjs --exclude example-monaco-graphql-webpack --exclude example-graphiql-webpack",
+ "gen-agenda": "wgutils agenda gen"
},
"dependencies": {
- "@arthurgeron/eslint-plugin-react-usememo": "^1.1.4",
+ "graphql-http": "^1.22.1",
"@babel/cli": "^7.21.0",
"@babel/core": "^7.21.0",
"@babel/plugin-proposal-class-properties": "^7.18.6",
+ "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+ "@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
+ "@babel/plugin-transform-private-methods": "^7.24.7",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0",
"@babel/register": "^7.21.0",
- "@changesets/changelog-github": "0.4.7",
- "@changesets/cli": "2.25.2",
+ "@changesets/changelog-github": "0.5.0",
+ "@changesets/cli": "2.27.7",
"@manypkg/get-packages": "^1.1.3",
- "@shopify/eslint-plugin": "^42.1.0",
+ "@shopify/eslint-plugin": "^45.0.0",
"@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
"@testing-library/jest-dom": "5.16.5",
"@types/codemirror": "^0.0.90",
@@ -101,25 +103,26 @@
"@types/jest": "^29.5.2",
"@types/node": "^16.18.4",
"@types/ws": "8.2.2",
- "@typescript-eslint/eslint-plugin": "6.0.0-alpha.159",
- "@typescript-eslint/parser": "6.0.0-alpha.159",
+ "@typescript-eslint/eslint-plugin": "^7.17.0",
+ "@typescript-eslint/parser": "^7.17.0",
"babel-jest": "^29.4.3",
+ "babel-plugin-transform-import-meta": "^2.2.1",
"concurrently": "^7.0.0",
"copy": "^0.3.2",
"cspell": "^5.15.2",
- "eslint": "^8.43.0",
- "eslint-config-prettier": "^8.8.0",
- "eslint-import-resolver-typescript": "^3.5.5",
- "eslint-plugin-cypress": "^2.13.3",
- "eslint-plugin-import": "^2.27.5",
- "eslint-plugin-jest": "^27.2.2",
- "eslint-plugin-mdx": "^2.1.0",
- "eslint-plugin-promise": "^6.1.1",
- "eslint-plugin-react": "^7.32.2",
- "eslint-plugin-react-hooks": "^4.6.0",
- "eslint-plugin-sonar": "^0.12.0",
- "eslint-plugin-sonarjs": "^0.19.0",
- "eslint-plugin-unicorn": "^47.0.0",
+ "eslint": "^9.7.0",
+ "eslint-config-prettier": "^9.1.0",
+ "eslint-import-resolver-typescript": "^3.6.1",
+ "eslint-plugin-cypress": "^3.4.0",
+ "eslint-plugin-import-x": "^3.1.0",
+ "eslint-plugin-jest": "^28.6.0",
+ "eslint-plugin-mdx": "^3.1.5",
+ "eslint-plugin-promise": "^7.0.0",
+ "eslint-plugin-react": "^7.35.0",
+ "eslint-plugin-react-hooks": "^5.1.0-rc-76002254-20240724",
+ "eslint-plugin-sonar": "^0.14.1",
+ "eslint-plugin-sonarjs": "^1.0.4",
+ "eslint-plugin-unicorn": "^55.0.0",
"execa": "^7.1.1",
"fetch-mock": "6.5.2",
"husky": "^4.2.3",
@@ -129,15 +132,19 @@
"mkdirp": "^1.0.4",
"patch-package": "^7.0.2",
"postinstall-postinstall": "^2.1.0",
- "prettier": "3.0.0-alpha.12",
+ "prettier": "3.3.2",
"rimraf": "^3.0.2",
"ts-jest": "^27.1.5",
"typedoc": "^0.19.2",
"typescript": "^4.6.3",
- "vitest": "^0.32.2",
+ "vitest": "^2.0.4",
+ "wgutils": "^0.1.7",
"wsrun": "^5.2.4"
},
"resolutions": {
- "@babel/traverse": "^7.23.2"
+ "@babel/traverse": "^7.23.2",
+ "vscode-languageserver-types": "3.17.3",
+ "markdown-it": "14.1.0",
+ "graphql": "17.0.0-alpha.7"
}
}
diff --git a/packages/cm6-graphql/CHANGELOG.md b/packages/cm6-graphql/CHANGELOG.md
index fa7947f02f7..3a6cd89d9e7 100644
--- a/packages/cm6-graphql/CHANGELOG.md
+++ b/packages/cm6-graphql/CHANGELOG.md
@@ -1,5 +1,37 @@
# cm6-graphql
+## 0.1.0
+
+### Minor Changes
+
+- [#3682](https://github.com/graphql/graphiql/pull/3682) [`6c9f0df`](https://github.com/graphql/graphiql/commit/6c9f0df83ea4afe7fa59f84d83d59fba73dc3931) Thanks [@yaacovCR](https://github.com/yaacovCR)! - Support v17 of `graphql-js` from `17.0.0-alpha.2` forward.
+
+ Includes support for the latest incremental delivery response format. For further details, see https://github.com/graphql/defer-stream-wg/discussions/69.
+
+### Patch Changes
+
+- Updated dependencies [[`6c9f0df`](https://github.com/graphql/graphiql/commit/6c9f0df83ea4afe7fa59f84d83d59fba73dc3931)]:
+ - graphql-language-service@5.3.0
+
+## 0.0.15
+
+### Patch Changes
+
+- [#3521](https://github.com/graphql/graphiql/pull/3521) [`aa6dbbb4`](https://github.com/graphql/graphiql/commit/aa6dbbb45bf51c1966537640fbe5c4f375735c8d) Thanks [@acao](https://github.com/acao)! - Fixes several issues with Type System (SDL) completion across the ecosystem:
+
+ - restores completion for object and input type fields when the document context is not detectable or parseable
+ - correct top-level completions for either of the unknown, type system or executable definitions. this leads to mixed top level completions when the document is unparseable, but now you are not seemingly restricted to only executable top level definitions
+ - `.graphqls` ad-hoc standard functionality remains, but is not required, as it is not part of the official spec, and the spec also allows mixed mode documents in theory, and this concept is required when the type is unknown
+
+- Updated dependencies [[`aa6dbbb4`](https://github.com/graphql/graphiql/commit/aa6dbbb45bf51c1966537640fbe5c4f375735c8d)]:
+ - graphql-language-service@5.2.1
+
+## 0.0.14
+
+### Patch Changes
+
+- [#3534](https://github.com/graphql/graphiql/pull/3534) [`f4c98c1f`](https://github.com/graphql/graphiql/commit/f4c98c1f7c6df5a918479e641631e8fbc5b5a92e) Thanks [@johndcollett](https://github.com/johndcollett)! - fix: multiple argument syntax highlighting
+
## 0.0.13
### Patch Changes
diff --git a/packages/cm6-graphql/README.md b/packages/cm6-graphql/README.md
index a23f718dbff..4ce0fbf2d9a 100644
--- a/packages/cm6-graphql/README.md
+++ b/packages/cm6-graphql/README.md
@@ -11,7 +11,7 @@ autocomplete and linting powered by your GraphQL Schema.
### Getting Started
```sh
-npm install --save cm6-graphql
+npm install cm6-graphql
```
[CodeMirror 6](https://codemirror.net/) customization is done through
diff --git a/packages/cm6-graphql/__tests__/cases.txt b/packages/cm6-graphql/__tests__/cases.txt
index 241700a124d..dbd41900c01 100644
--- a/packages/cm6-graphql/__tests__/cases.txt
+++ b/packages/cm6-graphql/__tests__/cases.txt
@@ -145,3 +145,13 @@ Document(
)
)
)
+
+# multiple arguments separated by a commas
+
+{
+ picture(width: 200, height: 100)
+}
+
+==>
+
+Document(OperationDefinition(SelectionSet("{",Selection(Field(FieldName,Arguments("(",Argument(ArgumentAttributeName,IntValue),Argument(ArgumentAttributeName,IntValue),")"))),"}")))
diff --git a/packages/cm6-graphql/package.json b/packages/cm6-graphql/package.json
index 6337050e0fd..1d39db3b16e 100644
--- a/packages/cm6-graphql/package.json
+++ b/packages/cm6-graphql/package.json
@@ -1,6 +1,6 @@
{
"name": "cm6-graphql",
- "version": "0.0.13",
+ "version": "0.1.0",
"description": "GraphQL language support for CodeMirror 6",
"scripts": {
"build": "cm-buildhelper src/index.ts",
@@ -16,7 +16,7 @@
"types": "dist/index.d.ts",
"sideEffects": false,
"dependencies": {
- "graphql-language-service": "^5.2.0"
+ "graphql-language-service": "^5.3.0"
},
"devDependencies": {
"@codemirror/autocomplete": "6.2.0",
@@ -30,7 +30,7 @@
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.1.0",
"esbuild": "0.18.10",
- "graphql": "^16.8.1",
+ "graphql": "^17.0.0-alpha.7",
"rollup": "^2.60.2",
"rollup-plugin-dts": "^4.0.1",
"rollup-plugin-esbuild": "^4.9.1",
@@ -44,7 +44,7 @@
"@codemirror/state": "6.2.0",
"@codemirror/view": "6.2.1",
"@lezer/highlight": "^1.0.0",
- "graphql": "^16.5.0"
+ "graphql": "^16.5.0 || ^17.0.0-alpha.2"
},
"license": "MIT"
}
diff --git a/packages/cm6-graphql/src/completions.ts b/packages/cm6-graphql/src/completions.ts
index 27131cf6975..383c69eb7c3 100644
--- a/packages/cm6-graphql/src/completions.ts
+++ b/packages/cm6-graphql/src/completions.ts
@@ -26,7 +26,14 @@ export const completion = graphqlLanguage.data.of({
}
const val = ctx.state.doc.toString();
const pos = offsetToPos(ctx.state.doc, ctx.pos);
- const results = getAutocompleteSuggestions(schema, val, pos);
+ const results = getAutocompleteSuggestions(
+ schema,
+ val,
+ pos,
+ undefined,
+ undefined,
+ opts?.autocompleteOptions,
+ );
if (results.length === 0) {
return null;
diff --git a/packages/cm6-graphql/src/interfaces.ts b/packages/cm6-graphql/src/interfaces.ts
index f4128928dba..10ab2f2a153 100644
--- a/packages/cm6-graphql/src/interfaces.ts
+++ b/packages/cm6-graphql/src/interfaces.ts
@@ -1,7 +1,11 @@
import { Completion, CompletionContext } from '@codemirror/autocomplete';
import { EditorView } from '@codemirror/view';
import { GraphQLSchema } from 'graphql';
-import { ContextToken, CompletionItem } from 'graphql-language-service';
+import {
+ ContextToken,
+ CompletionItem,
+ AutocompleteSuggestionOptions,
+} from 'graphql-language-service';
import { Position } from './helpers';
export interface GqlExtensionsOptions {
showErrorOnInvalidSchema?: boolean;
@@ -18,4 +22,5 @@ export interface GqlExtensionsOptions {
ctx: CompletionContext,
item: Completion,
) => Node | Promise | null;
+ autocompleteOptions?: AutocompleteSuggestionOptions;
}
diff --git a/packages/cm6-graphql/src/syntax.grammar b/packages/cm6-graphql/src/syntax.grammar
index 71c1c0838aa..1a61dda1d53 100644
--- a/packages/cm6-graphql/src/syntax.grammar
+++ b/packages/cm6-graphql/src/syntax.grammar
@@ -291,7 +291,7 @@ Directive { DirectiveName Arguments? }
Arguments { "(" Argument+ ")"}
// https://spec.graphql.org/October2021/#Argument
-Argument { ArgumentAttributeName ":" value }
+Argument { ArgumentAttributeName ":" value comma? }
ArgumentAttributeName { name }
diff --git a/packages/codemirror-graphql/CHANGELOG.md b/packages/codemirror-graphql/CHANGELOG.md
index a68bc3fbada..3fa9165b6b8 100644
--- a/packages/codemirror-graphql/CHANGELOG.md
+++ b/packages/codemirror-graphql/CHANGELOG.md
@@ -1,5 +1,46 @@
# Change Log
+## 2.1.0
+
+### Minor Changes
+
+- [#3682](https://github.com/graphql/graphiql/pull/3682) [`6c9f0df`](https://github.com/graphql/graphiql/commit/6c9f0df83ea4afe7fa59f84d83d59fba73dc3931) Thanks [@yaacovCR](https://github.com/yaacovCR)! - Support v17 of `graphql-js` from `17.0.0-alpha.2` forward.
+
+ Includes support for the latest incremental delivery response format. For further details, see https://github.com/graphql/defer-stream-wg/discussions/69.
+
+### Patch Changes
+
+- Updated dependencies [[`6c9f0df`](https://github.com/graphql/graphiql/commit/6c9f0df83ea4afe7fa59f84d83d59fba73dc3931)]:
+ - graphql-language-service@5.3.0
+
+## 2.0.13
+
+### Patch Changes
+
+- [#3637](https://github.com/graphql/graphiql/pull/3637) [`fdec377`](https://github.com/graphql/graphiql/commit/fdec377f28ac0d918a219b78dfa2d8f0996ff84d) Thanks [@dimaMachina](https://github.com/dimaMachina)! - update eslint plugins and fix errors
+
+- Updated dependencies [[`fdec377`](https://github.com/graphql/graphiql/commit/fdec377f28ac0d918a219b78dfa2d8f0996ff84d)]:
+ - graphql-language-service@5.2.2
+
+## 2.0.12
+
+### Patch Changes
+
+- [#3521](https://github.com/graphql/graphiql/pull/3521) [`aa6dbbb4`](https://github.com/graphql/graphiql/commit/aa6dbbb45bf51c1966537640fbe5c4f375735c8d) Thanks [@acao](https://github.com/acao)! - Fixes several issues with Type System (SDL) completion across the ecosystem:
+
+ - restores completion for object and input type fields when the document context is not detectable or parseable
+ - correct top-level completions for either of the unknown, type system or executable definitions. this leads to mixed top level completions when the document is unparseable, but now you are not seemingly restricted to only executable top level definitions
+ - `.graphqls` ad-hoc standard functionality remains, but is not required, as it is not part of the official spec, and the spec also allows mixed mode documents in theory, and this concept is required when the type is unknown
+
+- Updated dependencies [[`aa6dbbb4`](https://github.com/graphql/graphiql/commit/aa6dbbb45bf51c1966537640fbe5c4f375735c8d)]:
+ - graphql-language-service@5.2.1
+
+## 2.0.11
+
+### Patch Changes
+
+- [#3567](https://github.com/graphql/graphiql/pull/3567) [`fc7de5a7`](https://github.com/graphql/graphiql/commit/fc7de5a75f4b23dd62dd630b705895b5fa5d0a03) Thanks [@retrodaredevil](https://github.com/retrodaredevil)! - tooltip a tag's click listener calls event.preventDefault() to stop navigating away from page
+
## 2.0.10
### Patch Changes
diff --git a/packages/codemirror-graphql/README.md b/packages/codemirror-graphql/README.md
index ac0ef31d5be..3fa4e98b42d 100644
--- a/packages/codemirror-graphql/README.md
+++ b/packages/codemirror-graphql/README.md
@@ -15,7 +15,7 @@ typeahead hinter powered by your GraphQL Schema.
### Getting Started
```sh
-npm install --save codemirror-graphql
+npm install codemirror-graphql
```
CodeMirror helpers install themselves to the global CodeMirror when they are
diff --git a/packages/codemirror-graphql/package.json b/packages/codemirror-graphql/package.json
index aced6b051e6..41f17330cad 100644
--- a/packages/codemirror-graphql/package.json
+++ b/packages/codemirror-graphql/package.json
@@ -1,6 +1,6 @@
{
"name": "codemirror-graphql",
- "version": "2.0.10",
+ "version": "2.1.0",
"description": "GraphQL mode and helpers for CodeMirror.",
"contributors": [
"Hyohyeon Jeong ",
@@ -40,18 +40,18 @@
"peerDependencies": {
"@codemirror/language": "6.0.0",
"codemirror": "^5.65.3",
- "graphql": "^15.5.0 || ^16.0.0"
+ "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2"
},
"// TEMPORARILY PINNED until we fix graphql 15 support": "",
"dependencies": {
"@types/codemirror": "^0.0.90",
- "graphql-language-service": "5.2.0"
+ "graphql-language-service": "5.3.0"
},
"devDependencies": {
"@codemirror/language": "^6.0.0",
"codemirror": "^5.65.3",
"cross-env": "^7.0.2",
- "graphql": "^16.8.1",
+ "graphql": "^17.0.0-alpha.7",
"rimraf": "^3.0.2",
"sane": "2.0.0"
}
diff --git a/packages/codemirror-graphql/src/__tests__/hint-test.ts b/packages/codemirror-graphql/src/__tests__/hint-test.ts
index c71d70a0798..4324ce5eef7 100644
--- a/packages/codemirror-graphql/src/__tests__/hint-test.ts
+++ b/packages/codemirror-graphql/src/__tests__/hint-test.ts
@@ -32,6 +32,7 @@ import {
UnionFirst,
UnionSecond,
} from './testSchema';
+import { GraphQLDocumentMode } from 'graphql-language-service';
function createEditorWithHint() {
return CodeMirror(document.createElement('div'), {
@@ -45,7 +46,11 @@ function createEditorWithHint() {
});
}
-function getHintSuggestions(queryString: string, cursor: CodeMirror.Position) {
+function getHintSuggestions(
+ queryString: string,
+ cursor: CodeMirror.Position,
+ opts?: GraphQLHintOptions,
+) {
const editor = createEditorWithHint();
return new Promise(resolve => {
@@ -54,7 +59,7 @@ function getHintSuggestions(queryString: string, cursor: CodeMirror.Position) {
cm: CodeMirror.Editor,
options: GraphQLHintOptions,
) => {
- const result = graphqlHint(cm, options);
+ const result = graphqlHint(cm, { ...opts, ...options });
resolve(result);
CodeMirror.hint.graphql = graphqlHint;
return result;
@@ -82,14 +87,38 @@ describe('graphql-hint', () => {
expect(editor.getHelpers(editor.getCursor(), 'hint')).not.toHaveLength(0);
});
- it('provides correct initial keywords', async () => {
+ it('provides correct initial keywords for executable definitions', async () => {
+ const suggestions = await getHintSuggestions(
+ '',
+ { line: 0, ch: 0 },
+ { autocompleteOptions: { mode: GraphQLDocumentMode.EXECUTABLE } },
+ );
+ const list = [
+ { text: 'query' },
+ { text: 'mutation' },
+ { text: 'subscription' },
+ { text: 'fragment' },
+ { text: '{' },
+ ];
+ const expectedSuggestions = getExpectedSuggestions(list);
+ expect(suggestions?.list).toEqual(expectedSuggestions);
+ });
+
+ it('provides correct initial keywords for unknown definitions', async () => {
const suggestions = await getHintSuggestions('', { line: 0, ch: 0 });
const list = [
+ { text: 'extend' },
{ text: 'query' },
{ text: 'mutation' },
{ text: 'subscription' },
{ text: 'fragment' },
{ text: '{' },
+ { text: 'type' },
+ { text: 'interface' },
+ { text: 'union' },
+ { text: 'input' },
+ { text: 'scalar' },
+ { text: 'schema' },
];
const expectedSuggestions = getExpectedSuggestions(list);
expect(suggestions?.list).toEqual(expectedSuggestions);
@@ -946,8 +975,8 @@ describe('graphql-hint', () => {
description:
'The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `"4"`) or integer (such as `4`) input value will be accepted as an ID.',
},
- { text: 'TestEnum' },
- { text: 'TestInput' },
+ { text: 'TestEnum', description: '' },
+ { text: 'TestInput', description: '' },
{
text: '__TypeKind',
description:
@@ -993,8 +1022,8 @@ describe('graphql-hint', () => {
description:
'The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `"4"`) or integer (such as `4`) input value will be accepted as an ID.',
},
- { text: 'TestEnum' },
- { text: 'TestInput' },
+ { text: 'TestEnum', description: '' },
+ { text: 'TestInput', description: '' },
{
text: '__TypeKind',
description:
diff --git a/packages/codemirror-graphql/src/__tests__/lint-test.ts b/packages/codemirror-graphql/src/__tests__/lint-test.ts
index 0df6a8a3c9e..e603873dd9b 100644
--- a/packages/codemirror-graphql/src/__tests__/lint-test.ts
+++ b/packages/codemirror-graphql/src/__tests__/lint-test.ts
@@ -11,7 +11,7 @@ import CodeMirror from 'codemirror';
import 'codemirror/addon/lint/lint';
import { readFileSync } from 'node:fs';
import { join } from 'node:path';
-import { GraphQLError, OperationDefinitionNode } from 'graphql';
+import { GraphQLError, OperationDefinitionNode, version } from 'graphql';
import '../lint';
import '../mode';
import { TestSchema } from './testSchema';
@@ -61,7 +61,13 @@ describe('graphql-lint', () => {
const noMutationOperationRule = (context: any) => ({
OperationDefinition(node: OperationDefinitionNode) {
if (node.operation === 'mutation') {
- context.reportError(new GraphQLError('I like turtles.', node));
+ context.reportError(
+ new GraphQLError(
+ 'I like turtles.',
+ // @ts-expect-error
+ parseInt(version, 10) > 16 ? { nodes: node } : node,
+ ),
+ );
}
return false;
},
diff --git a/packages/codemirror-graphql/src/hint.ts b/packages/codemirror-graphql/src/hint.ts
index a3a0ae0e308..e3606c94cf1 100644
--- a/packages/codemirror-graphql/src/hint.ts
+++ b/packages/codemirror-graphql/src/hint.ts
@@ -13,12 +13,16 @@ import CodeMirror, { Hints, Hint } from 'codemirror';
import 'codemirror/addon/hint/show-hint';
import { FragmentDefinitionNode, GraphQLSchema, GraphQLType } from 'graphql';
-import type { Maybe } from 'graphql-language-service';
+import type {
+ AutocompleteSuggestionOptions,
+ Maybe,
+} from 'graphql-language-service';
import { getAutocompleteSuggestions, Position } from 'graphql-language-service';
export interface GraphQLHintOptions {
schema?: GraphQLSchema;
externalFragments?: string | FragmentDefinitionNode[];
+ autocompleteOptions?: AutocompleteSuggestionOptions;
}
interface IHint extends Hint {
@@ -70,7 +74,7 @@ CodeMirror.registerHelper(
editor: CodeMirror.Editor,
options: GraphQLHintOptions,
): IHints | undefined => {
- const { schema, externalFragments } = options;
+ const { schema, externalFragments, autocompleteOptions } = options;
if (!schema) {
return;
}
@@ -91,11 +95,13 @@ CodeMirror.registerHelper(
position,
token,
externalFragments,
+ autocompleteOptions,
);
const results = {
list: rawResults.map(item => ({
- text: item.label,
+ // important! for when the label is different from the insert text
+ text: item?.rawInsert ?? item.label,
type: item.type,
description: item.documentation,
isDeprecated: item.isDeprecated,
diff --git a/packages/codemirror-graphql/src/info.ts b/packages/codemirror-graphql/src/info.ts
index dedea07e170..0e826f6c912 100644
--- a/packages/codemirror-graphql/src/info.ts
+++ b/packages/codemirror-graphql/src/info.ts
@@ -63,13 +63,13 @@ CodeMirror.registerHelper(
}
const { kind, step } = token.state;
const typeInfo = getTypeInfo(options.schema, token.state);
-
// Given a Schema and a Token, produce the contents of an info tooltip.
// To do this, create a div element that we will render "into" and then pass
// it to various rendering functions.
if (
(kind === 'Field' && step === 0 && typeInfo.fieldDef) ||
- (kind === 'AliasedField' && step === 2 && typeInfo.fieldDef)
+ (kind === 'AliasedField' && step === 2 && typeInfo.fieldDef) ||
+ (kind === 'ObjectField' && step === 0 && typeInfo.fieldDef)
) {
const header = document.createElement('div');
header.className = 'CodeMirror-info-header';
@@ -79,6 +79,7 @@ CodeMirror.registerHelper(
renderDescription(into, options, typeInfo.fieldDef as any);
return into;
}
+
if (kind === 'Directive' && step === 1 && typeInfo.directiveDef) {
const header = document.createElement('div');
header.className = 'CodeMirror-info-header';
@@ -97,11 +98,7 @@ CodeMirror.registerHelper(
renderDescription(into, options, typeInfo.argDef);
return into;
}
- if (
- kind === 'EnumValue' &&
- typeInfo.enumValue &&
- typeInfo.enumValue.description
- ) {
+ if (kind === 'EnumValue' && typeInfo.enumValue?.description) {
const header = document.createElement('div');
header.className = 'CodeMirror-info-header';
renderEnumValue(header, typeInfo, options);
@@ -299,6 +296,9 @@ function text(
// want clicking the node to navigate anywhere.
node.href = 'javascript:void 0'; // eslint-disable-line no-script-url
node.addEventListener('click', (e: MouseEvent) => {
+ // Although an href of 'javascript:void 0' should never navigate away from the page,
+ // that is not always the case: https://github.com/graphql/graphiql/issues/3565
+ e.preventDefault();
onClick(ref, e);
});
} else {
diff --git a/packages/codemirror-graphql/src/utils/getTypeInfo.ts b/packages/codemirror-graphql/src/utils/getTypeInfo.ts
index d61d172e126..410cf4db288 100644
--- a/packages/codemirror-graphql/src/utils/getTypeInfo.ts
+++ b/packages/codemirror-graphql/src/utils/getTypeInfo.ts
@@ -97,11 +97,11 @@ export default function getTypeInfo(schema: GraphQLSchema, tokenState: State) {
? state.prevState.kind === 'Field'
? info.fieldDef
: state.prevState.kind === 'Directive'
- ? info.directiveDef
- : state.prevState.kind === 'AliasedField'
- ? state.prevState.name &&
- getFieldDef(schema, info.parentType, state.prevState.name)
- : null
+ ? info.directiveDef
+ : state.prevState.kind === 'AliasedField'
+ ? state.prevState.name &&
+ getFieldDef(schema, info.parentType, state.prevState.name)
+ : null
: null;
info.argDefs = parentDef ? (parentDef.args as GraphQLArgument[]) : null;
break;
@@ -147,6 +147,8 @@ export default function getTypeInfo(schema: GraphQLSchema, tokenState: State) {
? info.objectFieldDefs[state.name]
: null;
info.inputType = objectField?.type;
+ // @ts-expect-error
+ info.fieldDef = objectField;
break;
case 'NamedType':
info.type = state.name ? schema.getType(state.name) : null;
diff --git a/packages/codemirror-graphql/src/utils/info-addon.ts b/packages/codemirror-graphql/src/utils/info-addon.ts
index 5b017faae8d..cff916607ce 100644
--- a/packages/codemirror-graphql/src/utils/info-addon.ts
+++ b/packages/codemirror-graphql/src/utils/info-addon.ts
@@ -39,8 +39,8 @@ function createState(options: GraphQLInfoOptions) {
options instanceof Function
? { render: options }
: options === true
- ? {}
- : options,
+ ? {}
+ : options,
};
}
diff --git a/packages/codemirror-graphql/src/utils/jump-addon.ts b/packages/codemirror-graphql/src/utils/jump-addon.ts
index 0977eb1a903..d3fd3d41f02 100644
--- a/packages/codemirror-graphql/src/utils/jump-addon.ts
+++ b/packages/codemirror-graphql/src/utils/jump-addon.ts
@@ -121,9 +121,7 @@ function onKeyDown(cm: CodeMirror.Editor, event: KeyboardEvent) {
}
const isMac =
- typeof navigator !== 'undefined' &&
- navigator &&
- navigator.appVersion.includes('Mac');
+ typeof navigator !== 'undefined' && navigator?.appVersion.includes('Mac');
function isJumpModifier(key: string) {
return key === (isMac ? 'Meta' : 'Control');
diff --git a/packages/graphiql-plugin-code-exporter/CHANGELOG.md b/packages/graphiql-plugin-code-exporter/CHANGELOG.md
index c16e5829eee..f81f821a28e 100644
--- a/packages/graphiql-plugin-code-exporter/CHANGELOG.md
+++ b/packages/graphiql-plugin-code-exporter/CHANGELOG.md
@@ -1,5 +1,80 @@
# @graphiql/plugin-code-exporter
+## 3.1.0
+
+### Minor Changes
+
+- [#3682](https://github.com/graphql/graphiql/pull/3682) [`6c9f0df`](https://github.com/graphql/graphiql/commit/6c9f0df83ea4afe7fa59f84d83d59fba73dc3931) Thanks [@yaacovCR](https://github.com/yaacovCR)! - Support v17 of `graphql-js` from `17.0.0-alpha.2` forward.
+
+ Includes support for the latest incremental delivery response format. For further details, see https://github.com/graphql/defer-stream-wg/discussions/69.
+
+### Patch Changes
+
+- Updated dependencies [[`6c9f0df`](https://github.com/graphql/graphiql/commit/6c9f0df83ea4afe7fa59f84d83d59fba73dc3931)]:
+ - @graphiql/react@0.24.0
+
+## 3.0.5
+
+### Patch Changes
+
+- [#3657](https://github.com/graphql/graphiql/pull/3657) [`5bc7b84`](https://github.com/graphql/graphiql/commit/5bc7b84531b6404553787615d61a5cbcc96c1d6f) Thanks [@dimaMachina](https://github.com/dimaMachina)! - update vite to v5
+
+- [#3656](https://github.com/graphql/graphiql/pull/3656) [`93c7e9f`](https://github.com/graphql/graphiql/commit/93c7e9fd224cb4f1e9a86b3391efc1e0ef6e1e3f) Thanks [@dimaMachina](https://github.com/dimaMachina)! - set `build.minify: false` for cjs/esm builds since minified variable names change every build time
+
+- Updated dependencies [[`5bc7b84`](https://github.com/graphql/graphiql/commit/5bc7b84531b6404553787615d61a5cbcc96c1d6f), [`fdec377`](https://github.com/graphql/graphiql/commit/fdec377f28ac0d918a219b78dfa2d8f0996ff84d), [`93c7e9f`](https://github.com/graphql/graphiql/commit/93c7e9fd224cb4f1e9a86b3391efc1e0ef6e1e3f)]:
+ - @graphiql/react@0.23.0
+
+## 3.0.4
+
+### Patch Changes
+
+- [#3634](https://github.com/graphql/graphiql/pull/3634) [`adf0ba01`](https://github.com/graphql/graphiql/commit/adf0ba019902dcac2e49ccee69b79a6665c4766d) Thanks [@dimaMachina](https://github.com/dimaMachina)! - when alpha is `1`, use `hsl` instead of `hsla`
+
+- Updated dependencies [[`adf0ba01`](https://github.com/graphql/graphiql/commit/adf0ba019902dcac2e49ccee69b79a6665c4766d)]:
+ - @graphiql/react@0.22.4
+
+## 3.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`335d830c`](https://github.com/graphql/graphiql/commit/335d830c2a4e551ef97fbeff8ed7c538ff5cd4af)]:
+ - @graphiql/react@0.22.3
+
+## 3.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`03ab3a6b`](https://github.com/graphql/graphiql/commit/03ab3a6b76378591ef79a828d80cc69b0b8f2842)]:
+ - @graphiql/react@0.22.2
+
+## 3.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`224b43f5`](https://github.com/graphql/graphiql/commit/224b43f5473456f264a82998d48a34a441537f54)]:
+ - @graphiql/react@0.22.1
+
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies [[`d48f4ef5`](https://github.com/graphql/graphiql/commit/d48f4ef56578dad7ec90f33458353791e463ef7b)]:
+ - @graphiql/react@0.22.0
+
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies [[`5d051054`](https://github.com/graphql/graphiql/commit/5d05105469c3f0cbeb5e294da1cf6ff2355e4eb5)]:
+ - @graphiql/react@0.21.0
+
+## 1.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+ - @graphiql/react@0.20.4
+
## 1.0.4
### Patch Changes
diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
index f7ce70c8948..40764460285 100644
--- a/packages/graphiql-plugin-code-exporter/README.md
+++ b/packages/graphiql-plugin-code-exporter/README.md
@@ -9,14 +9,14 @@ into the GraphiQL UI.
Use your favorite package manager to install the package:
```sh
-npm i -S @graphiql/plugin-code-exporter
+npm install @graphiql/plugin-code-exporter
```
The following packages are peer dependencies, so make sure you have them
installed as well:
```sh
-npm i -S react react-dom graphql
+npm install react react-dom graphql
```
## Usage
@@ -27,11 +27,10 @@ for all details on available `props` and how to
[create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).
```jsx
-import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
-import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import { GraphiQL } from 'graphiql';
import { useState } from 'react';
-
+import { GraphiQL } from 'graphiql';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
import 'graphiql/graphiql.css';
import '@graphiql/plugin-code-exporter/dist/style.css';
@@ -39,10 +38,10 @@ const fetcher = createGraphiQLFetcher({
url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
});
-/*
-Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details
-*/
-
+/**
+ * Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for
+ * details
+ */
const removeQueryName = query =>
query.replace(
/^[^{(]+([{(])/,
@@ -91,7 +90,7 @@ const exporter = codeExporterPlugin({
codeMirrorTheme: 'graphiql',
});
-function GraphiQLWithExplorer() {
+function GraphiQLWithCodeExporter() {
return (
);
diff --git a/packages/graphiql-plugin-code-exporter/examples/index.html b/packages/graphiql-plugin-code-exporter/examples/index.html
index d4dce712ec5..c1929dedd43 100644
--- a/packages/graphiql-plugin-code-exporter/examples/index.html
+++ b/packages/graphiql-plugin-code-exporter/examples/index.html
@@ -76,9 +76,9 @@
}
var exampleSnippetOne = {
- name: `Example One`,
- language: `JavaScript`,
- codeMirrorMode: `jsx`,
+ name: 'Example One',
+ language: 'JavaScript',
+ codeMirrorMode: 'jsx',
options: [],
generate: arg => `export const query = graphql\`
${getQuery(arg, 2)}
@@ -87,9 +87,9 @@
};
var exampleSnippetTwo = {
- name: `Example Two`,
- language: `JavaScript`,
- codeMirrorMode: `jsx`,
+ name: 'Example Two',
+ language: 'JavaScript',
+ codeMirrorMode: 'jsx',
options: [],
generate: arg => `import { graphql } from 'graphql'
@@ -107,7 +107,7 @@
var query =
'query AllFilms {\n allFilms {\n films {\n title\n }\n }\n}';
- function GraphiQLWithExporter() {
+ function GraphiQLWithCodeExporter() {
return React.createElement(GraphiQL, {
fetcher: fetcher,
defaultEditorToolsVisibility: true,
@@ -117,7 +117,7 @@
}
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
- root.render(React.createElement(GraphiQLWithExporter));
+ root.render(React.createElement(GraphiQLWithCodeExporter));