Skip to content

Commit 1688f11

Browse files
drwpowdrwpow
authored
Add Svelte / SvelteKit example for openapi-fetch (#1311)
1 parent 3b819e0 commit 1688f11

File tree

20 files changed

+1102
-47
lines changed

20 files changed

+1102
-47
lines changed

‎docs/src/content/docs/openapi-fetch/examples.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -74,17 +74,21 @@ openapi-fetch is simple vanilla JS that can be used in any project. But sometime
7474

7575
### React + React Query
7676

77-
[React Query](https://tanstack.com/query/latest) is a perfect wrapper for openapi-fetch in React. At only 13 kB, it provides clientside caching and request deduping across async React components without too much client weight in return. And its type inference preserves openapi-fetch types perfectly with minimal setup.
77+
<a href="https://tanstack.com/query/latest" target="_blank" rel="noopener noreferrer">React Query</a> is a perfect wrapper for openapi-fetch in React. At only 13 kB, it provides clientside caching and request deduping across async React components without too much client weight in return. And its type inference preserves openapi-fetch types perfectly with minimal setup.
7878

7979
[View a code example in GitHub](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch/examples/react-query)
8080

8181
### React + SWR
8282

8383
TODO
8484

85-
### SvelteKit
85+
### Svelte / SvelteKit
8686

87-
TODO
87+
<a href="https://kit.svelte.dev" target="_blank" rel="noopener noreferrer">SvelteKit</a>’s automatic type inference can easily pick up openapi-fetch’s types in both clientside fetching and <a href="https://kit.svelte.dev/docs/load#page-data" target="_blank" rel="noopener noreferrer">Page Data</a> fetching. And it doesn’t need any additional libraries to work.
88+
89+
_Note: if you’re using Svelte without SvelteKit, the root example in `src/routes/+page.svelte` doesn’t use any SvelteKit features and is generally-applicable to any setup._
90+
91+
[View a code example in GitHub](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch/examples/sveltekit)
8892

8993
### Vue
9094

‎packages/openapi-fetch/examples/react-query/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ Example of using openapi-fetch with [React Query](https://tanstack.com/query/lat
44

55
## Setup
66

7-
```
7+
```sh
88
pnpm i
99
pnpm run dev
1010
```
1111

12-
You’ll then see the server running at `localhost:5173`
12+
You’ll see the server running at `localhost:5173`

‎packages/openapi-fetch/examples/react-query/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
},
88
"dependencies": {
99
"@tanstack/react-query": "^4.33.0",
10-
"openapi-fetch": "file:../../",
11-
"openapi-typescript": "workspace:",
10+
"openapi-fetch": "file:../..",
11+
"openapi-typescript": "workspace:^",
1212
"react": "^18.2.0",
1313
"react-dom": "^18.2.0"
1414
},

‎packages/openapi-fetch/examples/react-query/src/index.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@ function Fact() {
1414
<div>
1515
{fact.isLoading && <div>Loading...</div>}
1616
{!!fact.error && <div>There was an error: {String(fact.error)}</div>}
17-
<pre>
18-
<code>{JSON.stringify(fact.data, undefined, 2)}</code>
19-
</pre>
17+
{!!fact.data && (
18+
<pre>
19+
<code>{JSON.stringify(fact.data, undefined, 2)}</code>
20+
</pre>
21+
)}
2022
<button type="button" onClick={() => fact.refetch()}>
2123
Another fact!
2224
</button>

‎packages/openapi-fetch/examples/react-query/src/lib/api/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import createClient from "openapi-fetch";
2-
import { paths } from "./v1";
2+
import type { paths } from "./v1";
33

44
const client = createClient<paths>({ baseUrl: "https://catfact.ninja/" });
55
export default client;

‎packages/openapi-fetch/examples/sveltekit/.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
vite.config.js.timestamp-*
10+
vite.config.ts.timestamp-*

‎packages/openapi-fetch/examples/sveltekit/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# openapi-fetch + Svelte/ SvelteKit
2+
3+
Example of using openapi-fetch in [Svelte](https://svelte.dev/) / [SvelteKit](https://kit.svelte.dev).
4+
5+
- [Svelte or clientside SvelteKit example](./src/routes/+page.svelte)
6+
- [SveleKit Page Data example](./src/routes/server/+page.svelte)
7+
8+
## Setup
9+
10+
```sh
11+
pnpm i
12+
pnpm run dev
13+
```
14+
15+
You’ll see the server running at `localhost:5173`

‎packages/openapi-fetch/examples/sveltekit/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "sveltekit",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev",
7+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
8+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
9+
"prepare": "openapi-typescript src/lib/api/v1.json -o src/lib/api/v1.d.ts"
10+
},
11+
"dependencies": {
12+
"openapi-fetch": "file:../..",
13+
"openapi-typescript": "workspace:^"
14+
},
15+
"devDependencies": {
16+
"@sveltejs/adapter-auto": "^2.1.0",
17+
"@sveltejs/kit": "^1.22.6",
18+
"svelte": "^4.2.0",
19+
"svelte-check": "^3.5.0",
20+
"tslib": "^2.6.2",
21+
"typescript": "^5.1.6",
22+
"vite": "^4.4.9"
23+
},
24+
"type": "module"
25+
}

‎packages/openapi-fetch/examples/sveltekit/src/app.d.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// See https://kit.svelte.dev/docs/types#app
2+
// for information about these interfaces
3+
declare global {
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface Platform {}
9+
}
10+
}
11+
12+
export {};

‎packages/openapi-fetch/examples/sveltekit/src/app.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
%sveltekit.head%
7+
</head>
8+
<body data-sveltekit-preload-data="hover">
9+
<div style="display: contents">%sveltekit.body%</div>
10+
</body>
11+
</html>

‎packages/openapi-fetch/examples/sveltekit/src/lib/api/index.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import createClient from "openapi-fetch";
2+
import type { paths } from "./v1";
3+
import type { PageServerLoadEvent } from "../../routes/page-data/$types";
4+
5+
const client = createClient<paths>({ baseUrl: "https://catfact.ninja/" });
6+
export default client;
7+
8+
export const createServerClient = (fetcher: PageServerLoadEvent["fetch"]) =>
9+
createClient<paths>({
10+
baseUrl: "https://catfact.ninja/",
11+
fetch: fetcher,
12+
});

‎packages/openapi-fetch/examples/sveltekit/src/lib/api/v1.d.ts

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/**
2+
* This file was auto-generated by openapi-typescript.
3+
* Do not make direct changes to the file.
4+
*/
5+
6+
7+
export interface paths {
8+
"/breeds": {
9+
/**
10+
* Get a list of breeds
11+
* @description Returns a a list of breeds
12+
*/
13+
get: operations["getBreeds"];
14+
};
15+
"/fact": {
16+
/**
17+
* Get Random Fact
18+
* @description Returns a random fact
19+
*/
20+
get: operations["getRandomFact"];
21+
};
22+
"/facts": {
23+
/**
24+
* Get a list of facts
25+
* @description Returns a a list of facts
26+
*/
27+
get: operations["getFacts"];
28+
};
29+
}
30+
31+
export type webhooks = Record<string, never>;
32+
33+
export interface components {
34+
schemas: {
35+
/**
36+
* Breed model
37+
* @description Breed
38+
*/
39+
Breed: {
40+
/**
41+
* Breed
42+
* Format: string
43+
* @description Breed
44+
*/
45+
breed?: string;
46+
/**
47+
* Country
48+
* Format: string
49+
* @description Country
50+
*/
51+
country?: string;
52+
/**
53+
* Origin
54+
* Format: string
55+
* @description Origin
56+
*/
57+
origin?: string;
58+
/**
59+
* Coat
60+
* Format: string
61+
* @description Coat
62+
*/
63+
coat?: string;
64+
/**
65+
* Pattern
66+
* Format: string
67+
* @description Pattern
68+
*/
69+
pattern?: string;
70+
};
71+
/**
72+
* CatFact model
73+
* @description CatFact
74+
*/
75+
CatFact: {
76+
/**
77+
* Fact
78+
* Format: string
79+
* @description Fact
80+
*/
81+
fact?: string;
82+
/**
83+
* Length
84+
* Format: int32
85+
* @description Length
86+
*/
87+
length?: number;
88+
};
89+
};
90+
responses: never;
91+
parameters: never;
92+
requestBodies: never;
93+
headers: never;
94+
pathItems: never;
95+
}
96+
97+
export type external = Record<string, never>;
98+
99+
export interface operations {
100+
101+
/**
102+
* Get a list of breeds
103+
* @description Returns a a list of breeds
104+
*/
105+
getBreeds: {
106+
parameters: {
107+
query?: {
108+
/** @description limit the amount of results returned */
109+
limit?: number;
110+
};
111+
};
112+
responses: {
113+
/** @description successful operation */
114+
200: {
115+
content: {
116+
"application/json": components["schemas"]["Breed"][];
117+
};
118+
};
119+
};
120+
};
121+
/**
122+
* Get Random Fact
123+
* @description Returns a random fact
124+
*/
125+
getRandomFact: {
126+
parameters: {
127+
query?: {
128+
/** @description maximum length of returned fact */
129+
max_length?: number;
130+
};
131+
};
132+
responses: {
133+
/** @description successful operation */
134+
200: {
135+
content: {
136+
"application/json": components["schemas"]["CatFact"];
137+
};
138+
};
139+
/** @description Fact not found */
140+
404: {
141+
content: never;
142+
};
143+
};
144+
};
145+
/**
146+
* Get a list of facts
147+
* @description Returns a a list of facts
148+
*/
149+
getFacts: {
150+
parameters: {
151+
query?: {
152+
/** @description maximum length of returned fact */
153+
max_length?: number;
154+
/** @description limit the amount of results returned */
155+
limit?: number;
156+
};
157+
};
158+
responses: {
159+
/** @description successful operation */
160+
200: {
161+
content: {
162+
"application/json": components["schemas"]["CatFact"][];
163+
};
164+
};
165+
};
166+
};
167+
}

0 commit comments

Comments
 (0)