HTTP Client
First, I will explain how to use the Core client directly, and then I will describe the optional integration example of the project-wide HTTP adapter used by the auto-generated service.
Direct Use of Core Client
The Paths injected into createHttpClient<Paths>() are the request contracts. The url and method are determined from the keys of Paths, queryString and pathVariable from parameters, and body from requestBody.
The response type is specified by the caller in callApi<R>(). Core does not automatically infer response types from OpenAPI responses.
httpClient.ts
tsResponse shape is selected per API.
typed-rx-http does not enforce ResponseWrapper. If the server response is a wrapper, specify the wrapper type as R; otherwise, specify the actual response type directly.
Option: Project common adapter + auto-generated service
The commonService configuration below is not a mandatory structure of Core, but a project integration pattern that aims to apply authentication, SSR headers, and cache policies to multiple generated services at once.
What the project commonService does
commonService refers to a user-owned file used to consolidate common HTTP policies in the project, not a special class name provided by @byeolnaerim/typed-rx-http. The filename is flexible, and in the example below, the actual project name rxjsHttpService.ts is used.
Instead of repeating createHttpClient for each screen and auto-generated service, this file uses the callApi and callApiStream it generates as a common entry point. Therefore, if you modify the rules for authentication renewal, SSR header transmission, cache, and error handling once, it will apply uniformly to all generated services.
View the entire code of commonService/rxjsHttpService first
1. Minimum complete version
The essence of commonService is the code below. It creates headerStore and typed HTTP client once, and exports callApi/callApiStream for common use by the generated service. uploadFile and createSSEObservable can also be exposed from the same client.
rxjsHttpService.ts
ts2. Expandable version including Next.js + session auth + CSR/SSR cache
Below is a complete project example that adds session auth, SSR headers, and CSR/SSR cache to the same common adapter. If the generated service imports the cache wrapper, this form becomes the standard. Just copy it, then adjust setLogin import, ApiTypes and CacheNames locations, authentication API paths, environment variables, and unauthorized paths to fit your project.
rxjsHttpService.ts
tsRole by code configuration
paths
This is the OpenAPI paths type used by createHttpClient and ServiceArguments to check URL, method, path variable, query, and body types.
headerStore
Stores common headers like Content-Type and Authorization in the browser and shares them with session authentication and RSocket connections.
headersProvider
Returns headerStore in CSR and reads the current request's Cookie and Authorization in SSR to provide different headers for each request.
service
A real typed HTTP client with base URL, common headers, server 401 handling, and default error messages.
sessionAuth
Synchronizes the session token before the request, retries the original Observable once after refreshing if 401, and executes the logout flow on failure.
callApi / callApiStream
Common functions imported by automatically generated general REST service and NDJSON stream service. Both return RxJS Observables.
callApiClientCache / callApiServerCache
A cache wrapper that uses CSR cache in the browser and dynamically loads the SSR cache from @byeolnaerim/typed-rx-http/next on the server.
Method of connecting to the auto-generated service.
The generator calculates the relative path of commonServiceFile and adds imports to each service. The screen imports the generated functions without directly calling the public file, and the generated function converts path, params, and body into ServiceArguments' pathVariable, queryString, and body to pass to callApi.
generateSwagger.cjs
jsA single response is firstValueFrom.
REST APIs that respond once and finish, like search, save, and delete, can be naturally used within existing async functions if received as a generated Observable.firstValueFromIf received as such, it can be used naturally even within the existing async function.
BusinessSearchPage.tsx
tsxOn the screen, paramsonly appears, but the generated service contains the URL, HTTP method, and response type. Query parameters are always{ params: { ... } }passed as.
Multiple responses are subscribed.
Requests that receive multiple values, like task progress or RSocket streams,subscribeare received, and the subscription is canceled when the component disappears.
BatchJobPage.tsx
tsxWhen using callApi directly,
For projects not using the service generator or to check temporary endpoints before generation, you can directly call callApi of the public service. The request type is checked in paths, and the response type is specified generically by the caller.