Update response data of RTKQ without refetch

[xiyu95]

Hi, I would like to know if there is any way we can accomplish the task of updating the returned data from RTK query without a refetch.

I have a component that fetches a list of items and print out on the page. I am able to modify the list on the page. The modification actions includes create new item (POST), edit existing item (PUT), delete item from list(DELETE), which each calls an api to update the data to the backend. I see that RTKQ can take in tags and trigger a refetch while a mutation is called, and it will update the entire list of items with the newly modified ones. However, I would like to reduce the amount of the API calls (not to refetch), instead, modify the returned data by pushing the modified ones into the old list of items and trigger an re-render of the page. Is there any way to accomplish this with only RTKQuery?

I have thought about adding the list of first fetched items into a slice by using createSlice, but that seems a little bit redundant since then we will have two identical list in store?

[markerikson]

Yes, you're looking for "updating cached data manually":

• https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates

[xiyu95]

It seems like this is what I am looking for. I did a quick example of pessimistic update following the doc, but it does not change the cached data. Instead, I am catching an error as below:
[Immer] Immer only supports setting array indices and the 'length' property

Perhaps I am doing it wrong? Below is a sample for my implementation:

export const apiWithItems = baseApi.injectEndpoints({
  endpoints: (build) => ({
    getAllItems: build.query<Items[], void> ({
      async queryFn () {
        try {
          return { data: await getAllItems() }
        } catch (e) {
          return { error: createRequestError('Fetch Items failed', e) }
        }
      }
    }),
    createNewItem: build.mutation<Item, any>({
      query: (body) => ({
        url: "/item",
        method: "POST",
        body
      }),
      
      async onQueryStarted ({body}, { dispatch, queryFulfilled }) {
        try {
          const { data: newItem } = await queryFulfilled;
          
          const patchResult = dispatch(
            apiWithItems.util.updateQueryData('getAllItems', undefined, (draft) => {
              Object.assign(draft, newItem);
            })
          );
        } catch (e) {
          console.log(e);
        }
      }
    }),
  })
})

I checked the Network tab on my inspect window, and didn't see any error status code, new item is also being created successfully.

[markerikson]

Yeah, don't just blindly do Object.assign() like that. It works okay for objects,, but not arrays.

In this case, with a query named getAllItems, I'd assume that draft is wrapping an array, and so you'd want draft.push(newItem).

[xiyu95]

oh what a dumb mistake. That is working beautifully. Thank you so much for the help! I assume that we can also export apiWithItems to another endpoint file and use it there?

[markerikson]

You can export it, yeah, but what are you trying to accomplish specifically?

[xiyu95]

So the avoid refetch is a main result I'd like to see when making request on create/update/delete items. Looking at the doc for the update cache data made me thought of another tricky task that I am trying to accomplish, which is combining the response data of two queries. so it would look like this:
items = [{name: "car"}, {name: "phone"}], category=[{item: "phone", token: 1}, {item: "car", token: 2}]
and final data would be something like:
finalResult = [{name: "car", token: 1}, {name: "phone", token: 2}]
fetch getCategories first, then fetch getAllItems, finally combine the two by matched item.name and category.item.

The previous way of implementing this was to use asyncThunk and createSelector, but I am trying to upgrade into using RTKQ fully and remove all the asyncThunk. I am thinking using the manually update cache data on updating items by applying onQueryStarted on getCategories. Perhaps there is a better way I haven't discovered to accomplish such logic?