Skip to content

Commit f06e11e

Browse files
mrlubosmrlubos
committed
chore: add working local example with fetch client
1 parent af193f2 commit f06e11e

29 files changed

+1637
-40
lines changed

Diff for: ‎examples/openapi-ts-axios/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@examples/openapi-ts-axios",
2+
"name": "@example/openapi-ts-axios",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",

Diff for: ‎examples/openapi-ts-axios/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function App() {
3737
alt="Hey API logo"
3838
/>
3939
</a>
40-
<h1 className="h1">@hey-api/openapi-ts example</h1>
40+
<h1 className="h1">@hey-api/openapi-ts 🤝 Axios</h1>
4141
</div>
4242
<div className="flex">
4343
<button className="button" onClick={onFetchPet}>

Diff for: ‎examples/openapi-ts-fetch/.gitignore

+24
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?

Diff for: ‎examples/openapi-ts-fetch/index.html

+13
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>Hey API + Fetch API Demo</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

Diff for: ‎examples/openapi-ts-fetch/openapi-ts.config.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineConfig } from '@hey-api/openapi-ts';
2+
3+
export default defineConfig({
4+
base: 'https://petstore3.swagger.io/api/v3',
5+
format: 'prettier',
6+
input:
7+
'https://raw.githubusercontent.com/swagger-api/swagger-petstore/master/src/main/resources/openapi.yaml',
8+
lint: 'eslint',
9+
output: './src/client',
10+
});

Diff for: ‎examples/openapi-ts-fetch/package.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "@example/openapi-ts-fetch",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"build": "tsc && vite build",
8+
"dev": "vite",
9+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10+
"openapi-ts": "openapi-ts",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"@hey-api/client-fetch": "workspace:*",
15+
"react": "18.2.0",
16+
"react-dom": "18.2.0"
17+
},
18+
"devDependencies": {
19+
"@hey-api/openapi-ts": "workspace:*",
20+
"@types/react": "18.2.79",
21+
"@types/react-dom": "18.2.25",
22+
"@typescript-eslint/eslint-plugin": "7.7.1",
23+
"@typescript-eslint/parser": "7.7.1",
24+
"@vitejs/plugin-react": "4.2.1",
25+
"eslint": "8.57.0",
26+
"eslint-plugin-react-hooks": "4.6.0",
27+
"eslint-plugin-react-refresh": "0.4.6",
28+
"prettier": "3.2.5",
29+
"typescript": "5.4.5",
30+
"vite": "5.2.10"
31+
}
32+
}

Diff for: ‎examples/openapi-ts-fetch/src/App.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
.flex {
17+
align-items: center;
18+
display: flex;
19+
padding: 1em 0;
20+
}
21+
22+
.pet-name {
23+
padding: 0 1em;
24+
}
25+
26+
.button {
27+
border: 1px solid #444;
28+
}
29+
30+
#root {
31+
max-width: 1280px;
32+
margin: 0 auto;
33+
padding: 0.5rem 2rem;
34+
}
35+
36+
body {
37+
margin: 0;
38+
display: flex;
39+
place-items: center;
40+
min-width: 320px;
41+
min-height: 100vh;
42+
}
43+
44+
.h1 {
45+
font-size: 1.2em;
46+
line-height: 1.1;
47+
}
48+
49+
.logo {
50+
height: 4em;
51+
will-change: filter;
52+
transition: filter 300ms;
53+
}
54+
.logo:hover {
55+
filter: drop-shadow(0 0 2em #646cffaa);
56+
}
57+
.logo.react:hover {
58+
filter: drop-shadow(0 0 2em #61dafbaa);
59+
}
60+
61+
@keyframes logo-spin {
62+
from {
63+
transform: rotate(0deg);
64+
}
65+
to {
66+
transform: rotate(360deg);
67+
}
68+
}
69+
70+
@media (prefers-reduced-motion: no-preference) {
71+
a:nth-of-type(2) .logo {
72+
animation: logo-spin infinite 20s linear;
73+
}
74+
}
75+
76+
.card {
77+
padding: 2em;
78+
}
79+
80+
.container {
81+
align-items: center;
82+
display: flex;
83+
grid-gap: 1em;
84+
text-align: center;
85+
}
86+
87+
.openapi-ts {
88+
color: #444;
89+
}
90+
91+
@media (prefers-color-scheme: light) {
92+
:root {
93+
color: #213547;
94+
background-color: #ffffff;
95+
}
96+
a:hover {
97+
color: #747bff;
98+
}
99+
button {
100+
background-color: #f9f9f9;
101+
}
102+
}

Diff for: ‎examples/openapi-ts-fetch/src/App.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import './App.css';
2+
3+
import { OpenAPI } from '@hey-api/client-fetch';
4+
import { useState } from 'react';
5+
6+
import { $Pet } from './client/schemas.gen';
7+
import { PetService } from './client/services.gen';
8+
9+
OpenAPI.BASE = 'https://petstore3.swagger.io/api/v3';
10+
11+
// OpenAPI.interceptors.response.use((response) => {
12+
// if (response.status === 200) {
13+
// console.log(`request to ${response.url} was successful`);
14+
// }
15+
// return response;
16+
// });
17+
18+
function App() {
19+
const [pet, setPet] =
20+
useState<Awaited<ReturnType<typeof PetService.getPetById>>>();
21+
22+
const onFetchPet = async () => {
23+
const pet = await PetService.getPetById({
24+
// random id 1-10
25+
petId: Math.floor(Math.random() * (10 - 1 + 1) + 1),
26+
});
27+
setPet(pet);
28+
};
29+
30+
return (
31+
<>
32+
<div className="container">
33+
<a href="https://heyapi.vercel.app/" target="_blank">
34+
<img
35+
src="https://heyapi.vercel.app/logo.png"
36+
className="logo vanilla"
37+
alt="Hey API logo"
38+
/>
39+
</a>
40+
<h1 className="h1">@hey-api/openapi-ts 🤝 Fetch API</h1>
41+
</div>
42+
<div className="flex">
43+
<button className="button" onClick={onFetchPet}>
44+
Fetch random pet
45+
</button>
46+
<span className="pet-name">Fetched pet's name: {pet?.name}</span>
47+
</div>
48+
<div className="openapi-ts">
49+
<code>{"import { $Pet } from './client/schemas.gen'"}</code>
50+
<pre>{JSON.stringify($Pet, null, 2)}</pre>
51+
</div>
52+
</>
53+
);
54+
}
55+
56+
export default App;

Diff for: ‎examples/openapi-ts-fetch/src/client/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// This file is auto-generated by @hey-api/openapi-ts
2+
export * from './schemas.gen';
3+
export * from './services.gen';
4+
export * from './types.gen';

0 commit comments

Comments
 (0)