用 openapi-codegen 生成 React Query 代码，真香~

本文最后更新于：2022年7月8日 下午

前言：之前在项目中我都会使用 https://github.com/contiamo/restful-react 从Swagger生成接口代码，省了很多对接口的时间。本以为就这样了，直到我遇到了 https://github.com/fabien0102/openapi-codegen，才知道什么才是真的香~ 这里来分享一下它是有多香。

新欢与旧爱

我们先来说说 https://github.com/contiamo/restful-react ， 它虽然解决了接口问题，但也存在非常明显的缺点，数据请求处理这一层太弱，仅仅是在fetch上做了简单的封装，没有办法支持复杂的处理，如二次请求、缓存等，需要自己去做处理，麻烦且成本不低。
它的作者也是发现了这个问题，就开了新坑 https://github.com/fabien0102/openapi-codegen ， 使用 React 当红炸子鸡 – React Query 来做数据请求，这样在支持接口生成的同时，能够支持非常强大的数据处理能力。

上手

https://github.com/fabien0102/openapi-codegen的使用非常简单，两条命令一敲就完成了初始化

1
2
$ npm i -D @openapi-codegen/{cli,typescript}
$ npx openapi-codegen init

根据命令提示输入，会得到这几个文件

1
2
3
4
5
6
openapi-codegen.config.ts

├── ewyaComponents.ts
├── ewyaContext.ts
├── ewyaFetcher.ts
└── ewyaSchemas.ts

openapi-codegen.config.ts是保存了我们生成接口的一些配置，如果有多个后端swagger，可以在这个里面配置。
ewyaComponents是我们可以直接使用的组件，
ewyaContext包含了一些配置，
ewyaFetcher是封装了fetch请求给react-query使用，
ewyaSchemas中保存了ts类型

剩下的就跟 react-query 的使用基本一致了，我这里因为要在多个子项目里面使用就把它封装到了一个组件里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			refetchOnWindowFocus: false,
			retry: 1,
			retryDelay: (attempt) => attempt * 2000,
		},
	},
});

const index = ({ children }) => {
	return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
};

export default index;

我们可以在ewyaFetcher中对接口状态码进行判断，处理一些业务逻辑，如错误提示、刷新cookie等

待改进

当然它也有未完善的地方，比如说没有支持react-query的infinite hook，这里提供一个我的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const [todoQueryParams, setTodoQueryParams] = useState<GetPendingUsingGET1QueryParams>({});
const [todoData, setTodoData] = useState<TodoPage>();

const {
	isLoading: isTodoLoading,
	isFetching: isTodoFetching,
	isError: isTodoError,
} = useGetPendingUsingGET1(
	{ queryParams: todoQueryParams },
	{
		keepPreviousData: true,
		onSuccess: (next) => {
			// 处理合并前次数据
		},
	}
);

小结一下

在新项目中使用下来，相对于其他swagger生成代码方案（Pont、openapi等）它使用起来简单很多，而且再结合上 react-query 的强大请求处理能力，相信你在用到项目中后也能感受到它真的香~