CODEWITHSUNDEEP
reactjstypescriptreact-query
dev
dev

Reputation: 315

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

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

Upvotes: 19

Views: 20393

Answers (3)

Sarthak Saklecha
Sarthak Saklecha

Reputation: 217

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(../)

Upvotes: 0

ドラゴンハートゼクモル
ドラゴンハートゼクモル

Reputation: 319

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);

Upvotes: 1

TkDodo
TkDodo

Reputation: 28733

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

Upvotes: 33

Related Questions