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.
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.
