diff --git a/docs/ja/openapi-fetch/examples.md b/docs/ja/openapi-fetch/examples.md index d2a1d74bd..2db423de2 100644 --- a/docs/ja/openapi-fetch/examples.md +++ b/docs/ja/openapi-fetch/examples.md @@ -6,11 +6,11 @@ title: openapi-fetch 使用例 openapi-fetchを他のフレームワークやライブラリと組み合わせて使用するコード例 -## React + React Query +See [openapi-react-query](/ja/openapi-react-query/) -[React Query](https://tanstack.com/query/latest) は、Reactでopenapi-fetchを使用するための理想的なラッパーです。わずか13 kBのサイズで、クライアントサイドのキャッシュ機能を提供し、クライアントの負担を増やすことなく利用できます。また、その優れた型推論機能により、openapi-fetchの型が最小限の設定で完全に保持されます。 +## React + SWR -[GitHubでコード例を見る](https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch/examples/react-query) +See [swr-openapi](/swr-openapi/) ## Next.js @@ -34,4 +34,4 @@ _注: SvelteKitを使用しない場合でも、`src/routes/+page.svelte` 内の --- -他の例も歓迎しています！あなたの使用例を[PRとして提出](https://github.com/openapi-ts/openapi-typescript/pulls)してください。 \ No newline at end of file +他の例も歓迎しています！あなたの使用例を[PRとして提出](https://github.com/openapi-ts/openapi-typescript/pulls)してください。 diff --git a/docs/openapi-fetch/examples.md b/docs/openapi-fetch/examples.md index c52a14823..d96f22865 100644 --- a/docs/openapi-fetch/examples.md +++ b/docs/openapi-fetch/examples.md @@ -8,9 +8,11 @@ Example code of using openapi-fetch with other frameworks and libraries. ## React + React Query -[React Query](https://tanstack.com/query/latest) is a perfect wrapper for openapi-fetch in React. At only 13 kB, it provides clientside caching without too much client weight in return. And its stellar type inference preserves openapi-fetch types perfectly with minimal setup. +See [openapi-react-query](/openapi-react-query/) -[View a code example in GitHub](https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch/examples/react-query) +## React + SWR + +See [swr-openapi](/swr-openapi/) ## Next.js @@ -33,4 +35,5 @@ _Note: if you’re using Svelte without SvelteKit, the root example in `src/rout [View a code example in GitHub](https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch/examples/vue-3) --- + Additional examples are always welcome! Please [open a PR](https://github.com/openapi-ts/openapi-typescript/pulls) with your examples. diff --git a/docs/zh/openapi-fetch/examples.md b/docs/zh/openapi-fetch/examples.md index d3edaf9d3..c75ad7012 100644 --- a/docs/zh/openapi-fetch/examples.md +++ b/docs/zh/openapi-fetch/examples.md @@ -8,9 +8,11 @@ title: openapi-fetch 示例 ## React + React Query -[React Query](https://tanstack.com/query/latest) 是在 React 中完美封装 openapi-fetch 的工具。仅有 13 kB 的大小，提供了客户端缓存而没有太多的客户端负担。其出色的类型推断通过最小的设置完美地保留了 openapi-fetch 的类型。 +See [openapi-react-query](/openapi-react-query/) -[在 GitHub 中查看代码示例](https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch/examples/react-query) +## React + SWR + +See [swr-openapi](/swr-openapi/) ## Next.js diff --git a/packages/openapi-fetch/examples/react-query/README.md b/packages/openapi-fetch/examples/react-query/README.md deleted file mode 100644 index 14967a744..000000000 --- a/packages/openapi-fetch/examples/react-query/README.md +++ /dev/null @@ -1,12 +0,0 @@ -# openapi-fetch + React Query - -Example of using openapi-fetch with [React Query](https://tanstack.com/query/latest). - -## Setup - -```sh -pnpm i -pnpm run dev -``` - -You’ll see the server running at `localhost:5173` diff --git a/packages/openapi-fetch/examples/react-query/index.html b/packages/openapi-fetch/examples/react-query/index.html deleted file mode 100644 index abe85fee2..000000000 --- a/packages/openapi-fetch/examples/react-query/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - openapi-fetch + React Query - - -
- - - diff --git a/packages/openapi-fetch/examples/react-query/package.json b/packages/openapi-fetch/examples/react-query/package.json deleted file mode 100644 index d770641a0..000000000 --- a/packages/openapi-fetch/examples/react-query/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "@example/openapi-fetch-react-query", - "private": true, - "type": "module", - "scripts": { - "dev": "vite dev" - }, - "dependencies": { - "@tanstack/react-query": "^5.62.14", - "openapi-fetch": "workspace:^", - "openapi-typescript": "workspace:^", - "react": "^18.3.1", - "react-dom": "^18.3.1" - }, - "devDependencies": { - "@types/react": "18.3.1", - "@types/react-dom": "18.3.0", - "@vitejs/plugin-react-swc": "^3.7.2", - "typescript": "^5.7.2", - "vite": "^6.0.7" - } -} diff --git a/packages/openapi-fetch/examples/react-query/src/hooks/queries.ts b/packages/openapi-fetch/examples/react-query/src/hooks/queries.ts deleted file mode 100644 index 5e960812f..000000000 --- a/packages/openapi-fetch/examples/react-query/src/hooks/queries.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; -import type { ParamsOption, RequestBodyOption } from "openapi-fetch"; -import type { paths } from "../lib/api/v1"; -import client from "../lib/api"; - -type UseQueryOptions = ParamsOption & - RequestBodyOption & { - // add your custom options here - reactQuery?: { - enabled: boolean; // Note: React Query type’s inference is difficult to apply automatically, hence manual option passing here - // add other React Query options as needed - }; - }; - -// paths -const GET_FACT = "/fact"; - -export function getFact({ params, body, reactQuery }: UseQueryOptions) { - return useQuery({ - ...reactQuery, - queryKey: [ - GET_FACT, - // add any other hook dependencies here - ], - queryFn: async ({ signal }) => { - const { data } = await client.GET(GET_FACT, { - params, - // body - isn’t used for GET, but needed for other request types - signal, // allows React Query to cancel request - }); - return data; - // Note: Error throwing handled automatically via middleware - }, - }); -} diff --git a/packages/openapi-fetch/examples/react-query/src/index.tsx b/packages/openapi-fetch/examples/react-query/src/index.tsx deleted file mode 100644 index dada0e825..000000000 --- a/packages/openapi-fetch/examples/react-query/src/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useState } from "react"; -import { createRoot } from "react-dom/client"; -import { getFact } from "./hooks/queries"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; - -function Fact() { - const fact = getFact({ - params: { - query: { max_length: 500 }, - }, - }); - - return ( -
- {fact.isLoading &&
Loading...
} - {fact.error ? ( -
There was an error: {fact.error.message}
- ) : ( - 
-          {JSON.stringify(fact.data, undefined, 2)}
-
- )} - -
- ); -} - -function App() { - const [reactQueryClient] = useState( - new QueryClient({ - defaultOptions: { - queries: { - networkMode: "offlineFirst", // keep caches as long as possible - refetchOnWindowFocus: false, // don’t refetch on window focus - }, - }, - }) - ); - return ( - - - - ); -} - -const domNode = document.getElementById("app"); -if (domNode) { - const root = createRoot(domNode); - root.render(); -} diff --git a/packages/openapi-fetch/examples/react-query/src/lib/api/index.ts b/packages/openapi-fetch/examples/react-query/src/lib/api/index.ts deleted file mode 100644 index 8defea8af..000000000 --- a/packages/openapi-fetch/examples/react-query/src/lib/api/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -import createClient, { type Middleware } from "openapi-fetch"; -import type { paths } from "./v1"; - -const throwOnError: Middleware = { - async onResponse({ response }) { - if (response.status >= 400) { - const body = response.headers.get("content-type")?.includes("json") - ? await response.clone().json() - : await response.clone().text(); - throw new Error(body); - } - return undefined; - }, -}; - -const client = createClient({ baseUrl: "https://catfact.ninja/" }); - -client.use(throwOnError); - -export default client; diff --git a/packages/openapi-fetch/examples/react-query/src/lib/api/v1.d.ts b/packages/openapi-fetch/examples/react-query/src/lib/api/v1.d.ts deleted file mode 100644 index 70cdcb2e3..000000000 --- a/packages/openapi-fetch/examples/react-query/src/lib/api/v1.d.ts +++ /dev/null @@ -1,245 +0,0 @@ -/** - * This file was auto-generated by openapi-typescript. - * Do not make direct changes to the file. - */ - -export interface paths { - "/breeds": { - parameters: { - query?: never; - header?: never; - path?: never; - cookie?: never; - }; - /** - * Get a list of breeds - * @description Returns a a list of breeds - */ - get: operations["getBreeds"]; - put?: never; - post?: never; - delete?: never; - options?: never; - head?: never; - patch?: never; - trace?: never; - }; - "/fact": { - parameters: { - query?: never; - header?: never; - path?: never; - cookie?: never; - }; - /** - * Get Random Fact - * @description Returns a random fact - */ - get: operations["getRandomFact"]; - put?: never; - post?: never; - delete?: never; - options?: never; - head?: never; - patch?: never; - trace?: never; - }; - "/facts": { - parameters: { - query?: never; - header?: never; - path?: never; - cookie?: never; - }; - /** - * Get a list of facts - * @description Returns a a list of facts - */ - get: operations["getFacts"]; - put?: never; - post?: never; - delete?: never; - options?: never; - head?: never; - patch?: never; - trace?: never; - }; -} -export type webhooks = Record; -export interface components { - schemas: { - /** - * Breed model - * @description Breed - */ - Breed: { - /** - * Breed - * Format: string - * @description Breed - */ - breed?: string; - /** - * Country - * Format: string - * @description Country - */ - country?: string; - /** - * Origin - * Format: string - * @description Origin - */ - origin?: string; - /** - * Coat - * Format: string - * @description Coat - */ - coat?: string; - /** - * Pattern - * Format: string - * @description Pattern - */ - pattern?: string; - }; - /** - * CatFact model - * @description CatFact - */ - CatFact: { - /** - * Fact - * Format: string - * @description Fact - */ - fact?: string; - /** - * Length - * Format: int32 - * @description Length - */ - length?: number; - }; - Error: { - code: number; - message: string; - }; - }; - responses: never; - parameters: never; - requestBodies: never; - headers: never; - pathItems: never; -} -export type $defs = Record; -export interface operations { - getBreeds: { - parameters: { - query?: { - /** @description limit the amount of results returned */ - limit?: number; - }; - header?: never; - path?: never; - cookie?: never; - }; - requestBody?: never; - responses: { - /** @description successful operation */ - 200: { - headers: { - [name: string]: unknown; - }; - content: { - "application/json": components["schemas"]["Breed"][]; - }; - }; - /** @description error */ - default: { - headers: { - [name: string]: unknown; - }; - content: { - "application/json": components["schemas"]["Error"]; - }; - }; - }; - }; - getRandomFact: { - parameters: { - query?: { - /** @description maximum length of returned fact */ - max_length?: number; - }; - header?: never; - path?: never; - cookie?: never; - }; - requestBody?: never; - responses: { - /** @description successful operation */ - 200: { - headers: { - [name: string]: unknown; - }; - content: { - "application/json": components["schemas"]["CatFact"]; - }; - }; - /** @description not found */ - 404: { - headers: { - [name: string]: unknown; - }; - content: { - "application/json": components["schemas"]["Error"]; - }; - }; - /** @description error */ - default: { - headers: { - [name: string]: unknown; - }; - content: { - "application/json": components["schemas"]["Error"]; - }; - }; - }; - }; - getFacts: { - parameters: { - query?: { - /** @description maximum length of returned fact */ - max_length?: number; - /** @description limit the amount of results returned */ - limit?: number; - }; - header?: never; - path?: never; - cookie?: never; - }; - requestBody?: never; - responses: { - /** @description successful operation */ - 200: { - headers: { - [name: string]: unknown; - }; - content: { - "application/json": components["schemas"]["CatFact"][]; - }; - }; - /** @description error */ - default: { - headers: { - [name: string]: unknown; - }; - content: { - "application/json": components["schemas"]["Error"]; - }; - }; - }; - }; -} diff --git a/packages/openapi-fetch/examples/react-query/src/lib/api/v1.json b/packages/openapi-fetch/examples/react-query/src/lib/api/v1.json deleted file mode 100644 index baf0c069e..000000000 --- a/packages/openapi-fetch/examples/react-query/src/lib/api/v1.json +++ /dev/null @@ -1,229 +0,0 @@ -{ - "openapi": "3.0.0", - "info": { - "title": "Cat Facts API", - "version": "1.0" - }, - "paths": { - "/breeds": { - "get": { - "tags": ["Breeds"], - "summary": "Get a list of breeds", - "description": "Returns a a list of breeds", - "operationId": "getBreeds", - "parameters": [ - { - "name": "limit", - "in": "query", - "description": "limit the amount of results returned", - "required": false, - "schema": { - "type": "integer", - "format": "int64" - } - } - ], - "responses": { - "200": { - "description": "successful operation", - "content": { - "application/json": { - "schema": { - "type": "array", - "items": { - "$ref": "#/components/schemas/Breed" - } - } - } - } - }, - "default": { - "description": "error", - "content": { - "application/json": { - "schema": { - "$ref": "#/components/schemas/Error" - } - } - } - } - } - } - }, - "/fact": { - "get": { - "tags": ["Facts"], - "summary": "Get Random Fact", - "description": "Returns a random fact", - "operationId": "getRandomFact", - "parameters": [ - { - "name": "max_length", - "in": "query", - "description": "maximum length of returned fact", - "required": false, - "schema": { - "type": "integer", - "format": "int64" - } - } - ], - "responses": { - "200": { - "description": "successful operation", - "content": { - "application/json": { - "schema": { - "$ref": "#/components/schemas/CatFact" - } - } - } - }, - "404": { - "description": "not found", - "content": { - "application/json": { - "schema": { - "$ref": "#/components/schemas/Error" - } - } - } - }, - "default": { - "description": "error", - "content": { - "application/json": { - "schema": { - "$ref": "#/components/schemas/Error" - } - } - } - } - } - } - }, - "/facts": { - "get": { - "tags": ["Facts"], - "summary": "Get a list of facts", - "description": "Returns a a list of facts", - "operationId": "getFacts", - "parameters": [ - { - "name": "max_length", - "in": "query", - "description": "maximum length of returned fact", - "required": false, - "schema": { - "type": "integer", - "format": "int64" - } - }, - { - "name": "limit", - "in": "query", - "description": "limit the amount of results returned", - "required": false, - "schema": { - "type": "integer", - "format": "int64" - } - } - ], - "responses": { - "200": { - "description": "successful operation", - "content": { - "application/json": { - "schema": { - "type": "array", - "items": { - "$ref": "#/components/schemas/CatFact" - } - } - } - } - }, - "default": { - "description": "error", - "content": { - "application/json": { - "schema": { - "$ref": "#/components/schemas/Error" - } - } - } - } - } - } - } - }, - "components": { - "schemas": { - "Breed": { - "title": "Breed model", - "description": "Breed", - "properties": { - "breed": { - "title": "Breed", - "description": "Breed", - "type": "string", - "format": "string" - }, - "country": { - "title": "Country", - "description": "Country", - "type": "string", - "format": "string" - }, - "origin": { - "title": "Origin", - "description": "Origin", - "type": "string", - "format": "string" - }, - "coat": { - "title": "Coat", - "description": "Coat", - "type": "string", - "format": "string" - }, - "pattern": { - "title": "Pattern", - "description": "Pattern", - "type": "string", - "format": "string" - } - }, - "type": "object" - }, - "CatFact": { - "title": "CatFact model", - "description": "CatFact", - "properties": { - "fact": { - "title": "Fact", - "description": "Fact", - "type": "string", - "format": "string" - }, - "length": { - "title": "Length", - "description": "Length", - "type": "integer", - "format": "int32" - } - }, - "type": "object" - }, - "Error": { - "type": "object", - "required": ["code", "message"], - "properties": { - "code": { "type": "number" }, - "message": { "type": "string" } - } - } - } - } -} diff --git a/packages/openapi-fetch/examples/react-query/tsconfig.json b/packages/openapi-fetch/examples/react-query/tsconfig.json deleted file mode 100644 index c6c11eac2..000000000 --- a/packages/openapi-fetch/examples/react-query/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "baseUrl": ".", - "jsx": "preserve", - "module": "ESNext", - "moduleResolution": "Node" - }, - "include": ["src"] -} diff --git a/packages/openapi-fetch/examples/react-query/vite.config.ts b/packages/openapi-fetch/examples/react-query/vite.config.ts deleted file mode 100644 index 8ed35d083..000000000 --- a/packages/openapi-fetch/examples/react-query/vite.config.ts +++ /dev/null @@ -1,6 +0,0 @@ -import react from "@vitejs/plugin-react-swc"; -import { defineConfig } from "vite"; - -export default defineConfig({ - plugins: [react()], -}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d241049f0..8c5b4a5f8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -137,40 +137,6 @@ importers: specifier: ^5.7.2 version: 5.7.2 - packages/openapi-fetch/examples/react-query: - dependencies: - '@tanstack/react-query': - specifier: ^5.62.14 - version: 5.62.14(react@18.3.1) - openapi-fetch: - specifier: workspace:^ - version: link:../.. - openapi-typescript: - specifier: workspace:^ - version: link:../../../openapi-typescript - react: - specifier: ^18.3.1 - version: 18.3.1 - react-dom: - specifier: ^18.3.1 - version: 18.3.1(react@18.3.1) - devDependencies: - '@types/react': - specifier: 18.3.1 - version: 18.3.1 - '@types/react-dom': - specifier: 18.3.0 - version: 18.3.0 - '@vitejs/plugin-react-swc': - specifier: ^3.7.2 - version: 3.7.2(@swc/helpers@0.5.15)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(yaml@2.5.1)) - typescript: - specifier: ^5.7.2 - version: 5.7.2 - vite: - specifier: ^6.0.7 - version: 6.0.7(@types/node@22.10.5)(jiti@2.4.2)(yaml@2.5.1) - packages/openapi-fetch/examples/sveltekit: dependencies: '@sveltejs/vite-plugin-svelte-inspector': @@ -1693,9 +1659,6 @@ packages: '@types/pug@2.0.10': resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==} - '@types/react-dom@18.3.0': - resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} - '@types/react-dom@18.3.5': resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==} peerDependencies: @@ -1727,11 +1690,6 @@ packages: '@ungap/structured-clone@1.2.1': resolution: {integrity: sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==} - '@vitejs/plugin-react-swc@3.7.2': - resolution: {integrity: sha512-y0byko2b2tSVVf5Gpng1eEhX1OvPC7x8yns1Fx8jDzlJp4LS6CMkCPfLw47cjyoMrshQDoQw4qcgjsU9VvlCew==} - peerDependencies: - vite: ^4 || ^5 || ^6 - '@vitejs/plugin-react@4.3.4': resolution: {integrity: sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==} engines: {node: ^14.18.0 || >=16.0.0} @@ -5957,10 +5915,6 @@ snapshots: '@types/pug@2.0.10': {} - '@types/react-dom@18.3.0': - dependencies: - '@types/react': 18.3.1 - '@types/react-dom@18.3.5(@types/react@18.3.1)': dependencies: '@types/react': 18.3.1 @@ -5997,13 +5951,6 @@ snapshots: '@ungap/structured-clone@1.2.1': {} - '@vitejs/plugin-react-swc@3.7.2(@swc/helpers@0.5.15)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(yaml@2.5.1))': - dependencies: - '@swc/core': 1.10.4(@swc/helpers@0.5.15) - vite: 6.0.7(@types/node@22.10.5)(jiti@2.4.2)(yaml@2.5.1) - transitivePeerDependencies: - - '@swc/helpers' - '@vitejs/plugin-react@4.3.4(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(yaml@2.5.1))': dependencies: '@babel/core': 7.26.0