I'm looking for a better way to structure Apollo Client Queries when building a table with tabs

I am building a page in React using Apollo Client to make GQL requests to the backend (that I'm also making). I frequently use this pattern for rendering data in tables where I have one query that gets only the Id's of the rows I want to render. I then loop over each Id and give that to a 'Row' to render by making a gql request for it's data. I like this pattern because it allows me to nest tables of data inside the table with no additional tweaking.

Example table with arrows to show or hide more information

export default function ExTable(){
    // Get just the ids of the rows that should be rendered
    const { data } = useGetTableDataIds()

    const rows = data.queryData ?? []

    return (
        <table>
            {
                rows.map(r=><TableRow key={`row-${r}`} id={r}/>)
            }
        </table>
    )
}

function TableRow({id}:{id:number}){
    // Load data for provided id
    const { data } = useGetRowData({variables: {id}})

    // Render row using data ...
    return <tr/>
}

What I don't like about this is all of the requests for data are made individually. I would prefer one request for all of the data. The thing I don't like is that if this data request lives at the top of the table it might be more difficult to prevent the whole table from re-rendering.

Are there any best practices on requesting data that may be frequently mutated for tables? What about when that data has a lot of optionally loaded nested data inside of it?