Getting Started

First, I will explain how to use the typed-rx-http Core client itself, and then describe how to connect the project-owned common HTTP adapter and Swagger auto-generated service only in necessary projects.

1. Install

bash

2. Use Core client directly without auto-generation

First, the most basic usage is createHttpClient<Paths>()to create a client once and call the callApi of that client. Paths is typically the paths type generated from OpenAPI, but you can also use a user-defined type that is compatible with the same structure.

httpClient.ts

The return value is always Observable

callApi and callApiStream return RxJS Observable, not Promise. When using a single response in an async function, explicitly convert it with firstValueFrom or lastValueFrom, and handle requests with multiple values using pipe or subscribe.

3. Option: What is rxjsHttpService/commonService?

What is referred to as rxjsHttpService.ts or commonService.ts in the documentation is not a fixed file name automatically generated by the library. It is the HTTP adapter file directly owned by the project. Multiple automatically generated REST services use the callApi/callApiStream/cache functions exported by this file as a common entry point without creating createHttpClient separately.

The smallest form is to create headerStore and createHttpClient once as shown in the full code below and re-export the library's methods as project functions. If the auto-generated service does not use cache functionality, this level of configuration is sufficient to understand the structure.

rxjsHttpService.ts

To handle session authentication, SSR request-specific Cookie/Authorization, CSR cache, and SSR cache in a single file in an actual Next.js project, it can be extended as shown below. This file is also not an auto-generated item but project code.

rxjsHttpService.ts

The file referred to by commonServiceFile is this file.

The commonServiceFile of the OpenAPI generator is not an option to generate the above file. It specifies the project file path that will import callApi, callApiStream, callApiClientCache, or callApiServerCache. Therefore, the role and export of this file should be determined before setting up the generator.

4. Option: When using Swagger auto-generated service.

After connecting the OpenAPI service generator, you do not rewrite the URL and response type on the screen. Import the generated functions and only pass the necessary path, params, and body.

MemberSearchPage.tsx

tsx

Next document

HTTP Client

Check the complete code of commonService and the role of each component.

Quick Start

First, check the entire usage of the library itself, then follow up with actual call examples from the Front/Backend of the WebFlux + Swagger auto-generated project.

OpenAPI Generator

Check the rules for generating types and services from swagger.json.