Unable to convert example of `useSwr` hook to use `react-query`'s `useMutation` hook?

Question

I tried changing the useSwr hook to use:

import { useMutation } from 'react-query';

const { data: user, mutate: mutateUser } = useMutation<User>('/api/user');

But I get an error stating:

No mutationFn found

Unable to solve this. I tried adding mutationFn inside useMutation like the following & it works but it is static:

const { data: user, mutate: mutateUser } = useMutation<User>('/api/user', {
    mutationFn: () => {
      const u: User = {
        isLoggedIn: false,
        avatarUrl: '',
        login: '',
      }
      return Promise.resolve(u)
    },
  })

If I use a dynamic request using something like axios then do I need to put the fetchJson from login.tsx to mutationFn hook?

Basically, I want to use react-query instead of swr & ky instead of fetchJson & unable to find a solution?

I'm pretty sure it's really simple but haven't been able to make it work.

Stackblitz Demo → https://stackblitz.com/edit/next-iron-session-with-react-query?file=lib%2FuseUser.ts (go to /login route, enter a github username like vvo & click Login to see the error in console)

Repo → https://github.com/deadcoder0904/next-iron-session-with-react-query

samuel silva · Accepted Answer · 2022-06-05T15:22:32.000

2

By navigating through the documentation it seems that the first argument of the useMutation if the mutationFn and not the mutationKey

useMutation

What if the code changes to:

const { data: user, mutate: mutateUser } = useMutation<User, unknown, { username: string }>((body) => {
      return fetchJson('/api/login', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body),
      })
    }, {
      mutationKey: '/api/user'
    }
  })

and when you need to actually mutate

mutateUser({ username: 'Username' })

edited Jun 05 '22 at 15:22

answered Jun 05 '22 at 13:43

samuel silva

432
3
8

naah, the above code where i wrote `Promise.resolve` is right. i checked it works. it redirects when i used `loggedIn: true`. i'm asking how do i send `username` in `login.tsx` on line no. 25 → https://github.com/deadcoder0904/next-iron-session-with-react-query/blob/master/pages/login.tsx#L25? all i want is the logic for auth remains in one place, specifically, the `useUser` hook. – deadcoder0904 Jun 05 '22 at 14:24
1

just edited the question to make it clear that the 2nd code block works :) – deadcoder0904 Jun 05 '22 at 14:31
basically, my question is what should i put in `mutationFn` because there is no equivalent of it in `swr` so i'm confused what to actually put in there? empty function doesn't work. – deadcoder0904 Jun 05 '22 at 14:38
1

got it, I've just updated the answer to match with what you're looking for. This way when you invoke the mutation callback you can send from outside the body and keep the logic hidden in the `useUser` hook – samuel silva Jun 05 '22 at 15:01
that is exactly what i want to do but i get 1 last error: `Argument of type '{ username: string; }' is not assignable to parameter of type 'void'.ts(2345)` on the last block of code `mutateUser`. if i solve this, then everything works, thanks! – deadcoder0904 Jun 05 '22 at 15:11
1

In this case, `useMutation` is already prepared to receive a generic that specifies the parameter of the mutator function. Gonna update the answer to include it as well – samuel silva Jun 05 '22 at 15:21
wow, thank you so much. this was pita for too long :) – deadcoder0904 Jun 05 '22 at 15:25

Unable to convert example of `useSwr` hook to use `react-query`'s `useMutation` hook?

1 Answers1