conscious-sapphire•2y ago

Antd table expandable component doesn't stop network request although it's not on the view.

I have created an antd table expandable component and when I expand it works as expected, but when I hide the expanded component it hides from the view but the query that I have used to execute in that component still gets executed. Is this the issues from react-query, or antd or refine? I am confused. For your reference I have attached the video file on what I am talking about.

7 Replies

generous-apricot•2y ago

Hey @dipbazz, I didin't play your video because I don't have the video player for .mkv. But, I have an idea for your issue. Since the react-query works on hooks, they are not working on conditional renders. For solve this problem, you can use enabled prop of queryOptions. You can see more information: https://tanstack.com/query/v4/docs/react/guides/disabling-queries

Disabling/Pausing Queries | TanStack Query Docs

If you ever want to disable a query from automatically running, you can use the enabled = false option. When enabled is false:

foreign-sapphire•2y ago

Hey @dipbazz just checked the Ant Design docs, found out something related to your issue. When you have an expandable item, Ant Design table does not initially render this to DOM but when you click on the expand icon, its rendered and mounted. Everything works just fine here, but when you hide it, it just adds display: none; to its style and keeps the element mounted. That's why your component and query still gets triggered. You can use onExpand or onExpandedRowsChange callbacks of expandable to store the expanded/collapsed rows and enable/disable your queries or just render null 🤔

conscious-sapphireOP•2y ago

Thank you @salihozdemir and @aliemirs for your help. I will try to solve it as you have mentioned.

other-emerald•17mo ago

Hello! I'm trying to do an expandable table too. But I'm not sure how to fetch the data for the expanded table. I would like to use the useOne hook to get the data, but I cannot call a hook inside the onExpand callback. Could you tell me how did you fetch the data?

foreign-sapphire•17mo ago

Hey @jaoc1811 sorry for a week late response 🙏 You can try to render a component that uses useOne internally or just do one big useMany in the parent component and use the values in the onExpand. The choice depends on your case but useOne will probably fit better 🤔

other-emerald•17mo ago

Hi! Thanks for the response! But creating a component that uses useOne internally wouldn't cause the problem that @dipbazz was having about the query getting triggered nonstopping?

foreign-sapphire•17mo ago

Maybe you can use the expandedRowRender and benefit from the expanded parameter to determine if the row is expanded or not and then enable/disable the useOne query by it 🤔