Cliente HTTP
Primero se explica cómo usar directamente el cliente Core, y luego se explica el adaptador HTTP común del proyecto que utiliza el servicio de generación automática como un ejemplo de integración opcional.
Uso directo del cliente Core
Los Paths inyectados en createHttpClient<Paths>() son el contrato de solicitud. La url y el método provienen de la clave de Paths, queryString y pathVariable de los parámetros, y el body se determina en requestBody.
El tipo de respuesta es R de callApi<R>() que especifica el llamador. Core no infiere automáticamente el tipo de respuesta de las respuestas de OpenAPI.
httpClient.ts
tsLa forma de respuesta se elige por API.
typed-rx-http no obliga a usar ResponseWrapper. Si la respuesta del servidor es un wrapper, se especifica el tipo de wrapper como R, de lo contrario, se especifica el tipo de respuesta real.
Opcional: adaptador común del proyecto + servicio de generación automática
La configuración de commonService a continuación no es una estructura obligatoria del Core, sino un patrón de integración de proyecto que busca aplicar autenticación, encabezados SSR y políticas de caché a varios servicios generados a la vez.
Lo que hace el commonService del proyecto
commonService no es un nombre de clase especial proporcionado por @byeolnaerim/typed-rx-http, sino un archivo de propiedad del usuario que se utiliza para reunir políticas HTTP comunes en el proyecto. El nombre del archivo es libre y en el siguiente ejemplo se utiliza el nombre real del proyecto, rxjsHttpService.ts.
No se repite createHttpClient en la pantalla y en cada servicio generado, se utiliza callApi y callApiStream generados por este archivo como punto de entrada común. Por lo tanto, si se modifica una vez la regla de renovación de autenticación, transmisión de encabezados SSR, caché y manejo de errores, se aplica de manera uniforme a todos los servicios generados.
Ver el código completo de commonService/rxjsHttpService desde el principio.
1. Mínimo completo
La esencia de commonService es el siguiente código. Se crea una vez el headerStore y el cliente HTTP tipado, y el servicio generado exporta callApi/callApiStream para uso común. uploadFile y createSSEObservable también se pueden exponer directamente desde el mismo cliente.
rxjsHttpService.ts
ts2. Next.js + autenticación de sesión + extensión que incluye caché CSR/SSR
A continuación se muestra un ejemplo completo del proyecto que agrega autenticación de sesión, encabezados SSR y caché CSR/SSR al mismo adaptador público. Si el servicio generado importa el envoltorio de caché, esta forma se convierte en la referencia. Solo necesita copiarlo, ajustar la importación de setLogin, las ubicaciones de ApiTypes y CacheNames, la ruta de la API de autenticación, las variables de entorno y la ruta no autorizada según su proyecto.
rxjsHttpService.ts
tsRol según la composición del código
paths
Tipo de OpenAPI paths utilizado por createHttpClient y ServiceArguments para verificar URL, método, variable de ruta, consulta y tipo de cuerpo.
headerStore
Almacena encabezados comunes como Content-Type y Authorization en el navegador y los comparte con la autenticación de sesión y la conexión RSocket.
headersProvider
CSR devuelve headerStore y SSR lee las Cookies y Authorization de la solicitud actual, proporcionando encabezados diferentes para cada solicitud.
service
Cliente HTTP tipado real con URL base, encabezados comunes, manejo de errores 401 del servidor y mensajes de error predeterminados.
sessionAuth
Sincroniza el token de sesión antes de la solicitud y, si es 401, vuelve a intentar el Observable original una vez después de refrescar; si falla, ejecuta el flujo de cierre de sesión.
callApi / callApiStream
Funciones comunes importadas por el servicio REST generado automáticamente y el servicio de flujo NDJSON. Ambos devuelven un Observable de RxJS.
callApiClientCache / callApiServerCache
Wrapper de caché que utiliza la caché CSR en el navegador y carga dinámicamente la caché SSR de @byeolnaerim/typed-rx-http/next en el servidor.
Forma de conectarse al servicio generado automáticamente
El generador calcula la ruta relativa del commonServiceFile e inserta importaciones en cada servicio. La pantalla no llama directamente a archivos públicos, sino que importa funciones generadas, y la función generada convierte path, params, body en pathVariable, queryString, body de ServiceArguments para pasarlos a callApi.
generateSwagger.cjs
jsUna sola respuesta es firstValueFrom.
APIs REST que responden una vez y terminan, como búsqueda, almacenamiento y eliminación, pueden recibir el Observable generado.firstValueFromy se pueden usar naturalmente dentro de funciones async existentes.
BusinessSearchPage.tsx
tsxEn la pantalla, paramssolo se muestra,transmiten como { params: { ... } }.pero dentro del servicio generado hay URL, método HTTP y tipo de respuesta. Los parámetros de consulta siempre se
Varios respuestas son suscribirse
Las solicitudes que reciben varios valores, como el progreso de la tarea o el stream de RSocket,subscribese reciben y se desuscriben cuando el componente desaparece.
BatchJobPage.tsx
tsxSi usas callApi directamente
En proyectos que no utilizan el generador de servicios o para verificar endpoints temporales antes de la generación, se puede llamar directamente a callApi del servicio público. El tipo de solicitud se verifica en paths y el tipo de respuesta es especificado genéricamente por el llamador.