R
Refine

ask-any-question

useCustomMutation is persisting the header.

Oother-emerald9/28/2023
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.
Kkapa.ai9/28/2023
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: ----------------------
Kkapa.ai9/28/2023
<@630780519378059276> kapa.ai is still learning and improving, please let us know how it did by reacting below
Oother-emerald9/28/2023
@kapa.ai No, I am not setting this header anywhere else in the code. And I am using default data provider.
Kkapa.ai9/28/2023
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: ----------------------
Kkapa.ai9/28/2023
<@630780519378059276> kapa.ai is still learning and improving, please let us know how it did by reacting below
Oother-emerald9/28/2023
@kapa.ai are headers passed through meta or config?
Kkapa.ai9/28/2023
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: ----------------------
Kkapa.ai9/28/2023
<@630780519378059276> kapa.ai is still learning and improving, please let us know how it did by reacting below
Aabsent-sapphire9/29/2023
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.
Oother-emerald9/29/2023
Sure @aliemirs. I will open a PR for the same.
Oother-emerald9/29/2023
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...
Aabsent-sapphire9/29/2023
@desithharra checking it now! Thank you! 🚀

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Sider menu items not showing upHey everyone, I have a problem where `useMenu` does return a list of 2 items but the `renderSider` Mremove siderI want to remove antd sider programatically.antdesign sider menu popup hangs on collapsedwhen manually setCollapsed(true) on antdesign sider, the selected key menu popup will lingeruseGetToPath error<Button onClick={() => { go({ to: getToPath({ useEditableTable tableProps datatypehi, i have a question. why do the dataSource inside the tableprops property from useEditableTable oReact Query Options: Enabled change does not disable/pause requestsHi everyone, I am currently developing a page that incorporates various filters, some of which can AuthPage AntDIs there a convenient way to only render the autProvider section in the AuthPage (LoginPage) and do Seeking Advice: Choosing Refine JS for News Website Admin Dashboard?Hey everyone, I'm a beginner developer, and I'm working on a news website project that needs an admSite Title refine v4Hey, I want to change site title. The one which appear on chrome tab. I am update site logo(favicon)Is there any way to prevent hook from calling api if variable is still undefined?Is there any way to prevent hook from calling api if variable is still undefined in a single componeDragger on drop = false still calling api on dragdragger is calling api when there is no actionUsing refine as an admin panel (beginner)I am building admin panel for news website to upload, delete, update and overall controll news conterename refine default create button in the listhow to rename create button in list which is coming by giving create resourceInvalid hook call. Hooks can only be called inside of the body of a function componenthello, i got this error Invalid hook call. Hooks can only be called inside of the body of a functuseEditableTableHi, i notice that whenever I tried to fetch data using useEditableTable it sends the query with thisuseEditableTable short glitchI'm looking at `useEditableTable` from antd and the thing is there is a short glitch when pressingUpgrade Ant Design from v4 to v5 not workingI am trying to upgrade Ant Design from v4 to v5 so that I can upgrade Refine. As per your docs, I amHandle Errors inside of Forms being posted to a custom APIHey everyone! We're using Refine to such a great extend and I'm very thankful for all the work that How can I just see the current fields value?So this seems like a really dumb question, but using refine, its really difficult to use the value oHow to hide edit button action on specific row at list resourcehiding edit action for specific data in list resource