extended-salmon
extended-salmonβ€’2y ago

How to use response of POST request in custom page?

I want to use the response that I get back from the post request to create an resource. I cannot get the same response back using any endpoint so is there a way to capture the response that I get back from post request and display on a custom page. For example: I get back a response after a successful POST request as
{
created: [
{
id: 1,
title: 'some title'
},
],
failed: {}
}
{
created: [
{
id: 1,
title: 'some title'
},
],
failed: {}
}
Now I want to use this response and give user a feedback of what has been created and failed, instead of redirecting to list page.
18 Replies
ambitious-aqua
ambitious-aquaβ€’2y ago
Guessing this request is sent from useForm hook, you can access the response from the queryResult property. To disable redirect, you can set redirect: false Also if you have notification provider set up, you can get the response and display a custom notification through successNotification property But to do this, you need to work in mutationMode: pessimistic
ambitious-aqua
ambitious-aquaβ€’2y ago
https://refine.dev/docs/api-reference/core/hooks/useForm/ check out the core useForm docs for more info
useForm | refine
useForm is a hook that allows to manage forms. It has some action methods that create, edit and clone the form. The hook return value comes to according to the called action and it can run different logic depending on the action.
extended-salmon
extended-salmonβ€’2y ago
Hey @aliemirs, Can my successnotification can be a type of page? Where I can display a list of values that have been created instead of showing a pop up?
ambitious-aqua
ambitious-aquaβ€’2y ago
You can do a redirect manually in onMutationSuccess callback Hope this works for your case πŸš€
extended-salmon
extended-salmonβ€’2y ago
Okay I can do redirect manually but how can I have the queryResult from form to the redirected page?
ambitious-aqua
ambitious-aquaβ€’2y ago
I think using URL params is the best choice.
extended-salmon
extended-salmonβ€’2y ago
That will be a very long url params. Isn't there a way to set a dummy query using some key and get that in the custom page. As of setQueryData using the react query?
ambitious-aqua
ambitious-aquaβ€’2y ago
I think this is achievable but not sure, let me try this and get back to you
optimistic-gold
optimistic-goldβ€’2y ago
Hey @dipbazz, Could you try queryClient.getMutationCache for access your mutationCache?
extended-salmon
extended-salmonβ€’2y ago
Hi @salihozdemir, I will try that and get back to you.
optimistic-gold
optimistic-goldβ€’2y ago
You can access your queryCache with queryKey using the queryClient.getQueryData but I'm not sure how can you access your mutationCache Great, I hope it helps πŸ™πŸ» Btw, you can see more information on the https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientgetmutationcache
ambitious-aqua
ambitious-aquaβ€’2y ago
Hey @dipbazz, while checking your question, we've thought it will be nice to have the ability to pass custom options to the mutations. (In your case it can be a custom mutation key to access is later easily) Here's the PR for it https://github.com/refinedev/refine/pull/3324 We'll try to finish this as soon as possible and deploy πŸš€
extended-salmon
extended-salmonβ€’2y ago
Hey @aliemirs, its great to hear that my simple question turned out to be a feature ❀️ , but how am I supposed to use the mutationOptions when new version is available? Will it solve my specific requirement? Currently I have solved it by using a hacky way by checking isSuccess flag from mutationResult and returning new component with the response after mutation successful. I am not sure if this is the correct way but works fine for me till now.
ambitious-aqua
ambitious-aquaβ€’2y ago
You will be able to pass a custom mutationKey and use this key to access to the mutation response as @salihozdemir suggested πŸ™ Hey @dipbazz, I don't know if you're still looking for a different approach to handle your case or happy with the current result but the feature we've talked about above is released and ready to use πŸš€
extended-salmon
extended-salmonβ€’2y ago
Hey @aliemirs, Thank you for the feature. I will be happy to try it and see if that works for me. Please can you provide me the link of the documentation.
ambitious-aqua
ambitious-aquaβ€’2y ago
Let me try to create an example for you. Documentation is now in progress hopefully we'll have something to share with you by the end of today. πŸ™
ambitious-aqua
ambitious-aquaβ€’2y ago
Created an example with our base-antd example using useForm here https://stackblitz.com/edit/github-nhfjnf?file=src/pages/posts/create.tsx Only change in create is in the useForm hook, I added a comment above, you can check that. Also added a CreateResults component to get and show the mutation results data and used in list page. Hope this helps, you might still want to stick with your solution but just to keep in mind there's this alternative now too πŸŽ‰
Refine Base Antd Example - StackBlitz
Run official live example code for Refine Base Antd, created by Refinedev on StackBlitz
extended-salmon
extended-salmonβ€’2y ago
Hey @aliemirs, Thanks for the example project. I have now understood the concept of using mutationKey. I have also tested the example project and it is working as expected, but I have some questions regarding this mutationKey, If we create multiple items one after another all those items remain under same mutationKey, but what I want is access last response and clear out the previous cache data and only get the response from last mutation. Is there a way to achieve that?