sad-indigoS
Refine7mo ago
5 replies
sad-indigo

Lazy loading a nested Ant Design table

I'm trying to lazy load a nested table but running into trouble since if I call
useTable
in the function passed into onExpand, I get an error saying that React hooks always need to be called in the same order. I've also tried to use a simple API request to the endpoint I need but I'm missing auth headers since the request isn't being made by my data provider.

Here's some context about my architecture: I have a resource called "PublishResults" with two foreign key attributes, "draft_event_id" , a FK to the "DraftEvents" table and "latest_request_id", which is a FK to the RequestHistory table. Also, the only connection between the RequestHistory and the DraftEvent table is that there's a key within RequestHistory's jsonb notes column called "draft_event_id". In addition, there may be multiple RequestHistory records per one DraftEvent.

Here's what I want to do: I'm displaying a table of PublishResults in refine using the useTable hook and I want to show all of the RequestHistory records in the nested table that relate to the "draft_event_id" of the PublishResult record. I only want to request the data necessary for the nested table if the user expands the row. How do I do this?
Was this page helpful?