Vue Query

您应该有一个 OpenAPI 规范和一个 Orval 配置，其中您将模式定义为 vue-query。

使用 Vue Query 的示例

1module.exports = {
2  petstore: {
3    output: {
4      mode: 'tags-split',
5      target: 'src/petstore.ts',
6      schemas: 'src/model',
7      client: 'vue-query',
8      mock: true,
9    },
10    input: {
11      target: './petstore.yaml',
12    },
13  },
14};

查看 orval 配置 参考以了解所有可用选项。

Vue Query 模式将为 OpenAPI 规范中的每个路径生成一个实现文件，每个路径都有一个自定义钩子。

就像来自这个 swagger 的以下示例：

1export const showPetById = (
2  petId: string,
3  options?: AxiosRequestConfig,
4): Promise<AxiosResponse<Pet>> => {
5  return axios.get(`/pets/${petId}`, options);
6};
7
8export const getShowPetByIdQueryKey = (petId: string) => [`/pets/${petId}`];
9
10export const useShowPetById = <
11  TData = AsyncReturnType<typeof showPetById>,
12  TError = Error,
13>(
14  petId: string,
15  options?: {
16    query?: UseQueryOptions<AsyncReturnType<typeof showPetById>, TError, TData>;
17    axios?: AxiosRequestConfig;
18  },
19) => {
20  const { query: queryOptions, axios: axiosOptions } = options ?? {};
21
22  const queryKey = queryOptions?.queryKey ?? getShowPetByIdQueryKey(petId);
23  const queryFn = () => showPetById(petId, axiosOptions);
24
25  const query = useQuery<AsyncReturnType<typeof queryFn>, TError, TData>(
26    queryKey,
27    queryFn,
28    {
29      enabled: !!petId,
30      ...queryOptions,
31    },
32  );
33
34  return {
35    queryKey,
36    ...query,
37  };
38};

如何使用其他查询

使用以下示例，Orval 将生成一个带有 nextId 查询参数的 useQuery 和 useInfiniteQuery。您还可以通过 options 属性为每个配置覆盖配置。

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        query: {
7          useQuery: true,
8          useInfinite: true,
9          useInfiniteQueryParam: 'nextId',
10          options: {
11            staleTime: 10000,
12          },
13        },
14      },
15    },
16    ...
17  },
18};

如果需要，您还可以直接覆盖到操作或标签

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        operations: {
7          listPets: {
8            query: {
9              ...
10            },
11          }
12        },
13      },
14    }
15    ...
16  },
17};

查看 这里 的完整示例