vicious-gold•16mo ago

useCustomMutation is persisting the header.

I am passing a header in useCustomMutation for a single API call using config field. For all the subsequent calls, I am getting the same header in the API calls. So, I have set Content-Type: multipart/form-data for one API call but this header is getting persisted for all the API calls until I refresh the page. All the other API calls should have Content-Type: application/json.

12 Replies

kapa.ai•16mo ago

Hi @desithharra. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useCustomMutation hook in Refine allows you to specify headers for a specific mutation request. However, it doesn't persist these headers for subsequent API calls. The headers you specify in the config field of the useCustomMutation hook are only applied to that specific mutation request. Here's an example of how you can set headers for a specific mutation request:

const { mutate } = useCustomMutation();  
  
mutate({  
 config: {  
 headers: {  
 "Content-Type": "multipart/form-data",  
 },  
 },  
});

const { mutate } = useCustomMutation();  
  
mutate({  
 config: {  
 headers: {  
 "Content-Type": "multipart/form-data",  
 },  
 },  
});

If you're seeing the Content-Type: multipart/form-data header persisting across multiple API calls, it might be due to some other part of your code. You might be setting this header globally somewhere in your application, or your data provider might be persisting headers across requests. For all other API calls, you can set the Content-Type to application/json in a similar way:

const { mutate } = useCustomMutation();  
  
mutate({  
 config: {  
 headers: {  
 "Content-Type": "application/json",  
 },  
 },  
});

const { mutate } = useCustomMutation();  
  
mutate({  
 config: {  
 headers: {  
 "Content-Type": "application/json",  
 },  
 },  
});

Remember, these headers are only applied to the specific mutation request made by the useCustomMutation hook. They won't affect other API calls made by your application. If you're still having trouble, I recommend checking your data provider and any other parts of your code where you might be setting headers. If you're using a custom data provider, make sure it's not persisting headers across requests. For more information, you can refer to the useCustomMutation documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

vicious-goldOP•16mo ago

@kapa.ai No, I am not setting this header anywhere else in the code. And I am using default data provider.

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the extracts, it seems like there might be an issue with how headers are being handled in your application. The meta property in Refine's hooks, such as useForm and useCustomMutation, allows you to pass additional information like headers to data provider methods. However, these headers should only apply to the specific request made by the hook and should not persist across multiple API calls. Here's an example of how you can pass headers using the meta property:

useForm({  
 meta: {  
 headers: { "x-meta-data": "true" },  
 },  
});

useForm({  
 meta: {  
 headers: { "x-meta-data": "true" },  
 },  
});

If you're seeing the Content-Type: multipart/form-data header persisting across multiple API calls, it might be due to some other part of your code or an issue with the data provider. Since you're using the default data provider and not setting this header anywhere else in your code, this behavior is unexpected. Unfortunately, without more information, it's difficult to determine the exact cause of this issue. I recommend checking your code again to ensure that the header isn't being set globally or persisted in some other way. If the issue persists, you might want to consider reaching out to the Refine community or opening an issue on the Refine GitHub repository for further assistance. For more information on how to use the meta property, you can refer to the General Concepts documentation (https://refine.dev/docs/api-reference/general-concepts/#meta). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

vicious-goldOP•16mo ago

@kapa.ai are headers passed through meta or config?

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, headers can be passed through both meta and config properties depending on the context. For hooks like useForm, useSelect, useTable, useAutocomplete, useDataGrid, and others, headers can be passed through the meta property. Here's an example:

useForm({  
 refineCoreProps: {  
 meta: {  
 headers: { "x-meta-data": "true" },  
 },  
 },  
});

useForm({  
 refineCoreProps: {  
 meta: {  
 headers: { "x-meta-data": "true" },  
 },  
 },  
});

For more information, refer to the useForm documentation (https://refine.dev/docs/api-reference/mantine/hooks/form/useForm/). In the useCustomMutation hook, headers can be passed through the config property. Here's an example:

const { mutate } = useCustomMutation();  
  
mutate({  
 config: {  
 headers: { "x-meta-data": "true" },  
 },  
});

const { mutate } = useCustomMutation();  
  
mutate({  
 config: {  
 headers: { "x-meta-data": "true" },  
 },  
});

For more information, refer to the useCustomMutation documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation/). Remember, these headers are applied to the specific request made by the hook and won't affect other API calls made by your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

correct-apricot•16mo ago

Hey @desithharra, sorry for the issue 🙏 Just checked the source code for the @refinedev/simple-rest and identified the issue; all the other methods set the headers per request but the custom method (used in useCustom and useCustomMutation) sets the headers using client.defaults.headers. This causes the headers to persist in subsequent api calls. If you want, you can run the swizzle command to export the simple rest data provider and customize those lines for your project. Or you can open a PR for a fix (We'll be happy to see one!) and we can quickly have it released for everyone 🚀 Otherwise, we've added this bug to our todo list and will try to release a fix as soon as possible.

vicious-goldOP•16mo ago

Sure @aliemirs. I will open a PR for the same.

vicious-goldOP•16mo ago

Hey @aliemirs! Please check this out. https://github.com/refinedev/refine/pull/5036

GitHub

fix(simple-rest): fix persistent headers issue in custom method by ...

Closing issues Closes #5035 Self Check before Merge Corresponding issues are created/updated or not needed Docs are updated/provided or not needed Examples are updated/provided or not needed T...

correct-apricot•16mo ago

@desithharra checking it now! Thank you! 🚀

useCustomMutation is persisting the header.

Did you find this page helpful?