Best practices for manipulating large data tables with react query
Hi,
I am developing both backend and frontend of my application. I am running into troubles when fetching and manipulating data for a big table.
I will explain a simplified scenario that highlights my problem.
I have 3 database tables: documents, tags and comments.
A document can be linked to multiple tags (think of "news article", "sports", any category really), and a document can have a single comment attached.
The backend provides many routes, for example GET /document/{doc_id}, GET /tag/{tag_id}, GET /comment/{comment_id}
In the frontend, I want to show a subset of documents as well as their tags and comments in a big table (e.g. the subset could be the users favorite documents, or the documents filtered by some search whatever)
I could implement a route GET /data_table that returns a list of [{document, tags, comment}, {document, tags, comment}, ...]
This will return a lot of data, and tags will most likely be redundant. But it is very easy to render in the frontend as I have everything I need from that one API call.
Now I want to implement modification of the data. Lets say the user can double click a table row, and then change the comment. Therefore, I would call something like PATCH /comment/{comment_id}. This will update the comments content on the server, but the change is not reflected in the table. What to do now? I could invalidate the GET /data_table and retrieve all the data again, but that does not sound very efficient to me?
I could also implement the route GET /data_table to return a list of ids [{document_id, tag_ids, comment_id}, {document_id, tag_ids, comment_id}, ...].
To render the data table, I would have to fetch all the data using the routes GET /document/{doc_id}, GET /tag/{tag_id}, GET /comment/{comment_id}. This will probably lead to 1000s of API calls.
However, when I modify a comment in the table, I can call PATCH /comment/{comment_id}, invalidate the query ( GET /comment/{comment_id}) and just refetch that specific entry.
3 Replies
foreign-sapphire•3y ago
This will update the comments content on the server, but the change is not reflected in the table.Would an optimistic update make sense? Then you could refetch in the background without a UX hit: https://tanstack.com/query/v5/docs/react/guides/optimistic-updates
xenial-blackOP•3y ago
I am not sure about this. I am concerned about the amount of data that has to be re-fetched on every mutation. Even if I do optimistic updates, i would still have to invalidate the query and re-fetch
inland-turquoise•3y ago
If you're concerned about the amount of data couldn't you just add pagination to it to limit how much data is returned?