React-Query useMutation: is not assignable to parameter of type "mutationkey"

Question

I have api call that looks like

const getMutationService = () => {
  return {
    createMeme: async (
      _private: string,
      templateId: string,
      file: Blob,
      memeText?: string,
      title?: string,
      tags?: Array<string>,
    ): Promise<MemeCreateMemeResponse | undefined> => {
      return await memeApi.memePost({
        _private,
        templateId,
        file,
        memeText,
        title,
        tags,
      });
    },
  };
};

and I am calling this in another hook like

const mutationService = getMutationService();



 const { mutate: createMeme } = useMutation(mutationService.createMeme);

Its throwing an error of

Argument of type '(_private: string, templateId: string, file: Blob, memeText?: string, title?: string, tags?: Array) => Promise<MemeCreateMemeResponse | undefined>' is not assignable to parameter of type 'MutationKey'.

I have done other mutation calls with the same pattern. Why is this one throwing this mutation key error? Confused

TkDodo · Accepted Answer · 2022-07-15 09:47:38Z

35

useMutation can only accept one parameter. If you need multiple parameters, please use an object.

answered Jul 15, 2022 at 9:47

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Siraj Alam Over a year ago

An example would be appreciated.

TkDodo Over a year ago

tkdodo.eu/blog/…

ドラゴンハートゼクモル · Accepted Answer · 2023-03-23 10:53:42Z

1

Also, the useMutation hook accepts an async function.

const foo = async (param: Param) => { ... };
// Optional: You can also specify the return type
const foo = async (param: Param): Promise<Return> => { ... };

useMutation(foo);

answered Mar 23, 2023 at 10:53

ドラゴンハートゼクモル

3192 silver badges7 bronze badges

Comments

Sarthak Saklecha · Accepted Answer · 2024-02-08 11:57:53Z

1

What the other answers do not mention is that mutationFn also takes only 1 param not just useMutation. example -

useMutation({
mutationKey : 'abc',
mutationFn : ({a, b ,c}) => fetch(../)
})

WRONG -> mutationFn : (a,b,c) => fetch

CORRECT -> mutationFn : ({a, b ,c}) => fetch(../)

answered Feb 8, 2024 at 11:57

Sarthak Saklecha

2774 silver badges9 bronze badges

Collectives™ on Stack Overflow

React-Query useMutation: is not assignable to parameter of type "mutationkey"

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related