like-gold
like-gold17mo 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
extended-salmon
extended-salmon17mo 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:
plain-purple
plain-purple17mo 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 🤔
like-gold
like-gold17mo ago
Thank you @salihozdemir and @aliemirs for your help. I will try to solve it as you have mentioned.
optimistic-gold
optimistic-gold10mo 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?
plain-purple
plain-purple10mo 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 🤔
optimistic-gold
optimistic-gold10mo 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?
plain-purple
plain-purple10mo 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 🤔