client-with-zod

If you want to use zod with your swr or TanStack Query client, you can do so by configuring it as follows.

Example of orval.config.js

1 module.exports = {
2   petstore: {
3     input: {
4       target: './petstore.yaml',
5     },
6     output: {
7       mode: 'tags-split',
8       client: 'swr',
9       target: 'src/gen/endpoints',
10       schemas: 'src/gen/models',
11       mock: true,
12     },
13   },
14   petstoreZod: {
15     input: {
16       target: './petstore.yaml',
17     },
18     output: {
19       mode: 'tags-split',
20       client: 'zod',
21       target: 'src/gen/endpoints',
22       fileExtension: '.zod.ts',
23     },
24   },
25 };

Here we describe the generation of zod and the definition of swr. petstoreZod avoids conflicts in generated file names by specifying .zod.ts for output.fileExtension and not defining schemas. Also, mock only needs to be generated once, so it is defined only in petstore.

The files that are actually automatically generated are as follows:

1 samples/swr-with-zod/src/gen/
2 ├── endpoints
3 │   └── pets
4 │       ├── pets.msw.ts
5 │       ├── pets.ts
6 │       └── pets.zod.ts
7 └── models

The automatically generated swr and zod definitions can be used in your application as follows:

1 import { Pet } from './gen/models';
2 import { useListPets, useCreatePets } from './gen/endpoints/pets/pets';
3 import { createPetsBodyItem } from './gen/endpoints/pets/pets.zod';
4 
5 function App() {
6   const { data } = useListPets();
7   const { trigger } = useCreatePets();
8 
9   const createPet = async () => {
10     // For example, specifying the number 123 in the name will result in a `zod` error.
11     const pet = { name: '123', tag: 'test' };
12 
13     try {
14       const parsedPet = createPetsBodyItem.parse(pet);
15 
16       await trigger([parsedPet]);
17     } catch (error) {
18       console.log('raise error', error);
19     }
20   };
21 }

See below for the complete sample app.