wise-white•2y ago

Refetch not working as expected (Table not updating)

Hi! I'm using: tableQueryResult: { refetch } from useTable, and refetch from useList in two different locations. Both use the button: <Button onClick={() => {refetch()}}><RedoOutlined/>Refresh</Button>. In the networks tab, the correct data is retrieved on click. However, neither table is updated -- To make sure, I closed the API between the first load and pressing the 'refresh' button, but the original data is still there. I found someone else having a similar issue a few months back, but they were using MUI/useDataGrid, which I dont believe is part of Ant? Any insights appreciated!

5 Replies

kapa.ai•2y ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, 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's important to note that refetch only repeats the last request made by the query, so it refreshes the data that is shown on the page. If you're using refetch and the data is not updating on the UI, 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. Regarding the issue with MUI/useDataGrid, it's not directly related to Ant Design. Refine supports multiple table libraries out of the box, including Ant Design Table, React Table, and Material UI Table. If you're using Ant Design, you should be using the hooks and components provided for Ant Design. If you're still having issues, I would recommend checking the Refine documentation (https://refine.dev/docs) for more information on how to use these hooks and components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

wise-whiteOP•2y ago

RE: 1; My method of testing wasn't adequate. I changed the API's return instead of just closing it. Updates properly. @kapa.ai (Purely for aesthetics) Is there a boolean return for whether refetch is currently fetching data?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, there is a boolean return for whether refetch is currently fetching data. Both useTable and useList hooks return a queryResult object, which includes an isLoading property. This property is a boolean that indicates whether the query is currently in a "loading" state. Here's how you can use it:

const { tableQueryResult: { refetch, isLoading } } = useTable();

<Button onClick={() => refetch()} disabled={isLoading}><RedoOutlined/>Refresh</Button>

const { tableQueryResult: { refetch, isLoading } } = useTable();

<Button onClick={() => refetch()} disabled={isLoading}><RedoOutlined/>Refresh</Button>

In this example, the Refresh button will be disabled while the data is being refetched. You can find more information about this in the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useList/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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