Using RTK query where user can interact with data and change the data

[duchung95]

I am quite new to RTK query and looking to use RTK query in one of our app. I hope someone can guide me on this.
We have a dashboard page with 3 components:

• A table on the left that display a list names where user can click each row to analyze the item in detail so each time user click a row, we make an API call to fetch the detail and store in Redux store. Let call the detail data as "points"

• A table display (in the middle) the detail for the name item selected on the left table showing "points" of data (storing in the Redux store) and user can remove the rows of data by using a select box on the left most column.

• A scatter plot on the right side where we display the points that are in the table in the middle and user can remove each point on the chart and the change will reflect on the table in the middle.

I am trying to use RTK Query to replace the useEffect (for fetching and manage data cache) and Redux store but haven't found a good way since the user can modify the data using the table in the middle or the chart. Please help pointing a way I can use RTK query or React Query in this case. Thank you!

[GowthamKrishna362]

There is a way to manually update the cached data https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates, but also- when do you want user changes to be saved? Does it happen after each modification? If then that would probably fall into the optimistic/pessimistic update pattern which is described in the docs and you can manually update cache.
However, if you want to batch it and save it later, like when user clicks the save button, you might be better off creating a local copy of the state after the api resolves, make any updates to the local state and then saving it when you want.