使用 Zod 的客户端

如果您想将 zod 与 swr 或 TanStack Query 客户端一起使用，可以通过如下配置来实现。

orval.config.js 示例

1module.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};

这里我们描述了 zod 的生成和 swr 的定义。petstoreZod 通过为 output.fileExtension 指定 .zod.ts 并且不定义 schemas 来避免生成文件名冲突。另外，mock 只需要生成一次，所以只在 petstore 中定义。

实际自动生成的文件如下：

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

自动生成的 swr 和 zod 定义可以在您的应用程序中按如下方式使用：

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    // 例如，在 name 中指定数字 123 将导致 `zod` 错误。
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}

查看完整的 示例应用。