|
| 1 | +# openapi-fetch-angular |
| 2 | + |
| 3 | +This library is an [openapi-fetch](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch) clone that uses [Angular's HTTPClient API](https://angular.io/api/common/http/HttpClient). |
| 4 | +_Thanks, [@drwpow](https://github.com/drwpow)!_ |
| 5 | + |
| 6 | +> [!CAUTION] |
| 7 | +> This library is still in development. Please report any issues you encounter. |
| 8 | +
|
| 9 | +> [!CAUTION] |
| 10 | +> Currently **only** supports JSON requests and responses. |
| 11 | +
|
| 12 | +## Usage |
| 13 | + |
| 14 | +In order to get started, generate a specification file using [openapi-typescript](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-typescript). |
| 15 | + |
| 16 | +```sh |
| 17 | +# Local schema... |
| 18 | +npx openapi-typescript ./path/to/my/schema.yaml -o ./path/to/my/schem # npm |
| 19 | +yarn dlx openapi-typescript ./path/to/my/schema.d.ts -o ./path/to/my/schema.ts # or yarn |
| 20 | +pnpm dlx openapi-typescript ./path/to/my/schema.d.ts -o ./path/to/my/schema.ts # or pnpm |
| 21 | +# 🚀 ./path/to/my/schema.yaml -> ./path/to/my/schema.d.ts [7ms] |
| 22 | + |
| 23 | +# Remote schema... |
| 24 | +npx openapi-typescript https://example.com/schema.yaml -o ./path/to/my/schema # npm |
| 25 | +yarn dlx openapi-typescript https://example.com/schema.d.ts -o ./path/to/my/schema.ts # or yarn |
| 26 | +pnpm dlx openapi-typescript https://example.com/schema.d.ts -o ./path/to/my/schema.ts # or pnpm |
| 27 | +# 🚀 https://example.com/schema.yaml -> ./path/to/my/schema.d.ts [7ms] |
| 28 | +``` |
| 29 | + |
| 30 | +Then, utilize the generated specification file to make requests. In order to do this, create a service like so: |
| 31 | + |
| 32 | +```ts |
| 33 | +@Injectable({ |
| 34 | + providedIn: "root", |
| 35 | +}) |
| 36 | +export class TestAPIService extends OpenAPIClientService<paths> { |
| 37 | + constructor(httpClient: HttpClient) { |
| 38 | + super(httpClient, { |
| 39 | + baseUrl: "/api", |
| 40 | + // ... options |
| 41 | + }); |
| 42 | + } |
| 43 | +} |
| 44 | +``` |
| 45 | + |
| 46 | +Now, you can use the service to make requests that match the specification: |
| 47 | + |
| 48 | +```ts |
| 49 | +constructor(private api: TestAPIService) {} |
| 50 | + |
| 51 | +const { data, error /*, response*/ } = await this.api.get("/path/to/endpoint"); |
| 52 | +``` |
| 53 | + |
| 54 | +For more information, see the [openapi-fetch documentation](https://openapi-ts.pages.dev/openapi-fetch/). |
| 55 | + |
| 56 | +## Credits |
| 57 | + |
| 58 | +Big thanks to [@drwpow](https://github.com/drwpow) for creating the original openapi-fetch and openapi-typescript library! |
0 commit comments