Can I get all cache entries of a query in updateQueryData?

[kira-krul]

Here's my use case: I have a list endpoint with pagination. It is called with parameters like

{
  limit: 10,
  offset: 0,
  orderBy: 'title',
  orderDirection: 'asc'
}

and these values are only stored in a component's state. The result looks something like this:

{
  totalRecords: 123,
  records: [{ id: '12345', ... }]
}

There is also a mutation for changing a specific entry by id. But the problem is, I don't have the arguments I called the query with when I call api.utils.updateQueryData inside of onQueryStarted function in mutation

Ideally I'd want to have an array of all cache entries for the list endpoint, so that I could find and replace all of them that have the element with id I changed. Is there's a way to do that or add optimistic update in any other way?

[phryneas]

You could just extract them from the Redux store slice, like doing normal Redux.
But generally, this is probably a prime example where you would just invalidate state using invalidated/provides. Affected queries that are not being displayed any more will be removed from your state and queries that are now out of date will be refetched.

[kira-krul]

Doing it like normal Redux feels like not the RTKQ way. It would involve creating another slice just for an optimistic update, also I'm not sure how to select queries right when redux store looks like this

Invalidating tags is what I'm doing now, but it's not an optimistic update I was hoping to achieve.

[kira-krul]

ok I get it now, don't know why my morning brain thought I'd need a separate slice.

Anyway I can simply map over all values and select them by endpointName

Still, a helper for that would be useful not just for me

[phryneas]

Yeah, I think we'll add something like selectCacheEntriesProviding(tag, id) or similar in a future version, but it's not a high prio right now - glad you found something that works for you :)

[kira-krul]

Created a helper function to get them. Typescript isn't my forte so it's not the most clean or user-friendly way to do it but hey it works. Here's the function in case someone needs it:

import { Api } from '@reduxjs/toolkit/dist/query';
import api from 'service/api/api';
import store from 'service/store';

function getQueryCacheEntries<
  Endpoints extends keyof Api<any, any, any, any>['endpoints'] = string
>(query?: Endpoints) {
  const { queries } = store.getState()[api.reducerPath];
  let allQueries = [];
  for (let queryCache of Object.values(queries)) {
    if (!query || queryCache?.endpointName === query) {
      allQueries.push(queryCache);
    }
  }
  return allQueries;
}

export default getQueryCacheEntries;

The query argument is optional, if omitted you'll get all cache entries for all queries

Here's how I use it:

onQueryStarted: (
  { id, ...patch }: UpdateUserRequest,
  { dispatch, queryFulfilled }
) => {
  const queries =
    getQueryCacheEntries<keyof typeof userApi.endpoints>('users');
  for (let query of queries) {
    const data = query?.data as PaginatedData<UserResponse>;
    if (!query?.data || !find(data.records, { id })) return;

    const patchResult = dispatch(
      userApi.util.updateQueryData(
        'users',
        query.originalArgs as PaginatedRequest,
        (draft) => {
          const index = findIndex(draft.records, { id });
          draft.records[index] = {
            ...draft.records[index],
            ...patch,
          };
        }
      )
    );
    queryFulfilled.catch(patchResult.undo);
  }
},

Everything that starts with a capital here is a type, userApi is api created by api.injectEndpoints, find is from lodash

I could make a more specific version for updating data with pagination, but I think it makes sense to have a function like this too