correct-apricot•7mo ago

OnSucess not called

Here onSuccess if not called the successNotification is. mutate( { resource: api/push/${collection}, dataProviderName: "api", meta: { method: "post" }, values: bodyArray, successNotification: (data, values, resource) => { return { message: updated ${String(selected)} from ${collection}, description: "Success with no errors", type: "success", }; }, }, { onSuccess: (data, variables, context) => { console.log("onSuccess", data, variables, context); queryClient.invalidateQueries({ queryKey: [collection] }); }, } );

15 Replies

kapa.ai•7mo ago

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you're experiencing an issue where the onSuccess callback is not being called, but the successNotification is. This issue can occur if the component is unmounted or redirected before the mutate operation completes, which prevents the onSuccess callback from being triggered. Here are a few steps you can take to troubleshoot and potentially resolve this issue: 1. Ensure Component is Mounted: Make sure that the component is still mounted when the mutate operation completes. If the component is unmounted, the onSuccess callback will not be called. 2. Check for Redirects: If your form or component is redirecting before the mutate operation completes, the onSuccess callback will not be triggered. You can delay the redirect until after the onSuccess callback is called. 3. Use queryOptions.onSuccess: Since refine uses react-query, you can leverage queryOptions.onSuccess to handle the success state. This ensures that the callback is called even if the component is unmounted. Here is an example of how you can modify your code to ensure the onSuccess callback is called:

mutate(
  {
    resource: `api/push/${collection}`,
    dataProviderName: "api",
    meta: { method: "post" },
    values: bodyArray,
    successNotification: (data, values, resource) => {
      return {
        message: `updated ${String(selected)} from ${collection}`,
        description: "Success with no errors",
        type: "success",
      };
    },
  },
  {
    onSuccess: (data, variables, context) => {
      console.log("onSuccess", data, variables, context);
      queryClient.invalidateQueries({ queryKey: [collection] });
    },
    queryOptions: {
      onSuccess: (data) => {
        console.log("queryOptions onSuccess", data);
      },
    },
  }
);

mutate(
  {
    resource: `api/push/${collection}`,
    dataProviderName: "api",
    meta: { method: "post" },
    values: bodyArray,
    successNotification: (data, values, resource) => {
      return {
        message: `updated ${String(selected)} from ${collection}`,
        description: "Success with no errors",
        type: "success",
      };
    },
  },
  {
    onSuccess: (data, variables, context) => {
      console.log("onSuccess", data, variables, context);
      queryClient.invalidateQueries({ queryKey: [collection] });
    },
    queryOptions: {
      onSuccess: (data) => {
        console.log("queryOptions onSuccess", data);
      },
    },
  }
);

In this example, queryOptions.onSuccess is used to ensure that the success callback is called even if the component is unmounted. For more information, you can refer to the refine documentation and the relevant GitHub issues: - Refine Documentation (https://refine.dev/docs) - GitHub Issue #3415 (https://github.com/refinedev/refine/issues/3415) - GitHub Issue #5679 (https://github.com/refinedev/refine/issues/5679) If the problem persists, consider reopening the issue on GitHub for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

correct-apricotOP•7mo ago

@kapa.ai but why is the sucessNotificaiton still called

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The successNotification is still being called because it is handled internally by refine's hooks and is independent of the onSuccess callback. The successNotification is designed to show a notification when the mutation is successful, and it is triggered by the internal logic of the refine framework. Here's a breakdown of why this happens: 1. Internal Handling by Refine: The successNotification is managed by refine's internal logic. When a mutation is successful, refine checks if a successNotification is provided and then calls it to display the notification. 2. Separation of Concerns: The onSuccess callback and successNotification serve different purposes. The onSuccess callback is for executing custom logic after a successful mutation, while the successNotification is specifically for displaying success messages. 3. React Query Integration: Refine uses React Query under the hood, which handles the state and side effects of asynchronous operations. The successNotification is part of the side effects managed by refine, ensuring that notifications are shown even if the onSuccess callback is not called due to component unmounting or other reasons. To illustrate this, here is an example of how the successNotification is used in refine:

mutate(
  {
    resource: `api/push/${collection}`,
    dataProviderName: "api",
    meta: { method: "post" },
    values: bodyArray,
    successNotification: (data, values, resource) => {
      return {
        message: `updated ${String(selected)} from ${collection}`,
        description: "Success with no errors",
        type: "success",
      };
    },
  },
  {
    onSuccess: (data, variables, context) => {
      console.log("onSuccess", data, variables, context);
      queryClient.invalidateQueries({ queryKey: [collection] });
    },
    queryOptions: {
      onSuccess: (data) => {
        console.log("queryOptions onSuccess", data);
      },
    },
  }
);

mutate(
  {
    resource: `api/push/${collection}`,
    dataProviderName: "api",
    meta: { method: "post" },
    values: bodyArray,
    successNotification: (data, values, resource) => {
      return {
        message: `updated ${String(selected)} from ${collection}`,
        description: "Success with no errors",
        type: "success",
      };
    },
  },
  {
    onSuccess: (data, variables, context) => {
      console.log("onSuccess", data, variables, context);
      queryClient.invalidateQueries({ queryKey: [collection] });
    },
    queryOptions: {
      onSuccess: (data) => {
        console.log("queryOptions onSuccess", data);
      },
    },
  }
);

In this example, the successNotification is called to display a success message, while the onSuccess callback is used to perform additional actions like invalidating queries. For more detailed information, you can refer to the refine documentation: - Refine Documentation on successNotification (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#successnotification) - Refine Documentation on useForm (https://refine.dev/docs/data/hooks/use-form#successnotification-) If you need further assistance, consider checking the refine GitHub issues or discussions for similar cases: - GitHub Issue #5473 (https://github.com/refinedev/refine/issues/5473) - GitHub Issue #2131 (https://github.com/refinedev/refine/issues/2131) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

correct-apricotOP•7mo ago

@kapa.ai in that sense can i use the successNotification essenitally as my onSuccess as want to invalidate a cache eg

      mutate({
        resource:

api/push/${collection}

,
        dataProviderName: "api",
        meta: { method: "post" },
        values: bodyArray,
        successNotification: (data, values, resource) => {
          queryClient.invalidateQueries({ queryKey: [collection] });
          return {
            message:

updated ${String(selected)} from ${collection}

,
            description: "Success with no errors",
            type: "success",
          };
        },
      });

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the successNotification to perform actions such as invalidating a cache. Since successNotification is called when the mutation is successful, you can include your cache invalidation logic within it. Here’s how you can do it:

mutate({
  resource: `api/push/${collection}`,
  dataProviderName: "api",
  meta: { method: "post" },
  values: bodyArray,
  successNotification: (data, values, resource) => {
    queryClient.invalidateQueries({ queryKey: [collection] });
    return {
      message: `updated ${String(selected)} from ${collection}`,
      description: "Success with no errors",
      type: "success",
    };
  },
});

mutate({
  resource: `api/push/${collection}`,
  dataProviderName: "api",
  meta: { method: "post" },
  values: bodyArray,
  successNotification: (data, values, resource) => {
    queryClient.invalidateQueries({ queryKey: [collection] });
    return {
      message: `updated ${String(selected)} from ${collection}`,
      description: "Success with no errors",
      type: "success",
    };
  },
});

In this example, the queryClient.invalidateQueries function is called within the successNotification to invalidate the cache for the specified collection. This ensures that the cache is invalidated and the success notification is shown when the mutation is successful. For more information on how successNotification works, you can refer to the refine documentation: - Refine Documentation on successNotification (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#successnotification) - Refine Documentation on useForm (https://refine.dev/docs/data/hooks/use-form#successnotification-) This approach leverages the internal handling of notifications by refine while allowing you to perform additional actions like cache invalidation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

correct-apricotOP•7mo ago

@kapa.ai is thia bad paractise though

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Using successNotification to perform side effects like cache invalidation is not inherently bad practice, but it does mix concerns. Typically, successNotification is intended for displaying notifications, while onSuccess is meant for handling side effects such as cache invalidation. Mixing these concerns can make your code harder to maintain and understand. Here are some considerations: Pros: - Simplicity: It can simplify your code by consolidating logic in one place. - Immediate Feedback: Ensures that the notification and side effect happen together, providing immediate feedback to the user. Cons: - Separation of Concerns: Mixing UI notifications with data handling logic can make your code less modular and harder to maintain. - Readability: Future developers (or even you) might find it confusing to see data handling logic inside a notification function. Recommended Approach: To maintain clean and maintainable code, it's generally better to keep side effects and UI notifications separate. Use onSuccess for side effects like cache invalidation and successNotification purely for notifications. Here’s how you can structure it:

mutate(
  {{
    resource: `api/push/${{collection}}`,
    dataProviderName: "api",
    meta: {{ method: "post" }},
    values: bodyArray,
    successNotification: (data, values, resource) => {{
      return {{
        message: `updated ${{String(selected)}} from ${{collection}}`,
        description: "Success with no errors",
        type: "success",
      }};
    }},
  }},
  {{
    onSuccess: (data, variables, context) => {{
      console.log("onSuccess", data, variables, context);
      queryClient.invalidateQueries({{ queryKey: [collection] }});
    }},
  }}
);

mutate(
  {{
    resource: `api/push/${{collection}}`,
    dataProviderName: "api",
    meta: {{ method: "post" }},
    values: bodyArray,
    successNotification: (data, values, resource) => {{
      return {{
        message: `updated ${{String(selected)}} from ${{collection}}`,
        description: "Success with no errors",
        type: "success",
      }};
    }},
  }},
  {{
    onSuccess: (data, variables, context) => {{
      console.log("onSuccess", data, variables, context);
      queryClient.invalidateQueries({{ queryKey: [collection] }});
    }},
  }}
);

This approach keeps your code modular and adheres to the principle of separation of concerns, making it easier to maintain and understand. For more information, you can refer to the refine documentation: - Refine Documentation on successNotification (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#successnotification) - Refine Documentation on useForm (https://refine.dev/docs/data/hooks/use-form#successnotification-) If you have any further questions or need more detailed guidance, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

fair-rose•7mo ago

Hey @Joe Gaffney, is this the useUpdate hook?

correct-apricotOP•7mo ago

Hey @aliemir was in the useCreateMany

correct-apricotOP•7mo ago

was piggy backing on that as allows multiple updates. I am calling this from within a rightclick context window and operation can take a bit of time so think it is related to the unmount

correct-apricotOP•7mo ago

some of my end points are a bit custom not always with a matching resource pattern so having to invalidate the cache. Seems to work though adding to the successNotification