Search code examples
reactjstypescriptreduxredux-toolkitrtk-query

Send function as parameter in rtk query

I have a service that is getting user token from a react hook, so I can't use the service directly in the Redux Toolkit Query (RTKQ) API. So I'm trying to use composition and pass the service later when the mutation gets called.

Is it possible to pass the service as an argument to the RTKQ function?

I tried to do this. It works but I get an error log that says a non-serializable data is stored in the state.

my example mutation:

removeItemById: builder.mutation<void, {service: ItemService; uuid: string}>({
  invalidatesTags: ['Beneficiaries'],
  queryFn: async ({ service, uuid }) => {
    const result = await service.remove(uuid);
    return { data: result };
  },
})

usage:

const [remove, { isLoading, isError, isSuccess }] = useRemoveItemByIdMutation();

const handleRemove = () => {
  remove({service: itemService, uuid});
};

error:

A non-serializable value was detected in the state, in the path: `item.queries.getItems({}).originalArgs.add`
Solution

  • Let's think what you send to parameters params will be handled by redux to something like

    dispatch({type:'query', payload: {params}})

    It's technically possible to insert non-serializable items into the store

    This is kinda anti-pattern but still possible to send payload as functions (that's why it's only warning).

    So you can either

    • disable the warning
    const store = configureStore({
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
})
    • or find another way to send services

    see: