How can I include response data to axios response? - reactjs

Question

I try to work with Axios interceptors. The problem I'm facing is that I can't show the response I got from the API with Axios or even if it does, it shows constant data.
axios.defaults.baseURL = 'https://localhost:5001/api/';
axios.defaults.withCredentials = true;
const responseBody = res => res.data;
axios.interceptors.response.use(async response => {
const pagination = response.headers["x-pagination"];
if (pagination) {
const parsed = JSON.parse(pagination);
let metaData = {
currentPage: parsed.currentPage,
pageSize: parsed.pageSize,
totalPages: parsed.totalPages,
totalCount: parsed.totalCount
};
response.data = {
metaData,
data: response.data //I want to change this data
// For example there is an endpoint named getAll and it returns all object
// Also there is a get endpoint and it returns a single object
// But the problem is axios always return getAll endpoint's data.
};
return response;
}
}, error => {
return Promise.reject(error);
});
This is my request object
const requests = {
get: (url, params) => axios.get(url, {params}).then(responseBody),
post: (url, data) => axios.post(url, data).then(responseBody),
put: (url, data) => axios.put(url, data).then(responseBody),
delete: (url) => axios.delete(url).then(responseBody),
postForm: (url, data) => axios.post(url, data, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(responseBody),
putForm: (url, data) => axios.put(url, data, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(responseBody)
};
and this is my API endpoints
const Endpoints = {
getAll: () => requests.get('Endpoint'),
get: (id) => requests.get(`Endpoint/${id}`),
create: (data) => requests.postForm('Endpoint', data),
update: (id, data) => requests.putForm(`Endpoint/${id}`, data),
delete: (id) => requests.delete(`Endpoint/${id}`),
}
What am I missing? Also, I use Redux Slice. If you want I can also send the redux code I write.

Answer 1

axios.interceptors.response.use(async response => {
const pagination = response.headers["x-pagination"];
if (pagination) {
const parsed = JSON.parse(pagination);
let metaData = {
currentPage: parsed.currentPage,
pageSize: parsed.pageSize,
totalPages: parsed.totalPages,
totalCount: parsed.totalCount
};
response.data = {
metaData,
data: response.data
};
return response;
}
return response; // problem solved after this
}, error => {
return Promise.reject(error);
});
The problem is I forget to return the response so that's why I always get the same data.