magic-amber•2y 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•2y 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•2y ago

<@886127984711438378> kapa.ai is still learning and improving, please let us how it did by reacting below

magic-amberOP•2y 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

ratty-blush•2y ago

@haribo_mushi I didn't understand. Where do I have to place these headers?

absent-sapphire•2y ago

Hello @desithharra you can pass it to the mutate or mutateAsync hooks's config prop.

useCustomMutation is persisting my headers

Did you find this page helpful?