adverse-sapphire•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•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•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.

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

You can do a redirect manually in onMutationSuccess callback Hope this works for your case 🚀

adverse-sapphire•2y ago

Okay I can do redirect manually but how can I have the queryResult from form to the redirected page?

ambitious-aqua•2y ago

I think using URL params is the best choice.

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

I think this is achievable but not sure, let me try this and get back to you

exotic-emerald•2y ago

Hey @dipbazz, Could you try queryClient.getMutationCache for access your mutationCache?

adverse-sapphire•2y ago

Hi @salihozdemir, I will try that and get back to you.

exotic-emerald•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•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 🚀

adverse-sapphire•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•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 🚀

adverse-sapphire•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•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•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

adverse-sapphire•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?