GraphiQL v6

.browserslistrc

@@ -1,5 +1 @@
-last 2 versions
-Firefox ESR
-not dead
-not IE 11
-not ios 10
+defaults

.changeset/config.json

@@ -11,7 +11,8 @@
     "example-graphiql-webpack",
     "example-monaco-graphql-nextjs",
     "example-monaco-graphql-react-vite",
-    "example-monaco-graphql-webpack"
+    "example-monaco-graphql-webpack",
+    "graphiql-e2e"
   ],
   "updateInternalDependencies": "patch",
   "privatePackages": {

.github/ISSUE_TEMPLATE/graphiql-feature.md

@@ -20,11 +20,6 @@ labels: [graphiql, enhancement]
     api:
     https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html#graphiqlplugin-2
 
-    examples:
-
-    https://github.com/graphql/graphiql/tree/main/packages/graphiql-plugin-explorer
-
-
   In the event that the plugin API doesn't allow you to build a feature, it
   may be that expanding the plugin API *itself* is the best place for the
   feature to be introduced!

.github/scripts/update-cdn-versions.mjs

@@ -7,27 +7,37 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import crypto from 'node:crypto';
+import { parseArgs } from 'node:util';
+
+const { values } = parseArgs({
+  options: {
+    'graphiql-tag': { type: 'string', default: 'latest' },
+  },
+});
 
 const PACKAGES = [
   'react',
   'react-dom',
   'graphiql',
-  '@graphiql/plugin-explorer',
   '@graphiql/react',
   '@graphiql/toolkit',
   'graphql',
 ];
 
 /**
- * Given the name of an npm package, return a tuple of: [name, latest version]
+ * Given the name of an npm package, return a tuple of: [name, version at the selected tag]
  *
  * @example
  *
  *   fetchLatestVersion('left-pad')
  *   => ['left-pad', '1.0.1']
  */
 async function fetchLatestVersion(packageName) {
-  const url = `https://registry.npmjs.org/${packageName}/latest`;
+  const tag =
+    packageName === 'graphiql' || packageName.startsWith('@graphiql/')
+      ? values['graphiql-tag']
+      : 'latest';
+  const url = `https://registry.npmjs.org/${packageName}/${encodeURIComponent(tag)}`;
   const response = await fetch(url);
   if (!response.ok) {
     throw new Error(`Failed to fetch ${packageName}: ${response.statusText}`);
@@ -60,6 +70,7 @@ async function main() {
   );
   const cdnUrl = packageName =>
     `https://esm.sh/${packageName}@${versions[packageName]}`;
+  const setupWorkers = `${cdnUrl('graphiql')}/setup-workers/esm.sh?deps=@graphiql/react@${versions['@graphiql/react']}`;
 
   // JS
   const imports = {
@@ -69,7 +80,7 @@ async function main() {
     'react-dom/': `${cdnUrl('react-dom')}/`,
     graphiql: `${cdnUrl('graphiql')}?standalone&external=react,react-dom,@graphiql/react,graphql`,
     'graphiql/': `${cdnUrl('graphiql')}/`,
-    '@graphiql/plugin-explorer': `${cdnUrl('@graphiql/plugin-explorer')}?standalone&external=react,@graphiql/react,graphql`,
+    'graphiql/setup-workers/esm.sh': setupWorkers,
     '@graphiql/react': `${cdnUrl('@graphiql/react')}?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid`,
     '@graphiql/toolkit': `${cdnUrl('@graphiql/toolkit')}?standalone&external=graphql`,
     graphql: cdnUrl('graphql'),
@@ -82,8 +93,8 @@ async function main() {
         cdnUrl('react'),
         cdnUrl('react-dom'),
         cdnUrl('graphiql'),
+        setupWorkers,
         `${cdnUrl('graphiql')}?standalone&external=react,react-dom,@graphiql/react,graphql`,
-        cdnUrl('@graphiql/plugin-explorer'),
         `${cdnUrl('@graphiql/react')}?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid`,
         `${cdnUrl('@graphiql/toolkit')}?standalone&external=graphql`,
         cdnUrl('graphql'),
@@ -96,10 +107,6 @@ async function main() {
   // CSS
   const graphiqlCss = `${cdnUrl('graphiql')}/dist/style.css`;
   const graphiqlCssHash = (await fetchIntegrityHash(graphiqlCss))[1];
-  const graphiqlPluginExplorer = `${cdnUrl('@graphiql/plugin-explorer')}/dist/style.css`;
-  const graphiqlPluginExplorerHash = (
-    await fetchIntegrityHash(graphiqlPluginExplorer)
-  )[1];
 
   // Generate index.html
   const templatePath = path.join(
@@ -119,11 +126,9 @@ async function main() {
   const output = template
     .replace('{{IMPORTMAP}}', importMap)
     .replace('{{GRAPHIQL_CSS_URL}}', graphiqlCss)
-    .replace('{{GRAPHIQL_CSS_INTEGRITY}}', graphiqlCssHash)
-    .replace('{{PLUGIN_EXPLORER_CSS_URL}}', graphiqlPluginExplorer)
-    .replace('{{PLUGIN_EXPLORER_CSS_INTEGRITY}}', graphiqlPluginExplorerHash);
+    .replace('{{GRAPHIQL_CSS_INTEGRITY}}', graphiqlCssHash);
 
-  console.log(output);
+  process.stdout.write(output);
 }
 
 main();

.github/workflows/pr-graphql-compat-check.yml

@@ -26,14 +26,14 @@ jobs:
           # test against the latest 16.x version, which might be newer than what we have
           - '^16'
           # test against the oldest version we support
-          - '^16.0.0'
-          # test against the latest alpha
-          - '^17.0.0-alpha'
+          - '16.11.0'
+          # test against the latest 17.x version
+          - '^17'
     steps:
       - name: Checkout Code
         uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
@@ -44,6 +44,9 @@ jobs:
           path: node_modules
           key: node_modules-${{hashFiles('pnpm-lock.yaml')}}
           restore-keys: node_modules-
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Force GraphQL ${{ matrix.release }} solution
         run: pnpm repo:resolve graphql@${{ matrix.release }}
 
@@ -52,10 +55,21 @@ jobs:
       - name: Turbo cache
         uses: ./.github/actions/turbo-cache
 
+      - name: Build
+        run: pnpm build
+
       - name: Unit Tests
         run: pnpm test
 
-      - name: Cypress
-        run: |
-          pnpm --filter graphiql exec cypress install
-          pnpm e2e
+      - name: Install Cypress
+        run: pnpm --filter graphiql-e2e exec cypress install
+
+      - name: Cypress (GraphQL 16)
+        if: matrix.release != '^17'
+        env:
+          CYPRESS_excludeSpecPattern: cypress/e2e/incremental-delivery.cy.ts
+        run: pnpm e2e
+
+      - name: Cypress (GraphQL 17)
+        if: matrix.release == '^17'
+        run: pnpm e2e

.github/workflows/pr.yml

@@ -13,22 +13,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - name: Turbo cache
         uses: ./.github/actions/turbo-cache
-      - run: pnpm build
+      - run: pnpm build --output-logs=new-only
 
   cspell:
     name: CSpell
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
@@ -41,7 +41,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
@@ -56,7 +56,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
@@ -70,7 +70,7 @@ jobs:
     needs: [build]
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
@@ -80,43 +80,39 @@ jobs:
         uses: ./.github/actions/turbo-cache
         with:
           restore-build: true
-      - run: pnpm test
+      - run: pnpm --filter @graphiql/react exec playwright install --with-deps chromium
+      - run: pnpm test --output-logs=new-only
 
-  graphql-17-fragment-arguments:
-    name: GraphQL 17 Fragment Arguments
+  graphql-16-compatibility:
+    name: GraphQL 16 Compatibility
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
           cache: pnpm
       - run: pnpm install --frozen-lockfile
-      - run: pnpm --filter graphql-language-service add --save-dev graphql@17.0.2
-      - name: Build and typecheck graphql-language-service
-        run: pnpm --filter graphql-language-service exec tsc
-      - name: Test fragment argument integration
-        run: >-
-          pnpm exec vitest run packages/graphql-language-service/src/parser/__tests__/OnlineParser.test.ts packages/graphql-language-service/src/interface/__tests__/getAutocompleteSuggestions.test.ts packages/graphql-language-service/src/interface/__tests__/getDiagnostics.test.ts packages/graphql-language-service/src/interface/__tests__/getHoverInformation.test.ts
+      - run: pnpm repo:resolve graphql@16.14.2
+      - run: pnpm install --no-frozen-lockfile
+      - name: Turbo cache
+        uses: ./.github/actions/turbo-cache
+      - run: pnpm build --output-logs=new-only
+      - run: pnpm --filter @graphiql/react exec playwright install --with-deps chromium
+      - run: pnpm test --output-logs=new-only
 
   lint:
     name: Lint
     runs-on: ubuntu-latest
-    needs: [build]
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
           cache: pnpm
       - run: pnpm install --frozen-lockfile
-      - name: Turbo cache
-        uses: ./.github/actions/turbo-cache
-        with:
-          restore-build: true
-      - run: pnpm build
       - run: pnpm oxlint
 
   types-check:
@@ -125,7 +121,7 @@ jobs:
     needs: [build]
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
@@ -135,15 +131,17 @@ jobs:
         uses: ./.github/actions/turbo-cache
         with:
           restore-build: true
-      - run: pnpm types:check
+      - run: |
+          pnpm exec turbo run types:check --output-logs=new-only
+          pnpm exec tsc --noEmit -p scripts/tsconfig.json
 
   e2e:
     name: Cypress
     runs-on: ubuntu-latest
     needs: [build]
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
@@ -153,29 +151,29 @@ jobs:
         uses: ./.github/actions/turbo-cache
         with:
           restore-build: true
-      - run: pnpm build
+      - run: pnpm build:graphiql --output-logs=new-only
       - uses: actions/cache@v5
         with:
           path: |
             ~/.cache/Cypress
           key: cypress-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
-      - run: pnpm --filter graphiql exec cypress install
+      - run: pnpm --filter graphiql-e2e exec cypress install
       - name: Cypress run
         uses: cypress-io/github-action@v7
         with:
           install: false
-          command: pnpm e2e
+          command: pnpm --filter graphiql-e2e e2e:built
       - uses: actions/upload-artifact@v7
         if: failure()
         with:
           name: cypress-screenshots
-          path: packages/graphiql/cypress/screenshots
+          path: packages/graphiql-e2e/cypress/screenshots
           if-no-files-found: ignore
       - uses: actions/upload-artifact@v7
         if: failure()
         with:
           name: cypress-videos
-          path: packages/graphiql/cypress/videos
+          path: packages/graphiql-e2e/cypress/videos
           if-no-files-found: ignore
 
   pkg-pr-new:
@@ -184,7 +182,7 @@ jobs:
     needs: [build, lint, vitest, e2e]
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'
@@ -194,15 +192,15 @@ jobs:
         uses: ./.github/actions/turbo-cache
         with:
           restore-build: true
-      - run: pnpm build
+      - run: pnpm build --output-logs=new-only
       - run: pnpm dlx pkg-pr-new publish --comment=off './packages/*'
 
   license-check:
     name: Check Licenses
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.node-version'