other-emerald•2y ago

useTable

  const handleCompleted = async () => {
    await mutateCreate({
      resource: showCompleted!,
      values: rowSelect,
      meta: {
        create: true,
        method: "post",
      },
    });

    await invalidate({
      resource: resource,
      invalidates: ["list"],
    });
  };

  const handleCompleted = async () => {
    await mutateCreate({
      resource: showCompleted!,
      values: rowSelect,
      meta: {
        create: true,
        method: "post",
      },
    });

    await invalidate({
      resource: resource,
      invalidates: ["list"],
    });
  };

Call mutateCreate successfully then call invalidate

15 Replies

kapa.ai•2y ago

Hi @hoaanhtuc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In your code, you are using the mutateCreate function from the useCreate hook to create a new resource. After the creation is successful, you are invalidating the list query of the resource using the invalidate function from the useInvalidate hook. This will cause the useList or useMany hooks on the same page to refetch the data. Here is a brief explanation of the hooks and functions you are using: - useCreate: This hook is used to create a new resource. When the useCreate mutation runs successfully, it will invalidate the list and many queries from the current resource by default. This means that, if you use useList or useMany hooks on the same page, they will refetch the data after the mutation is completed. You can change this behavior by passing the invalidates prop. source (https://refine.dev/docs/core/hooks/data/use-create/#invalidating-queries) - useInvalidate: This hook can be used to invalidate the state of a particular resource. This hook will be called when a mutation hook is successful. For example, creating a Posts with the useCreate hook will invalidate the list and many state of the Posts resource. The hook is used internally by refine. In most cases, you won't need this hook, but it may be useful for some use-cases that may require customized invalidation. source (https://refine.dev/docs/core/hooks/data/use-invalidate/) Here is the code you provided:

const handleCompleted = async () => {
  await mutateCreate({
    resource: showCompleted!,
    values: rowSelect,
    meta: {
      create: true,
      method: "post",
    },
  });

  await invalidate({
    resource: resource,
    invalidates: ["list"],
  });
};

const handleCompleted = async () => {
  await mutateCreate({
    resource: showCompleted!,
    values: rowSelect,
    meta: {
      create: true,
      method: "post",
    },
  });

  await invalidate({
    resource: resource,
    invalidates: ["list"],
  });
};

In this code, mutateCreate is used to create a new resource with the provided values. After the creation is successful, invalidate is called to invalidate the list query of the resource, causing the useList or useMany hooks on the same page to refetch the data. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

other-emeraldOP•2y ago

@kapa.ai calling mutateCreate successfully, how do I reload useTable?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To reload the table after a successful mutateCreate, you can use the refetch function from the useTable hook. The refetch function allows you to manually trigger a refetch of the data. Here's an example of how you can use it:

const { mutate: mutateCreate } = useCreate("resource");
const { tableQueryResult } = useTable("resource");

const handleCompleted = async () => {
  await mutateCreate({
    resource: showCompleted!,
    values: rowSelect,
    meta: {
      create: true,
      method: "post",
    },
  });

  // Refetch the table data
  tableQueryResult.refetch();
};

const { mutate: mutateCreate } = useCreate("resource");
const { tableQueryResult } = useTable("resource");

const handleCompleted = async () => {
  await mutateCreate({
    resource: showCompleted!,
    values: rowSelect,
    meta: {
      create: true,
      method: "post",
    },
  });

  // Refetch the table data
  tableQueryResult.refetch();
};

In this code, after the mutateCreate function is successfully executed, the refetch function is called to reload the data in the table. Please note that the refetch function only repeats the last request made by the query, so it refreshes the data that is shown on the page. If the data from the API hasn't changed, the UI will not update. Also, Refine automatically invalidates the resources that occur when a mutation is applied on a resource. So, in most cases, you shouldn't need to manually "refetch". If you're experiencing issues with this, it might be worth checking your code to see if there's a problem. source (https://github.com/refinedev/refine/issues/1384) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

other-emeraldOP•2y ago

@kapa.ai don't see tableQueryResult.refetch() working.

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you're having trouble with tableQueryResult.refetch() not working as expected, it could be due to a couple of reasons: 1. The data from the API hasn't changed. refetch will only update the UI if the data from the API has changed. If the data is the same, the UI will not update. 2. There could be an issue with the way your components are rendering. If your components are not re-rendering after the data changes, the UI will not update. You might need to check your React component lifecycle to ensure that your components are re-rendering correctly. source (https://discord.com/channels/837692625737613362/1127962232043606046) Also, it's important to note that refetch is a function provided by the useTable and useList hooks in Refine. It's used to manually refetch the data from the API. However, it only repeats the last request made by the query, so it refreshes the data that is shown on the page. If you're still having issues, it might be helpful to provide more context or a code sample so we can better understand the problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

other-emeraldOP•2y ago

@kapa.ai

   const handleCancelled = async () => {
    await mutateCreate({
      resource: showCancelled!,
      values: rowSelect,
      meta: {
        create: true,
        method: "post",
      },
    });
    await tableQueryResult.refetch();
  };

   const handleCancelled = async () => {
    await mutateCreate({
      resource: showCancelled!,
      values: rowSelect,
      meta: {
        create: true,
        method: "post",
      },
    });
    await tableQueryResult.refetch();
  };

how to call await tableQueryResult.refetch() after mutateCreate successfully?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To call tableQueryResult.refetch() after mutateCreate successfully completes, you can use the onSuccess callback of the mutateCreate function. The onSuccess callback is called after a successful mutation. Here's how you can do it:

const { mutate: mutateCreate } = useCreate("resource");
const { tableQueryResult } = useTable("resource");

const handleCancelled = async () => {
  await mutateCreate({
    resource: showCancelled!,
    values: rowSelect,
    meta: {
      create: true,
      method: "post",
    },
    onSuccess: () => {
      // Refetch the table data after successful creation
      tableQueryResult.refetch();
    },
  });
};

const { mutate: mutateCreate } = useCreate("resource");
const { tableQueryResult } = useTable("resource");

const handleCancelled = async () => {
  await mutateCreate({
    resource: showCancelled!,
    values: rowSelect,
    meta: {
      create: true,
      method: "post",
    },
    onSuccess: () => {
      // Refetch the table data after successful creation
      tableQueryResult.refetch();
    },
  });
};

In this code, tableQueryResult.refetch() is called inside the onSuccess callback of mutateCreate. This ensures that the table data is refetched only after the creation is successful. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

other-emeraldOP•2y ago

@kapa.ai An error occurred "Object literal may only specify known properties, and 'onSuccess' does not exist in type 'useCreateParams<BaseRecord, HttpError, {}>'"

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. The useCreate hook in Refine does not have an onSuccess prop. The onSuccess prop is available in the useForm hook, not in the useCreate hook. If you want to refetch the table data after a successful creation, you can use the invalidate function from the useInvalidate hook. This function allows you to manually invalidate a specific query, causing it to be refetched. Here's how you can do it:

const { mutate: mutateCreate } = useCreate("resource");
const { invalidate } = useInvalidate();

const handleCancelled = async () => {
  await mutateCreate({
    resource: showCancelled!,
    values: rowSelect,
    meta: {
      create: true,
      method: "post",
    },
  });

  // Invalidate the 'list' query of the resource
  await invalidate({
    resource: "resource",
    invalidates: ["list"],
  });
};

const { mutate: mutateCreate } = useCreate("resource");
const { invalidate } = useInvalidate();

const handleCancelled = async () => {
  await mutateCreate({
    resource: showCancelled!,
    values: rowSelect,
    meta: {
      create: true,
      method: "post",
    },
  });

  // Invalidate the 'list' query of the resource
  await invalidate({
    resource: "resource",
    invalidates: ["list"],
  });
};

In this code, invalidate is called after mutateCreate to invalidate the list query of the resource, causing the useTable or useList hooks on the same page to refetch the data. source (https://github.com/refinedev/refine/issues/3984) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

wise-white•2y ago

Hello @hoaanhtuc you can use invalidates prop of useCreate hook. https://refine.dev/docs/core/hooks/data/use-create/#invalidates

useCreate | refine

useCreate is used when creating new records. It is an extended version of TanStack Query's useMutation and not only supports all features of the mutation but also adds some extra features.

useTable

Did you find this page helpful?