What alternative way of onSuccess in useList?

11 Replies

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In useList, an alternative way to handle successful data fetching is by using the successNotification property. This property allows you to customize the success notification that is shown after data is fetched successfully. Here is an example of how to use the successNotification property in useList:

useList({  
  successNotification: (data, values, resource) => {  
    return {  
      message: `${data.title} Successfully fetched.`,  
      description: "Success with no errors",  
      type: "success",  
    };  
  },  
});

useList({  
  successNotification: (data, values, resource) => {  
    return {  
      message: `${data.title} Successfully fetched.`,  
      description: "Success with no errors",  
      type: "success",  
    };  
  },  
});

This approach leverages the NotificationProvider to show a success notification with a custom message, description, and type. For more details, you can refer to the useList documentation (https://refine.dev/docs/data/hooks/use-list/#successnotification). Additionally, you can still use the onSuccess callback within the queryOptions if you need to perform other actions upon successful data fetching:

const { data, isLoading, isError } = useList({
  resource: "products",
  queryOptions: {
    onSuccess: (data) => {
      console.log("Data fetched successfully:", data);
    },
  },
});

const { data, isLoading, isError } = useList({
  resource: "products",
  queryOptions: {
    onSuccess: (data) => {
      console.log("Data fetched successfully:", data);
    },
  },
});

For more information on useList, you can visit the useList documentation (https://refine.dev/docs/data/hooks/use-list/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

xenial-blackOP•4mo ago

but the fn onSuccess will be removed on the next major version. @kapa.ai

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Given that the onSuccess function will be removed in the next major version, you can use the successNotification property as an alternative to handle successful operations. This property allows you to define a custom notification that will be shown upon successful data fetching. Here is an example of how to use the successNotification property:

useList({
  successNotification: (data, values, resource) => {
    return {
      message: `Successfully fetched data from ${resource}.`,
      description: "Success with no errors",
      type: "success",
    };
  },
});

useList({
  successNotification: (data, values, resource) => {
    return {
      message: `Successfully fetched data from ${resource}.`,
      description: "Success with no errors",
      type: "success",
    };
  },
});

This approach leverages the NotificationProvider to show a success notification with a custom message, description, and type. For more details, you can refer to the useList documentation (https://refine.dev/docs/data/hooks/use-list/#successnotification). Additionally, you can use useEffect to handle side effects after a successful data fetch. Here is an example:

const { data, isLoading, isError } = useList({
  resource: "products",
});

useEffect(() => {
  if (data) {
    console.log("Data fetched successfully:", data);
    // Perform other actions here
  }
}, [data]);

const { data, isLoading, isError } = useList({
  resource: "products",
});

useEffect(() => {
  if (data) {
    console.log("Data fetched successfully:", data);
    // Perform other actions here
  }
}, [data]);

This way, you can handle any side effects or additional logic after the data has been successfully fetched. For more information on useList, you can visit the useList documentation (https://refine.dev/docs/data/hooks/use-list/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

xenial-blackOP•4mo ago

@kapa.ai how to transform data from useCreate hook of strapi-v4?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To transform data from the useCreate hook when using the strapi-v4 data provider, you can utilize the normalizeData function. This function allows you to customize the data returned by the backend. Here is an example of how you can use the normalizeData function to transform the data:

import { useCreate } from "@refinedev/core";

const { mutate } = useCreate({
  resource: "products",
  meta: {
    normalizeData: (data) => {
      return {
        id: data.id,
        title: data.attributes.title,
        content: data.attributes.content,
      };
    },
  },
});

mutate({
  values: {
    name: "New Product",
    material: "Wood",
  },
});

import { useCreate } from "@refinedev/core";

const { mutate } = useCreate({
  resource: "products",
  meta: {
    normalizeData: (data) => {
      return {
        id: data.id,
        title: data.attributes.title,
        content: data.attributes.content,
      };
    },
  },
});

mutate({
  values: {
    name: "New Product",
    material: "Wood",
  },
});

In this example, the normalizeData function is used to transform the data returned by the backend to a simpler format. For more details, you can refer to the Strapi v4 documentation (https://refine.dev/docs/data/packages/strapi-v4/#server-side-form-validation) and the normalizeData function (https://github.com/refinedev/refine/blob/27a55320ada61a0624ed2f5b29331946334f7727/packages/strapi-v4/src/dataProvider.ts#L80). Additionally, you can refer to the useCreate documentation (https://refine.dev/docs/data/hooks/use-create/) for more information on how to use the useCreate hook. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

xenial-blackOP•3mo ago

@kapa.ai when refine upgrade to strapi-v5?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- As of now, there is no official announcement or timeline for when Refine will upgrade to support Strapi v5. The current integration supports Strapi v4, as indicated in the Refine documentation (https://refine.dev/blog/refine-react-admin-invoice-generator/#configure-refine-for-strapi-v4) and the GitHub issue (https://github.com/refinedev/refine/issues/1274) discussing Strapi v4 integration. For the latest updates and discussions regarding new features or upgrades, you can keep an eye on the Refine GitHub discussions (https://github.com/refinedev/refine/discussions) and issues (https://github.com/refinedev/refine/issues). If you have specific needs or want to contribute to the discussion, you might consider opening a new issue or participating in existing discussions on their GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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