chore(examples): update web example

apollographql · Jun 17, 2023 · a0b4560 · a0b4560
1 parent d536c74
commit a0b4560
Show file tree

Hide file tree

Showing 13 changed files with 803 additions and 11,187 deletions.
diff --git a/examples/web/.gitignore b/examples/web/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/web/index.html b/examples/web/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Apollo Cache Persist example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/web/package.json b/examples/web/package.json
@@ -1,41 +1,25 @@
 {
   "name": "basic-apollo-app",
-  "version": "1.0.0",
-  "description": "sample",
-  "keywords": [
-    "react-apollo",
-    "auth",
-    "apollo",
-    "apollo-client"
-  ],
-  "main": "src/index.tsx",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
   "dependencies": {
-    "@apollo/client": "3.3.6",
-    "@types/react": "^17.0.0",
+    "@apollo/client": "^3.7.15",
     "apollo3-cache-persist": "../../lib",
-    "graphql": "latest",
-    "graphql-tag": "latest",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-scripts": "3.4.3"
-  },
-  "devDependencies": {},
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "graphql": "^16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
   }
 }
diff --git a/examples/web/public/index.html b/examples/web/public/index.html
diff --git a/examples/web/src/index.module.css → examples/web/src/App.module.css b/examples/web/src/index.module.css → examples/web/src/App.module.css
@@ -10,5 +10,5 @@
     padding: 20px;
 }
 .item {
-    padding: 16px;
+    padding: 10px;
 }
diff --git a/examples/web/src/index.tsx → examples/web/src/App.tsx b/examples/web/src/index.tsx → examples/web/src/App.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { render } from 'react-dom';
+import {useCallback, useEffect, useState} from 'react'
+
 
 import {
   ApolloClient,
@@ -10,30 +10,34 @@ import {
 import gql from 'graphql-tag';
 import { InMemoryCache } from '@apollo/client/core';
 import { CachePersistor, LocalStorageWrapper } from 'apollo3-cache-persist';
-import styles from './index.module.css';
-
-const launchesGQL = gql`
-  query LaunchesQuery {
-    launches(limit: 10) {
-      id
-      mission_name
-      details
-      launch_date_utc
+import styles from './App.module.css';
+
+const episodesGQL = gql`
+  query episodes {
+    episodes {
+      results {
+        episode
+        id
+        name
+        air_date
+      }
     }
   }
 `;
 
-type LaunchesQuery = {
-  launches: {
-    id: string;
-    mission_name: string;
-    details: string;
-    launch_date_utc: string;
-  }[];
+type EpisodesQuery = {
+  episodes: {
+    results: {
+        episode: string;
+        id: string;
+        name: string;
+        air_date: string;
+    }[];
+  }
 };
 
 const Launches = () => {
-  const { error, data, loading } = useQuery<LaunchesQuery>(launchesGQL, {
+  const { error, data, loading } = useQuery<EpisodesQuery>(episodesGQL, {
     fetchPolicy: 'cache-and-network',
   });
 
@@ -54,11 +58,11 @@ const Launches = () => {
   return (
     <div>
       {loading ? <h2>Loading fresh data...</h2> : null}
-      {data.launches.map(launch => (
-        <div key={launch.id} className={styles.item}>
-          <span>{launch.mission_name}</span>
+      {data.episodes.results.map(episode => (
+        <div key={episode.id} className={styles.item}>
+          <span>{episode.episode}: {episode.name}</span>
           <br />
-          <small>{new Date(launch.launch_date_utc).toLocaleString()}</small>
+          <small>{episode.air_date}</small>
         </div>
       ))}
     </div>
@@ -84,7 +88,7 @@ const App = () => {
       setPersistor(newPersistor);
       setClient(
         new ApolloClient({
-          uri: 'https://api.spacex.land/graphql',
+          uri: 'https://rickandmortyapi.com/graphql',
           cache,
         }),
       );
@@ -141,4 +145,4 @@ const App = () => {
   );
 };
 
-render(<App />, document.getElementById('root'));
+export default App
diff --git a/examples/web/src/main.tsx b/examples/web/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/examples/web/src/react-app-env.d.ts b/examples/web/src/react-app-env.d.ts
diff --git a/examples/web/src/vite-env.d.ts b/examples/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/web/tsconfig.json b/examples/web/tsconfig.json
@@ -1,22 +1,25 @@
 {
   "compilerOptions": {
-    "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "baseUrl": "src",
-    "allowJs": false,
-    "checkJs": false,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noImplicitAny": false,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/examples/web/tsconfig.node.json b/examples/web/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/web/vite.config.ts b/examples/web/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})