How to Update Cache Data from Middleware?

[User6531]

Hey everyone, I'm working on creating a WebSocket connection using SignalR inside my middleware, and now I'm looking to update cache data. Can it be done? Need your insights and help on this!

In the example below, I attempted to dispatch applicationApi.util.updateQueryData, but it seems like it's not working as expected. Any insights or tips would be greatly appreciated!

// signalRMiddleware.ts

let connection: HubConnection | null = null;

const createSignalRConnection = (getState: () => RootState) => {
  const state = getState();
  const { connectionHub } = state;
  const internalToken = selectInternalToken(state);

  const options: IHttpConnectionOptions = {
    accessTokenFactory: () => internalToken,
  };

  return new HubConnectionBuilder()
    .withUrl(`${connectionHub}`, options)
    .withAutomaticReconnect()
    .build();
};

const signalRMiddleware: Middleware =
  ({ getState, dispatch }) =>
  (next) =>
  (action) => {
    if (action.type === startSignalRConnectionActionType) {
      if (!connection || connection.state === HubConnectionState.Disconnected) {
        connection = createSignalRConnection(getState);
        startSignalRConnection();

        connection.on("OnEvent", (res) => {
          dispatch(
            applicationApi.util.updateQueryData(
              "getApplications",
              undefined,
              (prevApplications: TApplication[]): TApplication[] => [
                ...prevApplications,
                res,
              ],
            ),
          );
        });
      }
    }

    return next(action);
  };

// store.ts

const createStore = (
  options?: ConfigureStoreOptions["preloadedState"] | undefined,
) =>
  configureStore({
    reducer,

    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(mainApi.middleware, signalRMiddleware),

    devTools: process.env.NODE_ENV === "development",

    ...options,
  });

export const store = createStore();

[EskiMojo14]

The only comment i'd make is that updateQueryData uses Immer, so you can mutate the parameter:

          dispatch(
            applicationApi.util.updateQueryData(
              "getApplications",
              undefined,
              (prevApplications: TApplication[]) => { prevApplications.push(res) },
            ),
          );

Other than that, it's worth noting that the second parameter needs to match the argument used, and the cache entry needs to already be in state (i.e. you need something to be subscribed to it).

[User6531]

Thank you! The issue was that I attempted to update the cache before the cache entry was already in the state.

[User6531]

I'm still experiencing a dispatch types mismatch, and the error is provided below.
Can you please tell me how I can handle it?

// middleware dispatch type
dispatch: Dispatch<AnyAction>

// updateQueryData dispatch expected
dispatch: ThunkDispatch<...>

// error: 
// Argument of type 'ThunkAction<PatchCollection, RootState, ... > is not assignable to parameter of type 'AnyAction'

[EskiMojo14]

You need to provide a type for your Middleware:

const signalRMiddleware: Middleware<{}, AppDispatch, RootState> =

you may be able to use the types inferred from store, but they may cause a circular type so you might have to make do with using the ThunkDispatch type.

The point is that updateQueryData is a thunk, and the default Dispatch type doesn't know those are allowed.

[User6531]

Yeah, I've actually tried using types inferred from the store, but it ends up causing a circular type issue, Instead, I just ignore that problem and go ahead to hardcode a type.

Thank you so much! That was incredibly helpful.

[User6531]

@EskiMojo14

Hey, I've got another question. In the example we talked about earlier, the getApplications query works well without any arguments. Now, I need to include a bunch of parameters like page numbers, filters, and more into this query. The catch is, all these parameters are stored directly in the component, so I can't snag them and pass them into the query in the middleware. Consequently, things aren't working as they used to.
Could you assist me with this, please?

[User6531]

I think transferring all the parameters to the Redux store and subsequently accessing them through middleware could potentially solve this issue. However, I'm not entirely confident about whether this solution will effectively address the problem.

[EskiMojo14]

You need the same parameters to access/modify the same cache entry - it's up to you how you achieve this, but storing them in Redux would certainly be an approach that would work.