Skip to content

Commit a0b4560

Browse files
wodCZwodCZ
committed
chore(examples): update web example
1 parent d536c74 commit a0b4560

File tree

13 files changed

+803
-11187
lines changed

13 files changed

+803
-11187
lines changed

‎examples/web/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/web/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Apollo Cache Persist example</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/web/package.json

100755100644
Lines changed: 18 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,25 @@
11
{
22
"name": "basic-apollo-app",
3-
"version": "1.0.0",
4-
"description": "sample",
5-
"keywords": [
6-
"react-apollo",
7-
"auth",
8-
"apollo",
9-
"apollo-client"
10-
],
11-
"main": "src/index.tsx",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
1211
"dependencies": {
13-
"@apollo/client": "3.3.6",
14-
"@types/react": "^17.0.0",
12+
"@apollo/client": "^3.7.15",
1513
"apollo3-cache-persist": "../../lib",
16-
"graphql": "latest",
17-
"graphql-tag": "latest",
18-
"react": "17.0.1",
19-
"react-dom": "17.0.1",
20-
"react-scripts": "3.4.3"
21-
},
22-
"devDependencies": {},
23-
"scripts": {
24-
"start": "react-scripts start",
25-
"build": "react-scripts build",
26-
"test": "react-scripts test --env=jsdom",
27-
"eject": "react-scripts eject"
14+
"graphql": "^16.6.0",
15+
"react": "^18.2.0",
16+
"react-dom": "^18.2.0"
2817
},
29-
"browserslist": {
30-
"production": [
31-
">0.2%",
32-
"not dead",
33-
"not op_mini all"
34-
],
35-
"development": [
36-
"last 1 chrome version",
37-
"last 1 firefox version",
38-
"last 1 safari version"
39-
]
18+
"devDependencies": {
19+
"@types/react": "^18.0.37",
20+
"@types/react-dom": "^18.0.11",
21+
"@vitejs/plugin-react": "^4.0.0",
22+
"typescript": "^5.0.2",
23+
"vite": "^4.3.9"
4024
}
4125
}

‎examples/web/public/index.html

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎examples/web/src/index.module.css renamed to ‎examples/web/src/App.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@
1010
padding: 20px;
1111
}
1212
.item {
13-
padding: 16px;
13+
padding: 10px;
1414
}

‎examples/web/src/index.tsx renamed to ‎examples/web/src/App.tsx

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useCallback, useEffect, useState } from 'react';
2-
import { render } from 'react-dom';
1+
import {useCallback, useEffect, useState} from 'react'
2+
33

44
import {
55
ApolloClient,
@@ -10,30 +10,34 @@ import {
1010
import gql from 'graphql-tag';
1111
import { InMemoryCache } from '@apollo/client/core';
1212
import { CachePersistor, LocalStorageWrapper } from 'apollo3-cache-persist';
13-
import styles from './index.module.css';
14-
15-
const launchesGQL = gql`
16-
query LaunchesQuery {
17-
launches(limit: 10) {
18-
id
19-
mission_name
20-
details
21-
launch_date_utc
13+
import styles from './App.module.css';
14+
15+
const episodesGQL = gql`
16+
query episodes {
17+
episodes {
18+
results {
19+
episode
20+
id
21+
name
22+
air_date
23+
}
2224
}
2325
}
2426
`;
2527

26-
type LaunchesQuery = {
27-
launches: {
28-
id: string;
29-
mission_name: string;
30-
details: string;
31-
launch_date_utc: string;
32-
}[];
28+
type EpisodesQuery = {
29+
episodes: {
30+
results: {
31+
episode: string;
32+
id: string;
33+
name: string;
34+
air_date: string;
35+
}[];
36+
}
3337
};
3438

3539
const Launches = () => {
36-
const { error, data, loading } = useQuery<LaunchesQuery>(launchesGQL, {
40+
const { error, data, loading } = useQuery<EpisodesQuery>(episodesGQL, {
3741
fetchPolicy: 'cache-and-network',
3842
});
3943

@@ -54,11 +58,11 @@ const Launches = () => {
5458
return (
5559
<div>
5660
{loading ? <h2>Loading fresh data...</h2> : null}
57-
{data.launches.map(launch => (
58-
<div key={launch.id} className={styles.item}>
59-
<span>{launch.mission_name}</span>
61+
{data.episodes.results.map(episode => (
62+
<div key={episode.id} className={styles.item}>
63+
<span>{episode.episode}: {episode.name}</span>
6064
<br />
61-
<small>{new Date(launch.launch_date_utc).toLocaleString()}</small>
65+
<small>{episode.air_date}</small>
6266
</div>
6367
))}
6468
</div>
@@ -84,7 +88,7 @@ const App = () => {
8488
setPersistor(newPersistor);
8589
setClient(
8690
new ApolloClient({
87-
uri: 'https://api.spacex.land/graphql',
91+
uri: 'https://rickandmortyapi.com/graphql',
8892
cache,
8993
}),
9094
);
@@ -141,4 +145,4 @@ const App = () => {
141145
);
142146
};
143147

144-
render(<App />, document.getElementById('root'));
148+
export default App

‎examples/web/src/main.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import App from './App.tsx'
4+
5+
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
6+
<React.StrictMode>
7+
<App />
8+
</React.StrictMode>,
9+
)

‎examples/web/src/react-app-env.d.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/web/src/vite-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎examples/web/tsconfig.json

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
{
22
"compilerOptions": {
3-
"target": "es6",
4-
"lib": ["dom", "dom.iterable", "esnext"],
5-
"baseUrl": "src",
6-
"allowJs": false,
7-
"checkJs": false,
3+
"target": "ES2020",
4+
"useDefineForClassFields": true,
5+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
6+
"module": "ESNext",
87
"skipLibCheck": true,
9-
"esModuleInterop": true,
10-
"allowSyntheticDefaultImports": true,
11-
"strict": true,
12-
"forceConsistentCasingInFileNames": true,
13-
"module": "esnext",
14-
"moduleResolution": "node",
8+
9+
/* Bundler mode */
10+
"moduleResolution": "bundler",
11+
"allowImportingTsExtensions": true,
1512
"resolveJsonModule": true,
1613
"isolatedModules": true,
17-
"noImplicitAny": false,
1814
"noEmit": true,
19-
"jsx": "react"
15+
"jsx": "react-jsx",
16+
17+
/* Linting */
18+
"strict": true,
19+
"noUnusedLocals": true,
20+
"noUnusedParameters": true,
21+
"noFallthroughCasesInSwitch": true
2022
},
21-
"include": ["src/**/*.ts", "src/**/*.tsx"]
23+
"include": ["src"],
24+
"references": [{ "path": "./tsconfig.node.json" }]
2225
}

0 commit comments

Comments
 (0)