在openapi-typescript项目中实现SWR对非GET请求的支持

在实际开发中，我们经常会遇到需要从POST请求获取数据的场景。虽然RESTful规范建议使用GET方法获取数据，但现实情况往往更为复杂。本文将探讨如何在openapi-typescript的SWR集成中实现对非GET请求的支持。

问题背景

在标准的RESTful API设计中，GET方法通常用于数据获取。然而实际项目中，我们可能会遇到以下特殊情况：

1. 服务器端对GET请求参数长度有限制
2. 需要传递复杂数据结构作为参数
3. 历史遗留API设计
4. 安全考虑需要将敏感参数放在请求体中

这些情况都可能导致我们需要通过POST方法来获取数据，而openapi-typescript默认的SWR集成只支持GET请求。

技术实现分析

openapi-typescript的SWR集成内部使用了一个简单的fetcher函数，其核心实现如下：

async ([_, path, init]) => {
  const res = await client.GET(path, init);
  if (res.error) {
    throw res.error;
  }
  return res.data;
}

可以看到，该方法强制使用了GET方法，因此类型系统也限制了只能使用GET端点。

解决方案

方案一：自定义SWR Hook

我们可以创建一个自定义Hook来支持POST请求：

import useSWR from "swr";
import createClient from "openapi-fetch";
import type { paths } from "./api-types";

const client = createClient<paths>();

function usePostQuery<Path extends keyof paths>(
  path: Path,
  body: paths[Path]["post"]["requestBody"]["content"]["application/json"]
) {
  return useSWR([path, body], async ([path, body]) => {
    const res = await client.POST(path, { body });
    if (res.error) throw res.error;
    return res.data;
  });
}

这个自定义Hook提供了与原生useQuery相似的体验，同时支持POST请求。

方案二：扩展库功能

从库设计角度，可以考虑添加一个更通用的useFetch Hook：

function useFetch<M extends keyof paths[P], P extends keyof paths>(
  method: M,
  path: P,
  config?: RequestConfig<M, P>
) {
  // 实现细节
}

这样设计可以提供更大的灵活性，支持所有HTTP方法。

最佳实践建议

1. 缓存策略：对于数据获取的POST请求，确保设置合理的缓存键，通常应该包含请求体内容
2. 类型安全：充分利用TypeScript泛型来保持类型安全
3. 错误处理：统一错误处理逻辑，与项目中其他数据获取方式保持一致
4. 性能优化：考虑实现请求去重，避免相同参数的重复请求

总结

虽然openapi-typescript的SWR集成默认只支持GET请求，但通过自定义Hook或扩展库功能，我们可以轻松实现对非GET请求的支持。这种灵活性在处理现实世界中的API时尤为重要，开发者可以根据实际需求选择最适合的解决方案。

对于长期项目，建议考虑向开源社区贡献这些扩展功能，让更多开发者受益。在实现时要注意保持类型安全和良好的开发者体验，同时遵循SWR的最佳实践。