graphql · dimaMachina · Jun 4, 2025 · May 13, 2025 · May 13, 2025 · May 13, 2025
diff --git a/.changeset/nasty-pandas-taste.md b/.changeset/nasty-pandas-taste.md
@@ -0,0 +1,7 @@
+---
+'graphiql': major
+---
+
+Remove examples: `GraphiQL x Parcel` and `GraphiQL x Create React App`
+
+Add new examples: `GraphiQL x Vite` and `GraphiQL x Next.js`
diff --git a/examples/graphiql-cdn/index.html b/examples/graphiql-cdn/index.html
@@ -14,7 +14,6 @@
     <style>
       body {
         margin: 0;
-        overflow: hidden; /* in Firefox */
       }
 
       #graphiql {

diff --git a/examples/graphiql-create-react-app/README.md b/examples/graphiql-create-react-app/README.md
@@ -1,8 +1,6 @@
 # GraphiQL `create-react-app` Example
 
-This example demonstrates how to transpile your own custom ES6 and typescript GraphiQL implementation bootstrapped with `create-react-app`, no config needed.
-
-## Setup
-
-1. `yarn` and `yarn start` from this folder to start `react-scripts` dev server.
-1. `yarn build` from this folder to build production ready transpiled files using `react-scripts`. Find the output in `build` folder.
+> [!WARNING]
+>
+> This example has been removed. You can find its last version [here](https://github.com/graphql/graphiql/tree/3b93d27f7568d93db5cd146157220b127eeea737/examples/graphiql-create-react-app).
+> We recommend using the [GraphiQL Vite](../graphiql-vite) or [GraphiQL Next.js](../graphiql-nextjs) examples instead.
diff --git a/examples/graphiql-create-react-app/package.json b/examples/graphiql-create-react-app/package.json
diff --git a/examples/graphiql-create-react-app/public/index.html b/examples/graphiql-create-react-app/public/index.html
diff --git a/examples/graphiql-create-react-app/src/App.jsx b/examples/graphiql-create-react-app/src/App.jsx
diff --git a/examples/graphiql-create-react-app/src/index.css b/examples/graphiql-create-react-app/src/index.css
diff --git a/examples/graphiql-nextjs/README.md b/examples/graphiql-nextjs/README.md
@@ -0,0 +1,19 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
diff --git a/examples/graphiql-nextjs/next-env.d.ts b/examples/graphiql-nextjs/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/examples/graphiql-nextjs/next.config.ts b/examples/graphiql-nextjs/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/examples/graphiql-nextjs/package.json b/examples/graphiql-nextjs/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "example-graphiql-nextjs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "types:check": "tsc --noEmit",
+    "dev": "next --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "graphiql": "^4.1.0",
+    "next": "15.3.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  }
+}
diff --git a/.../monaco-graphql-nextjs/public/favicon.ico → examples/graphiql-nextjs/src/app/favicon.ico b/.../monaco-graphql-nextjs/public/favicon.ico → examples/graphiql-nextjs/src/app/favicon.ico
diff --git a/examples/graphiql-nextjs/src/app/globals.css b/examples/graphiql-nextjs/src/app/globals.css
@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+}
+
+.graphiql-container {
+  height: 100dvh !important;
+}
diff --git a/examples/graphiql-nextjs/src/app/layout.tsx b/examples/graphiql-nextjs/src/app/layout.tsx
@@ -0,0 +1,17 @@
+import type { FC, ReactNode } from 'react';
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'GraphiQL Next.js Example',
+};
+
+const RootLayout: FC<Readonly<{ children: ReactNode }>> = ({ children }) => {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+};
+
+export default RootLayout;
diff --git a/examples/graphiql-nextjs/src/app/page.tsx b/examples/graphiql-nextjs/src/app/page.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import type { FC } from 'react';
+import dynamic from 'next/dynamic';
+import 'graphiql/setup-workers/webpack';
+import 'graphiql/style.css';
+
+// dynamically import our GraphiQL component
+const GraphiQL = dynamic(() => import('graphiql').then(mod => mod.GraphiQL), {
+  ssr: false,
+});
+
+async function fetcher(graphQLParams: Record<string, unknown>) {
+  const response = await fetch('https://graphql.earthdata.nasa.gov/api', {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(graphQLParams),
+  });
+  return response.json();
+}
+
+const Page: FC = () => {
+  return <GraphiQL fetcher={fetcher} />;
+};
+
+export default Page;
diff --git a/examples/graphiql-parcel/tsconfig.json → examples/graphiql-nextjs/tsconfig.json b/examples/graphiql-parcel/tsconfig.json → examples/graphiql-nextjs/tsconfig.json
@@ -1,20 +1,24 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
     "module": "esnext",
-    "sourceMap": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["src"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }
diff --git a/examples/graphiql-parcel/.gitignore b/examples/graphiql-parcel/.gitignore
diff --git a/examples/graphiql-parcel/CHANGELOG.md b/examples/graphiql-parcel/CHANGELOG.md
diff --git a/examples/graphiql-parcel/README.md b/examples/graphiql-parcel/README.md
@@ -1,9 +1,6 @@
-## GraphiQL Parcel Example
+# GraphiQL Parcel Example
 
-This example demonstrates how to transpile your own custom ES6 GraphiQL
-implementation with parcel bundler.
-
-### Setup
-
-1. `yarn` and `yarn start` from this folder to start parcel dev mode.
-1. `yarn build` to find production ready files.
+> [!WARNING]
+>
+> This example has been removed. You can find its last version [here](https://github.com/graphql/graphiql/tree/3b93d27f7568d93db5cd146157220b127eeea737/examples/graphiql-parcel).
+> We recommend using the [GraphiQL Vite](../graphiql-vite) or [GraphiQL Next.js](../graphiql-nextjs) examples instead.
diff --git a/examples/graphiql-parcel/package.json b/examples/graphiql-parcel/package.json
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,6 @@ @@
         <style>
           body {
             margin: 0;
-            overflow: hidden; /* in Firefox */
           }
           #graphiql {
@@ Expand Down @@