+
+
+
+ 
+
+ @hey-api/openapi-ts 🤝 SWR
+
+
+
+ {/* Main Demo Section */}
+
+ Basic Usage Demo
+
+
+
+
+
+
+ Name: {pet?.name ?? 'N/A'}
+
+
+ Category: {pet?.category?.name ?? 'N/A'}
+
+
+
+
+
+
+
+
+
+
+ {/* Advanced Examples Toggle */}
+
+
+
+ {showAdvancedExamples && (
+
+
+ SWR v2 Key Patterns
+
+
+
+ Inventory (Optional params):
+
+
+ Key: {JSON.stringify(inventoryKey)}
+
+
+ Count:{' '}
+ {inventory ? Object.keys(inventory).length : 'Loading...'}
+
+
+
+
+
+ Available Pets (Required params):
+
+
+ Key: {JSON.stringify(petsByStatusKey)}
+
+
+ Found: {availablePets?.length ?? 'Loading...'} pets
+
+
+
+
+
+ Key Equality Demo:
+
+
+ Key 1: {JSON.stringify(loginKey1)}
+
+
+ Key 2: {JSON.stringify(loginKey2)}
+
+
+ ✓ These keys are equal and share the same cache
+
+
+
+
+ )}
+
+
+
+ {
+ event.preventDefault();
+ onAddPet(new FormData(event.currentTarget));
+ }}
+ >
+
+
+
+ Name
+
+ {isRequiredNameError && (
+
+ Please enter a name
+
+ )}
+
+
+
+
+
+
+
+
+ Category
+
+
+ Please enter a category
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+ useSWRInfinite Example (for paginated endpoints):
+
+ If your OpenAPI spec has pagination configured, the SWR plugin generates
+ infinite options functions (e.g., findPetsByStatusInfinite).
+
+ These functions return an object with:
+ - getKey: Function that generates keys for each page
+ - fetcher: Function that fetches a single page
+
+ Example usage:
+
+ import useSWRInfinite from 'swr/infinite';
+ import { findPetsByStatusInfinite } from './client/swr.gen';
+
+ function InfinitePetList() {
+ // Get the infinite options with your query parameters
+ const { getKey, fetcher } = findPetsByStatusInfinite({
+ query: { status: 'available' }
+ });
+
+ const { data, size, setSize, isLoading } = useSWRInfinite(getKey, fetcher);
+
+ const pets = data ? data.flat() : [];
+ const isLoadingMore = isLoading || (size > 0 && data && typeof data[size - 1] === 'undefined');
+ const isEmpty = data?.[0]?.length === 0;
+ const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < 20);
+
+ return (
+
+ {pets.map((pet) => (
+
+ {pet.name}
+
+ ))}
+
+
+ );
+ }
+
+ Note: The infinite options are only generated for operations that have
+ pagination configured in the OpenAPI spec.
+ */}
+
+