Portal integration

Wire @sumx/http-client into a Next.js portal. The kit owns the factory and interceptors; the host owns API base env mapping (see API bases & env).

1. Install


pnpm add @sumx/http-client axios

2. Project layout

File	Role
`src/config/api-bases.config.ts`	`API_BASE_ENV_CONFIG`, fallbacks, `ApiBaseKey` type
`src/axios/bases.ts`	`createApiBasesFromEnv(...)` → `API_BASES`
`src/axios/axiosInstance.ts`	`createSumxHttpClient({ apiBaseEnvConfig, … })`
`src/axios/axios.d.ts`	Narrow `AxiosRequestConfig.apiBase` to `ApiBaseKey`
`src/pages/api/bff/[apiBase]/[...path].ts`	BFF proxy to upstream

3. Minimal factory call


import { createSumxHttpClient } from '@sumx/http-client';
import { API_BASE_ENV_CONFIG, API_BASE_ENV_FALLBACK } from '@/config/api-bases.config';
import { API_BASES } from './bases';
 
export const {
  axiosInstance,
  httpRequestUpdated,
  httpRequest,
  createHttpRequest,
  cancelPendingBrowserApiRequests,
  powerBIBaseURL,
} = createSumxHttpClient({
  apiBaseEnvConfig: API_BASE_ENV_CONFIG,
  apiBaseEnvFallback: API_BASE_ENV_FALLBACK,
  apiBases: API_BASES,
  getEnvValue,
  isLoggedIn: getIsLoggedInState,
  isCrossTabSessionDialogActive,
  captureAndApplyUserRequestContextHeaders,
  applyUserRequestContextHeaders,
  onUnauthorized: () => clearAllSessionAndLocalStates(),
  navigateToClientErrorPage: navigateToClientErrorPageIfNeeded,
});

defaultApiBase (core) and powerBiApiBaseKey (powerBi) are package defaults when omitted.

4. Feature pattern

Use httpRequestUpdated in services/ (see Package API for full signature and examples). Use TanStack Query in actions/.


// services/foo.service.ts — no React
import { httpRequestUpdated } from '@/axios/axiosInstance';
import { httpMethods } from '@/enums';
 
export const listFoo = (params: FooParams) =>
  httpRequestUpdated<FooDto[]>('/foo', httpMethods.GET, params);
 
// actions/foo.action.ts
export const useListFoo = (params: FooParams) =>
  useQuery({ queryKey: ['foo', params], queryFn: () => listFoo(params) });

Other helpers from the same factory: httpRequest, createHttpRequest, axiosInstance, cancelPendingBrowserApiRequests, powerBIBaseURL — documented in Package API.

5. Session timeout

Pass cancelPendingBrowserApiRequests from @sumx/ssr-auth-react check-token deps so in-flight browser API calls abort when the cross-tab session dialog is shown.

6. Next.js


// next.config.js
transpilePackages: ['@sumx/http-client'],

See Troubleshooting for common integration issues.