reactjs - Fang en RTK Query fuldført handling i redux toolkit middleware

Jeg vil udløse nogle sideeffekter efter, at en af mine RTKQ-forespørgsler er blevet fuldført. Jeg besluttede, at den bedste måde ville være at gøre det inde i en middleware, men jeg er ikke sikker på, hvad den korrekte måde er at fange denne handling på.

Efter noget fejlfinding ender jeg med noget som nedenfor, men det ser lidt fiflet ud for mig.

const recreateTransferOnAppStartMiddleware: Middleware<unknown, RootState> = 
  storeApi => next => action => {
    const isFulfilledAction = action.type === `api/executeQuery/fulfilled`;
    const isGetUserAction = action.meta
      && action.meta.arg
      && action.meta.arg.endpointName === `getUser`;

    if (isFulfilledAction && isGetUserAction)
      recreateTransfers(storeApi);

    return next(action);
};

Mit største problem med denne kode er, at den er baseret på strenge, når den tjekker for endpointName og action.type.

Svar #1

Efter lidt undersøgelser fandt jeg ud af, at det er muligt at få direkte adgang til en endpoint matcher:

const recreateTransferOnAppStartMiddleware: Middleware<unknown, RootState> = storeApi => next => action => {
    const isGetUserFulfilled = userApiSlice.endpoints.getUser.matchFulfilled(action);

    if (isGetUserFulfilled)
        recreateTransfers(storeApi);

    return next(action);
};

Svar #2

Endpointens onQueryStarted egenskab kan være mere brugbar for dig her. Du kan køre noget ekstra logik, når forespørgslen starter, eller når den afsluttes, dvs. når den er fuldført.

Her er et eksempel:

const api = createApi({
  baseQuery: ....,
  endpoints: (build) => ({
    getUser: build.query<...., ....>({
      query: ....,
      async onQueryStarted(_, { queryFulfilled }) {
        // `onStart` side-effect
        // anything you want to run when the query starts

        try {
          const { data } = await queryFulfilled
          // `onSuccess` side-effect
          // anything you want to run when the query succeeds
        } catch (err) {
          // `onError` side-effect
          // anything you want to run when the query fails
        }
      },
    }),
  }),
})