After some research on Stack Overflow, I came across a solution that inspired me to create my own custom approach.
To implement this, I developed a unique function called baseQueryWithChange that allows for a global transformation of all query responses by wrapping it around the existing baseQuery.
A specialized function for transforming API responses:
export const changeResponse = async (list) => {
const dataArray = list.data
console.log(dataArray) // 10 elements
const finalArray = await dataArray.filter((each) => each.length !== 1) // 6 elements
const normalizeData = (data) => {
return data.flatMap((d) => {
return { ...d[0], ...d[1] };
});
};
const latestList = normalizeData(finalArray)
console.log(normalizeData(finalArray)); // 6 elements
return latestList
}
The foundation of the baseQuery:
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
// import function to transform API response
import { changeResponse } from "../../constants/changeResponse";
const baseQuery = fetchBaseQuery({
baseUrl: "http://localhost:3500"
})
const baseQueryWithChange = async (args, api, extraOptions) => {
let result = await baseQuery(args, api, extraOptions);
if (result.data) {
result.data = changeResponse(result.data)
console.log(result.data)
}
return result
}
export const apiSlice = createApi({
baseQuery: baseQueryWithChange,
endpoints: builder => ({})
})