simplify Next.js example + add symlinks to React Vite to maintain 2 examples from 1 place (#3281)

Author: dimaMachina

.eslintrc.js

@@ -10,10 +10,7 @@
 module.exports = {
   root: true,
   reportUnusedDisableDirectives: true,
-  ignorePatterns: [
-    // CRA example has its own eslint config
-    'examples/graphiql-create-react-app',
-  ],
+  ignorePatterns: ['react-app-env.d.ts', 'next-env.d.ts'],
   overrides: [
     {
       // Rules for all code files

examples/graphiql-create-react-app/README.md

@@ -1,8 +1,8 @@
-## GraphiQL `create-react-app` Example
+# 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
+## 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.

examples/graphiql-create-react-app/package.json

@@ -13,9 +13,6 @@
     "start": "react-scripts start",
     "build": "react-scripts build"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

examples/graphiql-create-react-app/src/App.tsx

@@ -1,25 +1,24 @@
 import React from 'react';
-import GraphiQL from 'graphiql';
+import { GraphiQL } from 'graphiql';
+import type { Fetcher } from '@graphiql/toolkit';
 import 'graphiql/graphiql.min.css';
 
-const App = () => (
-  <GraphiQL
-    fetcher={async graphQLParams => {
-      const data = await fetch(
-        'https://swapi-graphql.netlify.app/.netlify/functions/index',
-        {
-          method: 'POST',
-          headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(graphQLParams),
-          credentials: 'same-origin',
-        },
-      );
-      return data.json().catch(() => data.text());
-    }}
-  />
-);
+const fetcher: Fetcher = async graphQLParams => {
+  const data = await fetch(
+    'https://swapi-graphql.netlify.app/.netlify/functions/index',
+    {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(graphQLParams),
+      credentials: 'same-origin',
+    },
+  );
+  return data.json().catch(() => data.text());
+};
+
+const App = () => <GraphiQL fetcher={fetcher} />;
 
 export default App;

examples/graphiql-create-react-app/src/index.tsx

@@ -3,5 +3,5 @@ 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(<App />);

examples/monaco-graphql-nextjs/.gitignore

@@ -1 +1 @@
-.next
+.next/

examples/monaco-graphql-nextjs/README.md

@@ -1,3 +1,7 @@
+# Monaco GraphQL Next.js Example
+
+## Getting Started
+
 This is a working example of `monaco-editor` and `monaco-graphql` using
 `next.js` 13
 
@@ -12,9 +16,9 @@ similar client-side-only loading (with or without dynamic import) should be
 fine. For more information on loading `monaco-editor` in esm contexts, you can
 [read their docs](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)
 
-This work was sponsored by [Grafbase](https://grafbase.com/)!
+This work was sponsored by [Grafbase](https://grafbase.com)!
 
-# Setup
+## Setup
 
-1. npm install
-1. npm start
+1. In monorepo root directory run `yarn` and `yarn build`.
+1. In this directory run `yarn dev`.

examples/monaco-graphql-nextjs/next.config.js

@@ -1,9 +1,11 @@
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const { patchWebpackConfig } = require('next-global-css');
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+import { patchWebpackConfig } from 'next-global-css';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   trailingSlash: true,
   webpack(config, options) {
     // this fixes some issues with loading web workers
@@ -13,7 +15,6 @@ const nextConfig = {
     patchWebpackConfig(config, options);
     config.resolve.alias = {
       ...config.resolve.alias,
-
       // this solves a bug with more recent `monaco-editor` versions in next.js,
       // where vscode contains a version of `marked` with modules pre-transpiled, which seems to break the build.
       //
@@ -36,7 +37,7 @@ const nextConfig = {
               label: 'graphql',
               worker: {
                 id: 'graphql',
-                entry: require.resolve('monaco-graphql/esm/graphql.worker.js'),
+                entry: 'monaco-graphql/esm/graphql.worker.js',
               },
             },
           ],
@@ -49,4 +50,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;

examples/monaco-graphql-nextjs/package.json

@@ -1,32 +1,31 @@
 {
-  "name": "next-monaco-example",
-  "version": "0.1.0",
+  "name": "example-monaco-graphql-nextjs",
+  "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "next start"
   },
   "dependencies": {
-    "@graphiql/toolkit": "^0.8.0",
-    "@types/node": "18.13.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
-    "eslint": "8.34.0",
-    "eslint-config-next": "13.1.6",
+    "prettier": "3.0.0-alpha.12",
+    "@graphiql/toolkit": "^0.8.4",
     "graphql": "^16.6.0",
-    "graphql-ws": "^5.11.3",
+    "graphql-ws": "^5.5.5",
     "jsonc-parser": "^3.2.0",
     "marked": "^4.2.12",
-    "monaco-editor": "^0.35.0",
+    "monaco-editor": "^0.39.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
-    "monaco-graphql": "^1.1.7",
-    "next": "13.1.6",
-    "next-global-css": "^1.3.1",
-    "prettier": "^2.8.4",
+    "monaco-graphql": "^1.2.4",
+    "next": "13.4.7",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "4.9.5"
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.16.18",
+    "@types/react": "18.2.14",
+    "next-global-css": "1.3.1",
+    "typescript": "5.1.3"
   }
 }