如何在 React 中使用生成的 OpenAPI 客户端？

Question

我已经用 openapi-generator-cli generate -i https://linktomybackendswagger/swagger.json -g typescript-axios -o src/components/api --additional-properties=supportsES6=true

生成了我的 API 客户端

现在我的项目中有了所有文件，但我不知道如何实现它。如何实例化 API？我在哪里配置要使用的访问令牌？我如何知道端点的每个方法名称？

经过 2 小时的谷歌搜索后，我似乎找不到有关最基本设置问题的文档。也许我只是在错误的地方寻找。有人能指出我正确的方向吗？

Answer 1

好的，所以我想出了一个我认为很干净的方法，我将在此处为其他走相同路径的人记录下来，即：

使用正在使用 Authorization: Bearer <Token here>
使用 -g typescript-axios

openapi-generator-cli

使用 OAS3

假设您有一个名为 UserPolicies 的端点。通过 CLI 生成代码后，每个端点将在生成的文件 api.ts 中拥有自己的 class，名称扩展如下 UserPoliciesApi.

要使用该端点，需要进行以下设置。

示例：内部 UserPolicyList.tsx：

import { UserPoliciesApi } from './components/api/api';
import { Configuration } from './components/api/configuration';

const openapiConfig = new Configuration();
  openapiConfig.baseOptions = {
    headers: { Authorization: 'Bearer ' + cookies.access_token },
  };
const openapi = new UserPoliciesApi(openapiConfig);

假设您想为 api/Policies 进行 GET 调用，您可以使用：

openapi.userPoliciesGetPolicies.then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
});

现在，我发现这种设计的不便之处在于进行简单 api 调用所需的样板代码。我希望能够简单地进行一次导入，并且已经有了 access_token 设置。

所以我创建了一个包装器 class 像这样 MyApi.tsx:

import { Cookies } from 'react-cookie';
import { Configuration } from './components/api/configuration';

class MyApi {
  private cookies: Cookies;

  constructor() {
    this.cookies = new Cookies();
  }

  private accessToken = () => {
    return this.cookies.get('access_token');
  };

  private configuration = () => {
    const openapiConfig = new Configuration();
    openapiConfig.baseOptions = {
      headers: { Authorization: 'Bearer ' + this.accessToken() },
    };
    return openapiConfig;
  };

  public userPoliciesApi = () => {
    const api = new UserPoliciesApi(this.configuration());
    return api;
  };
}

export default MyApi.tsx;

现在我可以很容易地替换样板并用这个调用：

里面 UserPolicyList.tsx:

import { MyApi } from './components/myapi/MyApi.tsx';

const api = new MyApi();

api.userPoliciesApi.userPoliciesGetPolicies.then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
});

如何在 React 中使用生成的 OpenAPI 客户端？

How to use generated OpenAPI client inside React?

reactjs

typescript

axios

openapi

openapi-generator