onQueryStarted -> updateQueryData: pass query parameter

[bogdan0083]

Hello guys! I have a simple mutation:

  const [updateTodo, result] = usePatchTodosByTodoIdMutation();

  const update = (value: boolean) => {
    updateTodo({todoId: id!, body: {completed: value}});
  }

And I want to implement optimistic updates, so I add onQueryStarted function:

      async onQueryStarted(arg, {dispatch, queryFulfilled}) {
        const patchResult = dispatch(
          // Notice {_page: 1}? If I hardcode {_page: 1} and my updated todo item on page 1 – then it works.
          // otherwise it's not.
          todosApiSlice.util.updateQueryData('getTodos', {_page: 1}, (draft) => {
            if (draft) {
              todosAdapter.updateOne(draft, {
                id: arg.todoId,
                changes: {completed: arg.body.completed, title: arg.body.title, description: arg.body.description},
              });
            }
          })
        )
        try {
          await queryFulfilled;
        } catch (_) {
          dispatch(patchResult.undo);
        }

But my getTodos query accepts _page parameter:

    getTodos: build.query<GetTodosApiResponse, GetTodosApiArg>({
      query: (queryArg) => ({
        url: `/todos`,
        params: {_page: queryArg._page},
      }),
    }),

So my question is – Is there a way to pass additional parameter to my mutation query? I want to be able to pass _page parameter to update concrete cache key?

Please note that I'm using TypeScript and my api is partially generated by rtk-query-codegen-openapi library. I can't just pass any arbitary argument to my mutation except what declared in mutation arguments type.

Thanks a lot! ❤️

[phryneas]

Please note that I'm using TypeScript and my api is partially generated by rtk-query-codegen-openapi library. I can't just pass any arbitary argument to my mutation except what declared in mutation arguments type.

That shifts the answer from a "yes" to a "no", I'm sorry. But you could use api.utils.selectInvalidatedBy to get all cache entries that contain your resource and update them accordingly.

[bogdan0083]

I wonder if fixing what was mentioned in #2726 would help to fix this issue as well? If we allow passing custom arg and response types for certain endpoints in enhanceEndpoints that would eliminate a lot of restrictions with typescript.

I'm not a very proficient typescript user but I'll see if I can send PR with suggested fixes myself (in a week or two, when I have a spare time).

Anyways, big thanks for the answer!

[phryneas]

updating arg types as well would significantly increase complexity on that... I gotta see if that's feasible.

[phryneas]

see #2730