React Query Swagger 使用教程

最新推荐文章于 2024-12-26 07:20:05 发布

鲍珍博Quinn

最新推荐文章于 2024-12-26 07:20:05 发布

阅读量439

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00423/article/details/142839905

React Query Swagger 使用教程

react-query-swagger Generates react-query hooks based on Swagger API definitions 项目地址: https://gitcode.com/gh_mirrors/re/react-query-swagger

1. 项目介绍

react-query-swagger 是一个开源项目，旨在基于 Swagger API 定义自动生成 react-query 钩子。该项目的主要功能包括：

支持 DateTime 和 Date：生成的钩子能够处理日期时间类型，返回 JavaScript 的 Date 对象。
树摇优化：所有生成的代码都是可树摇的，这意味着只有实际使用的代码会被打包。
多种模板支持：支持生成基于 Axios 或 Fetch 的 HTTP 客户端。

该项目通过使用 NSwag 工具，将 Swagger API 定义转换为 react-query 钩子，从而简化了前端与后端 API 的集成。

2. 项目快速启动

安装

首先，使用 yarn 或 npm 将 react-query-swagger 安装到你的项目中：

yarn add react-query-swagger

生成钩子

安装完成后，你可以通过以下命令生成 react-query 钩子：

npx react-query-swagger \
  /tanstack \
  /input:https://petstore.swagger.io/v2/swagger.json \
  /output:src/api/axios-client.ts \
  /template:Axios

使用生成的钩子

生成的钩子可以直接在你的 React 组件中使用。例如，查询宠物数据：

import { useFindPetsByStatusQuery } from './api/axios-client';

const PetsList = () => {
  const petsQuery = useFindPetsByStatusQuery([
    'available',
    'pending',
    'sold',
  ]);

  if (petsQuery.isLoading) return <div>Loading...</div>;
  if (petsQuery.error) return <div>Error: {petsQuery.error.message}</div>;

  return (
    <ul>
      {petsQuery.data.map((pet) => (
        <li key={pet.id}>{pet.name}</li>
      ))}
    </ul>
  );
};