equal-aqua
equal-aqua14mo ago

useCustomMutation is persisting my headers

so basically I am trying to run mutateAsync function from this hook and I noticed that after this my axios instance ends up persisting its Content-Type header for every follow up request that has body or data. This function call is overriding my headers. Seems like a bug
const config = {
"headers": {
"Content-Type": 'multipart/form-data;'
}
}

try {
const { data, } = await mutateAsync({
url: options?.action,
method: "patch",
config,
values: formData,
......
const config = {
"headers": {
"Content-Type": 'multipart/form-data;'
}
}

try {
const { data, } = await mutateAsync({
url: options?.action,
method: "patch",
config,
values: formData,
......
when in fact the header should only be for this one off request,
5 Replies
kapa.ai
kapa.ai14mo ago
Hi @haribo_mushi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information extracts provided, I can't find a direct solution to your issue. However, I can suggest a workaround to reset the headers after the mutateAsync call. Instead of modifying the axiosInstance headers directly, you can create a new instance with the required headers for this specific request. This way, the headers won't persist for other requests. Here's an example of how you can achieve this:
const customAxiosInstance = axios.create({
headers: {
"Content-Type": "multipart/form-data;",
},
});

try {
const { data } = await mutateAsync({
url: options?.action,
method: "patch",
config: {
headers: customAxiosInstance.defaults.headers,
},
values: formData,
// ...
});
// ...
} catch (error) {
// Handle error
}
const customAxiosInstance = axios.create({
headers: {
"Content-Type": "multipart/form-data;",
},
});

try {
const { data } = await mutateAsync({
url: options?.action,
method: "patch",
config: {
headers: customAxiosInstance.defaults.headers,
},
values: formData,
// ...
});
// ...
} catch (error) {
// Handle error
}
This creates a new axios instance with the required headers and uses it only for this specific request. The original axiosInstance remains unchanged and won't have the "Content-Type" header for other requests. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai14mo ago
<@886127984711438378> kapa.ai is still learning and improving, please let us how it did by reacting below
equal-aqua
equal-aqua14mo ago
if anyone stumbles across it the issue was with how custom function is provided by the refine boilerplate for the simple-rest data provider in the custom function it sets the headers default which overrides the axios instance default header for the axios instance.
// if (headers) {
// httpClient.defaults.headers = {
// ...httpClient.defaults.headers,
// ...headers,
// };
// }
// if (headers) {
// httpClient.defaults.headers = {
// ...httpClient.defaults.headers,
// ...headers,
// };
// }
this was the culprit. to resolve it
const defaultHeaders = axiosInstance.defaults.headers.common;
const config = {
headers: {
...defaultHeaders,
...(headers ?? {}),
},
};
const defaultHeaders = axiosInstance.defaults.headers.common;
const config = {
headers: {
...defaultHeaders,
...(headers ?? {}),
},
};
and then pass on the config to the axios instance call. Now I went with common since my defaults have been set for the common. You can update it differently for diff methods
quickest-silver
quickest-silver11mo ago
@haribo_mushi I didn't understand. Where do I have to place these headers?
multiple-amethyst
multiple-amethyst10mo ago
Hello @desithharra you can pass it to the mutate or mutateAsync hooks's config prop.