flat-fuchsia•15mo ago

Hi, I'm using useList in a page, how can force it to reload it ?

e.g. I'm using a put command to update some values in the backend and I want to refresh the page with updated data (that is not returned by the api call)

3 Replies

kapa.ai•15mo ago

Hi @simoneb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To force the useList hook to reload its data after performing an update operation, you can use the refetch function provided by the hook. This function allows you to manually trigger a data refetch. Here is an example of how you can achieve this:

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

const MyComponent = () => {
  const { data, refetch } = useList({
    resource: "products",
  });

  const handleUpdate = async () => {
    // Perform your update operation here
    await updateProductInBackend();

    // Manually trigger a refetch to reload the data
    refetch();
  };

  return (
    <div>
      <button onClick={handleUpdate}>Update and Refresh</button>
      <ul>
        {data?.data.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

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

const MyComponent = () => {
  const { data, refetch } = useList({
    resource: "products",
  });

  const handleUpdate = async () => {
    // Perform your update operation here
    await updateProductInBackend();

    // Manually trigger a refetch to reload the data
    refetch();
  };

  return (
    <div>
      <button onClick={handleUpdate}>Update and Refresh</button>
      <ul>
        {data?.data.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

In this example, after the updateProductInBackend function is called to update the data in the backend, the refetch function is called to reload the data in the useList hook. For more information, you can refer to the useList documentation (https://refine.dev/docs/data/hooks/use-list/) and the refetch function (https://github.com/refinedev/refine/issues/1737#issuecomment-1). If you are using a Live Provider for real-time updates, you can also set the liveMode to "auto" to automatically update the data when a related live event is received. However, for manual control, the refetch function is the way to go. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

exotic-emerald•15mo ago

try to use realtime without refresh if you use supabase

Hi, I'm using useList in a page, how can force it to reload it ?

Did you find this page helpful?