itchy-amethyst•3w ago

onMutateSuccess in useForms hook not calling after successful create/edit call

I was trying to figure out why my redirects aren't working after submitting. After a bit of diving, i figured that even after a successful create/edit action, the onMutateSuccess hook doesn't actually gets called by the form, hence no redircting. However, the notification does show successful call. I wonder if anyone have experienced something like this before? btw I am using ANT ui , next, and supabase. best!

14 Replies

kapa.ai•3w ago

Hi @GRB221009A. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're experiencing an issue where the onMutationSuccess callback in the useForm hook is not being called after a successful create/edit action, which is preventing your redirects from working. This issue has been noted before, particularly when using the Supabase data provider with refine. Possible Cause and Solution The issue might be related to the Supabase data provider not returning data by default after a mutation. According to the Supabase documentation, you need to specify the fields you want to return by appending select() at the end of the query. This behavior has been discussed in the refine community as well. Steps to Fix 1. Specify Fields to Return: You need to specify the fields you want to return in the meta property of the useForm hook.

const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
        console.log({ data, variables, context, isAutoSave });
        // Add your redirect logic here
    },
});

const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
        console.log({ data, variables, context, isAutoSave });
        // Add your redirect logic here
    },
});

2. Check Supabase Response: Ensure that the Supabase client is configured correctly to return the data. You can refer to the Supabase documentation for more details on how to configure the client. Example Code Here is an example of how you can configure the useForm hook with the meta property to ensure the onMutationSuccess callback is called:

"use client";

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
export default function BlogPostCreate() {
  const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
      console.log({ data, variables, context, isAutoSave });
      // Add your redirect logic here
    },
  });

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label={"Title"}
          name={["title"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

"use client";

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
export default function BlogPostCreate() {
  const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
      console.log({ data, variables, context, isAutoSave });
      // Add your redirect logic here
    },
  });

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label={"Title"}
          name={["title"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

Additional Information - Supabase Example in refine Documentation (https://refine.dev/docs/data/packages/supabase/#example) - useForm Documentation (https://refine.dev/docs/data/hooks/use-form/#onmutationsuccess) If the problem persists, you might want to check if there are any other issues with your form configuration or the Supabase setup. If you need further assistance, consider reopening the issue on the refine GitHub repository or checking the community discussions. Hope this helps! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

itchy-amethyst•3w ago

@kapa.ai no error is shown, but it just doesn't work

kapa.ai•3w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It sounds like you're not encountering any errors, but the onMutationSuccess callback in the useForm hook is not being triggered as expected. This can be particularly frustrating when everything else seems to be working fine. Possible Cause and Solution Given that you're using Ant Design, Next.js, and Supabase, the issue might be related to how the Supabase data provider handles responses after a mutation. Supabase requires you to specify the fields you want to return after a mutation, which might be why the onMutationSuccess callback isn't being called. Steps to Fix 1. Specify Fields to Return: Ensure that you specify the fields you want to return in the meta property of the useForm hook.

const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
        console.log({ data, variables, context, isAutoSave });
        // Add your redirect logic here
    },
});

const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
        console.log({ data, variables, context, isAutoSave });
        // Add your redirect logic here
    },
});

2. Check Supabase Response: Make sure that the Supabase client is configured correctly to return the data. You can refer to the Supabase documentation for more details on how to configure the client. Example Code Here is an example of how you can configure the useForm hook with the meta property to ensure the onMutationSuccess callback is called:

"use client";

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

export default function BlogPostCreate() {
  const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
      console.log({ data, variables, context, isAutoSave });
      // Add your redirect logic here
    },
  });
return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label={"Title"}
          name={["title"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

"use client";

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

export default function BlogPostCreate() {
  const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
      console.log({ data, variables, context, isAutoSave });
      // Add your redirect logic here
    },
  });
return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label={"Title"}
          name={["title"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

Additional Information - Supabase Example in refine Documentation (https://refine.dev/docs/data/packages/supabase/#example) - useForm Documentation (https://refine.dev/docs/data/hooks/use-form/#onmutationsuccess) If the problem persists, you might want to check if there are any other issues with your form configuration or the Supabase setup. If you need further assistance, consider reopening the issue on the refine GitHub repository or checking the community discussions. Hope this helps! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

itchy-amethyst•3w ago

@kapa.ai now the redirection doesn't work

kapa.ai•3w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It seems like the redirection issue persists even after ensuring that the onMutationSuccess callback is configured correctly. Let's try to address this step-by-step. Steps to Ensure Redirection Works 1. Ensure onMutationSuccess is Called: First, make sure that the onMutationSuccess callback is indeed being called. You can do this by adding a simple console.log statement inside the callback. 2. Implement Redirection Logic: Once you confirm that the onMutationSuccess callback is being called, you can add your redirection logic inside this callback. Example Code Here is an example of how you can configure the useForm hook with the meta property and implement the redirection logic:

"use client";

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import { useNavigate } from "react-router-dom";

export default function BlogPostCreate() {
  const navigate = useNavigate();

  const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
      console.log({ data, variables, context, isAutoSave });
      // Add your redirect logic here
      navigate("/your-redirect-path"); // Replace with your desired path
    },
  });

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label={"Title"}
          name={["title"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

"use client";

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import { useNavigate } from "react-router-dom";

export default function BlogPostCreate() {
  const navigate = useNavigate();

  const { formProps, saveButtonProps } = useForm({
    meta: {
        select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
      console.log({ data, variables, context, isAutoSave });
      // Add your redirect logic here
      navigate("/your-redirect-path"); // Replace with your desired path
    },
  });

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label={"Title"}
          name={["title"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

Additional Information - Supabase Example in refine Documentation (https://refine.dev/docs/data/packages/supabase/#example) - useForm Documentation (https://refine.dev/docs/data/hooks/use-form/#onmutationsuccess) Troubleshooting Tips 1. Check Console Logs: Ensure that the console.log statement inside onMutationSuccess is being executed. 2. Verify Navigation Path: Make sure the path you are navigating to is correct and exists in your application. 3. Check Route Definitions: Ensure that the routes are correctly defined in your Refine component. If the problem persists, you might want to check if there are any other issues with your form configuration or the Supabase setup. If you need further assistance, consider reopening the issue on the refine GitHub repository or checking the community discussions. Hope this helps! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

itchy-amethyst•3w ago

@kapa.ai the redirection option in useForm hook still doesn't work

kapa.ai•3w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It seems like you're still facing issues with the redirection option in the useForm hook. Let's address this by ensuring that the redirect property is correctly set and that your routes are properly defined. Steps to Ensure Redirection Works 1. Set the redirect Property: Ensure that the redirect property is set correctly in the useForm hook options. 2. Check Route Definitions: Make sure that the routes for show, edit, list, or create are defined in your Refine component. Example Code Here is an example of how you can configure the useForm hook with the redirect property:

"use client";

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

export default function BlogPostCreate() {
  const { formProps, saveButtonProps } = useForm({
    refineCoreProps: {
      resource: "posts",
      redirect: "show", // Set the redirect option here
    },
  });

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label={"Title"}
          name={["title"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

"use client";

import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

export default function BlogPostCreate() {
  const { formProps, saveButtonProps } = useForm({
    refineCoreProps: {
      resource: "posts",
      redirect: "show", // Set the redirect option here
    },
  });

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label={"Title"}
          name={["title"]}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

Ensure Routes are Defined Make sure that the routes for show, edit, list, or create are defined in your Refine component. Here is an example:

import { Refine } from "@refinedev/core";
import { dataProvider } from "@refinedev/supabase";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { PostList, PostCreate, PostEdit, PostShow } from "./posts";
const App = () => {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider}
        resources={[
          {
            name: "posts",
            list: PostList,
            create: PostCreate,
            edit: PostEdit,
            show: PostShow,
          },
        ]}
      />
      <Routes>
        <Route path="/posts" element={<PostList />} />
        <Route path="/posts/create" element={<PostCreate />} />
        <Route path="/posts/edit/:id" element={<PostEdit />} />
        <Route path="/posts/show/:id" element={<PostShow />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

import { Refine } from "@refinedev/core";
import { dataProvider } from "@refinedev/supabase";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { PostList, PostCreate, PostEdit, PostShow } from "./posts";
const App = () => {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider}
        resources={[
          {
            name: "posts",
            list: PostList,
            create: PostCreate,
            edit: PostEdit,
            show: PostShow,
          },
        ]}
      />
      <Routes>
        <Route path="/posts" element={<PostList />} />
        <Route path="/posts/create" element={<PostCreate />} />
        <Route path="/posts/edit/:id" element={<PostEdit />} />
        <Route path="/posts/show/:id" element={<PostShow />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Additional Information - useForm Documentation (https://refine.dev/docs/data/hooks/use-form/#redirect) - Router Integration (https://refine.dev/docs/data/hooks/use-form/#redirect-) Troubleshooting Tips 1. Check Console Logs: Ensure that there are no errors in the console. 2. Verify Route Paths: Make sure the paths you are redirecting to are correct and exist in your application. 3. Check Route Definitions: Ensure that the routes are correctly defined in your Refine component. If the problem persists, you might want to check if there are any other issues with your form configuration or the Supabase setup. If you need further assistance, consider reopening the issue on the refine GitHub repository or checking the community discussions. Hope this helps! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

itchy-amethyst•3w ago

@kapa.ai i am using nextjs

kapa.ai•3w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Given that you are using Next.js along with Ant Design and Supabase, let's ensure that the onMutationSuccess callback and redirection logic are correctly implemented in your useForm hook. Steps to Ensure Redirection Works in Next.js 1. Ensure onMutationSuccess is Called: First, make sure that the onMutationSuccess callback is indeed being called. You can do this by adding a simple console.log statement inside the callback. 2. Implement Redirection Logic: Use Next.js's useRouter for redirection inside the onMutationSuccess callback. Example Code Here is an example of how you can configure the useForm hook with the meta property and implement the redirection logic using Next.js's useRouter:

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";
import { useRouter } from "next/router";

export default function BlogPostCreate() {
  const router = useRouter();

  const { formProps, saveButtonProps } = useForm({
    meta: {
      select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
      console.log({ data, variables, context, isAutoSave });
      // Add your redirect logic here
      router.push("/your-redirect-path"); // Replace with your desired path
    },
  });

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label="Title"
          name="title"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

import { useForm, Create } from "@refinedev/antd";
import { Form, Input } from "antd";
import { useRouter } from "next/router";

export default function BlogPostCreate() {
  const router = useRouter();

  const { formProps, saveButtonProps } = useForm({
    meta: {
      select: "*",
    },
    onMutationSuccess: (data, variables, context, isAutoSave) => {
      console.log({ data, variables, context, isAutoSave });
      // Add your redirect logic here
      router.push("/your-redirect-path"); // Replace with your desired path
    },
  });

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label="Title"
          name="title"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
}

Ensure Routes are Defined Make sure that the routes for show, edit, list, or create are defined in your Next.js application. Here is an example of how you can define these routes in your Next.js pages:

// pages/posts/index.js
import PostList from "../../components/PostList";
export default PostList;

// pages/posts/create.js
import PostCreate from "../../components/PostCreate";
export default PostCreate;

// pages/posts/edit/[id].js
import PostEdit from "../../../components/PostEdit";
export default PostEdit;

// pages/posts/show/[id].js
import PostShow from "../../../components/PostShow";
export default PostShow;

// pages/posts/index.js
import PostList from "../../components/PostList";
export default PostList;

// pages/posts/create.js
import PostCreate from "../../components/PostCreate";
export default PostCreate;

// pages/posts/edit/[id].js
import PostEdit from "../../../components/PostEdit";
export default PostEdit;

// pages/posts/show/[id].js
import PostShow from "../../../components/PostShow";
export default PostShow;

Additional Information - useForm Documentation (https://refine.dev/docs/data/hooks/use-form/#onmutationsuccess) - Next.js Router Documentation (https://nextjs.org/docs/api-reference/next/router) Troubleshooting Tips 1. Check Console Logs: Ensure that the console.log statement inside onMutationSuccess is being executed. 2. Verify Navigation Path: Make sure the path you are navigating to is correct and exists in your application. 3. Check Route Definitions: Ensure that the routes are correctly defined in your Next.js application. If the problem persists, you might want to check if there are any other issues with your form configuration or the Supabase setup. If you need further assistance, consider reopening the issue on the refine GitHub repository or checking the community discussions. Hope this helps! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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