XM Cloud Changelog

As part of the 22.4 release of JSS, we've removed the axios dependency from all core @sitecore-jss packages. This dependency was deeply ingrained in core JSS functionality, and its removal enables greater flexibility in how your JSS app can communicate with Sitecore, be that with native node fetching, an alternative fetch library, or one of the latest versions of Axios including current security fixes and features.

Important: As described in the API changes section, the second parameter type of NativeDataFetcher.fetch has changed. Check whether this affects you and make changes as needed.

This product improvement affects JSS apps, based on the following frameworks, that currently use the default Axios fetching method:

• Next.js

• React

• Vue

The native JSS data fetcher, which uses Node.js's built-in fetch functionality, is the new default from 22.4 onwards.

You can learn more about this change, including how to update your existing apps, by referring to the following upgrade guides:

• Next.js (XM Cloud)

• Next.js (SXP)

• React or Vue (SXP)

Import changes

We've removed the Axios-specific imports, which can be replaced with ones relating to the native fetcher as follows:

We've also added a new importable type named NativeDataFetcherError.

RestLayoutService, RestDictionaryService, and some other SXP-specific services now use NativeDataFetcher by default.

API changes

Important: The second parameter of the NativeDataFetcher.fetch method is now RequestInit instead of unknown. If your application is affected by this change, update it to use the new type.

NativeDataFetcher now exposes specific methods for different kinds of requests:

• async get<T>(url: string, options: RequestInit = {})

• async post<T>(url: string, body: unknown, options: RequestInit = {})

• async delete<T>(url: string, options: RequestInit = {})

• put<T>(url: string, body: unknown, options: RequestInit = {})

• head<T>(url: string, options: RequestInit = {})

As before, the fetch method performs a GET request unless you provide a second argument to request options, in which case it performs a POST request.

If you were using a custom, Axios-based fetcher for JSS services, you might find the following sections useful if you want to migrate to NativeDataFetcher.

AxiosDataFetcherOptions vs NativeDataFetcherOptions

Some options used to initialize AxiosDataFetcher are no longer available for NativeDataFetcher, such as request/response interceptors:

• onReq?: (config: AxiosRequestConfig) => AxiosRequestConfig |

• onReqError?: (error: unknown) => unknown;

• onRes?: (serverRes: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>;

• onResError?: (error: unknown) => unknown;

Also, AxiosRequestConfig is no longer used. Instead, RequestInit properties are used in addition to the following:

{
  /**
   * Override debugger for logging. Uses 'sitecore-jss:http' by default.
   */
  debugger?: Debugger;
  /**
   * Override fetch method. Uses native (or polyfilled) fetch by default.
   */
  fetch?: typeof fetch;
  /**
   * Optional request timeout.
   */
  timeout?: number;
};

Any properties passed into the NativeDataFetcher constructor will override request properties on each fetch request.

AxiosResponse vs NativeDataFetcherResponse

Instead of AxiosResponse, NativeDataFetcher returns another data type named NativeDataFetcherResponse with the following properties:

{
  /** HTTP status code of the response (i.e. 200, 404) */
  status: number;
  /** HTTP status text of the response (i.e. 'OK', 'Bad Request') */
  statusText: string;
  /** Response content */
  data: T;
  /** header */
  headers?: HeadersInit;
}