Client with Zod

To use Zod with your SWR or TanStack Query client, do so by configuring it as follows.

Example of orval.config.js

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

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

The files that are actually automatically generated are as follows:

1samples/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 the application as follows:

1import { Pet } from './gen/models';
2import { useListPets, useCreatePets } from './gen/endpoints/pets/pets';
3import { createPetsBodyItem } from './gen/endpoints/pets/pets.zod';
4
5function 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.