Skip to content

Examples

Example code of using openapi-fetch with other frameworks and libraries.

React + React Query

React Query 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.

View a code example in GitHub

Next.js

Next.js is the most popular SSR framework for React. While React Query is recommended for all clientside fetching with openapi-fetch (not SWR), this example shows how to take advantage of Next.js’s server-side fetching with built-in caching.

View a code example in GitHub

Svelte / SvelteKit

SvelteKit’s automatic type inference can easily pick up openapi-fetch’s types in both clientside fetching and Page Data fetching. And it doesn’t need any additional libraries to work. SvelteKit also advises to use their custom fetch in load functions. This can be achieved with fetch options.

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.

View a code example in GitHub

Vue 3

Vue 3 is a popular framework with a large ecosystem. Vue 3’s Composition API is a perfect match for openapi-fetch, as it allows for easy separation of concerns and reactivity.

View a code example in GitHub

Additional examples are always welcome! Please open a PR with your examples.