[RTKQ] How to manually update state of streaming API from the component?

[thisisgit]

Hi, I'm using RTKQ + firebase(firestore) and have implemented streaming updates to subscribe and listen to real time changes from the components.

I designed my stream API's state as:

type StreamState<T> = EntityState<T> & {
  added: T[];
  modified: T[];
  removed: T[];
};

where when new item is:

• added, replaces added array,
• updated, replaces modified array, and
• removed, obviously replaces removed array,

and EntityState gets updated as well whenever above mutations occur. (added&modified: upsertMany, removed: removeMany)

I designed it this way because in one component, it only consumes accumulated items returned by the query (EntityState), and in the other component, it only cares about the changed items and their cause of change (add, edit, remove).

The problem I'm facing is with the latter component.
When subscribing to the stream, I'm using selectors to split items into added, modified, and removed:

// ...
const { items, added, modified, removed } = useStreamQuery(queryParam, {
  selectFromResult: result => ({
    ...result,
    items: selectors.selectAll(result.data),
    added: selectors.selectAdded(result.data),
    modified: selectors.selectModified(result.data),
    removed: selectors.selectRemoved(result.data),
  }),
});

And handle them in useEffect:

useEffect(() => {
  if (added.length > 0) {
    // Do something when item/s is/are added
  }
}, [added]);
useEffect(() => {
  if (modified.length > 0) {
    // Do something when item/s is/are modified
  }
}, [modified]);
useEffect(() => {
  if (removed.length > 0) {
    // Do something when item/s is/are removed
  }
}, [removed]);

What I want to do here is to clear each state after data is consumed by the component.
In RTK days, I could simply dispatch clearAdded action to reset added property of the state to an empty array, but in RTK"Q", I can't find a way to do that.

Is there any way to achieve this?

[thisisgit]

I got idea from optimistic updates and somehow managed to do it but feels little hacky.

First, I created a mutation that dispatches an action to clear the state:

// ...
clearAddedItems: build.mutation<{}, StreamItems>({
  queryFn: () => {
    // It throws error if undefined is returned. No choice but to return an empty object.
    return { data: {} };
  },
  onQueryStarted: (arg, { dispatch }) => {
    dispatch(
      streamApi.util.updateQueryData('stream', arg, draft => {
        draft.added = [];
      }),
    );
  },
}),
// ...
export const { useStreamQuery, useClearAddedItemsMutation } = streamApi;

And in the component:

// ...
const [clearAdded, {}] = useClearAddedItemsMutation();
// ... 

useEffect(() => {
  if (added.length > 0) {
    // Do something when item/s is/are added
    // ...

    // Clear added items
    clearAdded(queryParam);
  }
}, [added, clearAdded, queryParam]);

This works but... is there better solution than this?

[VietNguyenR]

Do you found a better solution? Can you share?