update create react app example to test #3552 issue (#3701)

* update create react app example * Update App.jsx
graphql · Aug 8, 2024 · c02caf2 · c02caf2
1 parent c43c0c8
commit c02caf2
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 107 deletions.
diff --git a/examples/graphiql-create-react-app/CHANGELOG.md b/examples/graphiql-create-react-app/CHANGELOG.md
diff --git a/examples/graphiql-create-react-app/package.json b/examples/graphiql-create-react-app/package.json
@@ -3,10 +3,10 @@
   "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
@@ -6,12 +6,11 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#000" />
     <meta
       name="description"
       content="GraphiQL example created using create-react-app"
     />
-
     <title>GraphiQL create-react-app Example</title>
   </head>
   <body>

diff --git a/...les/graphiql-create-react-app/src/App.tsx → ...les/graphiql-create-react-app/src/App.jsx b/...les/graphiql-create-react-app/src/App.tsx → ...les/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 = () => <GraphiQL fetcher={fetcher} />;

diff --git 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/...s/graphiql-create-react-app/src/index.tsx → ...s/graphiql-create-react-app/src/index.jsx b/...s/graphiql-create-react-app/src/index.tsx → ...s/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(<App />);
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
diff --git a/examples/graphiql-create-react-app/tsconfig.json b/examples/graphiql-create-react-app/tsconfig.json