Skip to content

Commit c744699

Browse files
drwpowdrwpow
authored
Add Next.js example, fix some other example bugs (#1312)
1 parent 1688f11 commit c744699

File tree

24 files changed

+1062
-41
lines changed

24 files changed

+1062
-41
lines changed

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,11 @@ openapi-fetch is simple vanilla JS that can be used in any project. But sometime
7878

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

81-
### React + SWR
81+
### Next.js
8282

83-
TODO
83+
<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a> is the most popular SSR framework for React. While [React Query](#react--react-query) is recommended for clientside fetching, this example shows how to take advantage of <a href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch" target="_blank" rel="noopener noreferrer">server-side fetching</a>.
84+
85+
[View a code example in GitHub](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch/examples/nextjs)
8486

8587
### Svelte / SvelteKit
8688

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# openapi-fetch + Next.js
2+
3+
Example of using openapi-fetch in [Next.js](https://nextjs.org) using server-rendered data.
4+
5+
For an example of fetching clientside, see the [React Query example](../react-query) which also works in Next.js (React Query is recommended over SWR because of type inference).
6+
7+
## Setup
8+
9+
```sh
10+
pnpm i
11+
pnpm run dev
12+
```
13+
14+
You’ll see the server running at `localhost:3000`

‎packages/openapi-fetch/examples/nextjs/app/favicon.ico

25.3 KB
Binary file not shown.

‎packages/openapi-fetch/examples/nextjs/app/layout.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "openapi-fetch + Next.js",
5+
};
6+
7+
export default function RootLayout({ children }: { children: React.ReactNode }) {
8+
return (
9+
<html lang="en">
10+
<body>{children}</body>
11+
</html>
12+
);
13+
}

‎packages/openapi-fetch/examples/nextjs/app/page.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import client from "../lib/api";
2+
3+
async function getFact() {
4+
return await client.GET("/fact", {
5+
params: {
6+
query: { max_length: 500 },
7+
},
8+
});
9+
}
10+
11+
export default async function Home() {
12+
const fact = await getFact();
13+
14+
return (
15+
<div>
16+
{fact.error ? (
17+
<div>There was an error: {fact.error.message}</div>
18+
) : (
19+
<pre>
20+
<code>{JSON.stringify(fact.data, undefined, 2)}</code>
21+
</pre>
22+
)}
23+
</div>
24+
);
25+
}

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import createClient from "openapi-fetch";
2+
import type { paths } from "./v1";
3+
4+
const client = createClient<paths>({ baseUrl: "https://catfact.ninja/" });
5+
export default client;

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

+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
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+
Error: {
90+
code: number;
91+
message: string;
92+
};
93+
};
94+
responses: never;
95+
parameters: never;
96+
requestBodies: never;
97+
headers: never;
98+
pathItems: never;
99+
}
100+
101+
export type external = Record<string, never>;
102+
103+
export interface operations {
104+
105+
/**
106+
* Get a list of breeds
107+
* @description Returns a a list of breeds
108+
*/
109+
getBreeds: {
110+
parameters: {
111+
query?: {
112+
/** @description limit the amount of results returned */
113+
limit?: number;
114+
};
115+
};
116+
responses: {
117+
/** @description successful operation */
118+
200: {
119+
content: {
120+
"application/json": components["schemas"]["Breed"][];
121+
};
122+
};
123+
/** @description error */
124+
default: {
125+
content: {
126+
"application/json": components["schemas"]["Error"];
127+
};
128+
};
129+
};
130+
};
131+
/**
132+
* Get Random Fact
133+
* @description Returns a random fact
134+
*/
135+
getRandomFact: {
136+
parameters: {
137+
query?: {
138+
/** @description maximum length of returned fact */
139+
max_length?: number;
140+
};
141+
};
142+
responses: {
143+
/** @description successful operation */
144+
200: {
145+
content: {
146+
"application/json": components["schemas"]["CatFact"];
147+
};
148+
};
149+
/** @description not found */
150+
404: {
151+
content: {
152+
"application/json": components["schemas"]["Error"];
153+
};
154+
};
155+
/** @description error */
156+
default: {
157+
content: {
158+
"application/json": components["schemas"]["Error"];
159+
};
160+
};
161+
};
162+
};
163+
/**
164+
* Get a list of facts
165+
* @description Returns a a list of facts
166+
*/
167+
getFacts: {
168+
parameters: {
169+
query?: {
170+
/** @description maximum length of returned fact */
171+
max_length?: number;
172+
/** @description limit the amount of results returned */
173+
limit?: number;
174+
};
175+
};
176+
responses: {
177+
/** @description successful operation */
178+
200: {
179+
content: {
180+
"application/json": components["schemas"]["CatFact"][];
181+
};
182+
};
183+
/** @description error */
184+
default: {
185+
content: {
186+
"application/json": components["schemas"]["Error"];
187+
};
188+
};
189+
};
190+
};
191+
}

0 commit comments

Comments
 (0)