Axios Removal and Its Impact on Sitecore JSS Developers
As part of the 22.4 release of Sitecore JavaScript Services (JSS), Sitecore has made a significant change: they have removed the Axios dependency from all core @sitecore-jss packages. This change marks a strategic move towards a more efficient and flexible way of handling HTTP requests in JSS applications. For developers who have been using Axios, it’s important to understand what this change means and how to adapt to the new approach effectively.
In this blog, we will explore its impact on Sitecore JSS developers, and guide you through a smooth transition to the new recommended practices.
Impacts and alternatives
This update impacts JSS applications that currently rely on Axios as the default fetching method, including those built with:
- Next.js
- React
- Vue
Sitecore is saying goodbye to Axios as the default fetching method. Instead, JSS now leverages its native data fetcher, built on Node.js’s built-in fetch functionality.
So the key changes have been made to align with the new native data fetching approach:
- AxiosDataFetcher → replaced by NativeDataFetcher
- AxiosDataFetcherConfig → replaced by NativeDataFetcherConfig
- AxiosResponse → replaced by NativeDataFetcherResponse
- NativeDataFetcherError → a new error type introduced for handling native data fetching operations
These updates ensure a smoother, more standardized way of managing HTTP requests in Sitecore JSS applications.
Examples
Below are some samples for the way to replace the existing Axios with NativeDataFetcher in NextJS.
- As part of the transition to NativeDataFetcher, you will need to update your Axios imports across your application. Here’s how to replace them:
| Existing Import | Replacement Import |
| AxiosDataFetcher | NativeDataFetcher |
| AxiosResponse | NativeDataFetcherResponse |
| AxiosDataFetcherConfig | NativeDataFetcherConfig |
- Import the NativeDataFetcher – Replace your existing Axios import with:
import { NativeDataFetcher, NativeDataFetcherResponse } from ‘@sitecore-jss/sitecore-jss-nextjs’;
- Replace the Existing Axios Data Fetcher – Update your data fetching function as follows:
import { NativeDataFetcher, NativeDataFetcherResponse } from ‘@sitecore-jss/sitecore-jss-nextjs’;
export async function dataFetcher<ResponseType>(
url: string,
options?: RequestInit // Updated to use RequestInit instead of unknown
): Promise<NativeDataFetcherResponse> {
return new NativeDataFetcher().fetch<ResponseType>(url, options);
}
and example usage of calling this NativeDataFetcher,
dataFetcher(‘https://example.com/api/data’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({ key: ‘value’ })
})
.then(response => console.log(response))
.catch(error => console.error(‘Fetch error:’, error));
References
Below are the references which has more details and insights,
