useQuery (from React Query) with React Hook Form throws Invalid Hook Call

[arun0009]

Getting below error:

Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

My Sign In Form

export const SignInView: FC<{ path: string }> = (): ReactElement => {
  type Inputs = {
    userId: string;
  };

 function fetchUser(id: string): UseQueryResult {
  return useQuery('fetchUser', async () => {
    const response: Response = await fetch("http://localhost:8080/users/" + id, RequestInit = {method: 'GET'});
    return response;
  });
}

  const { register, handleSubmit, getValues, errors, setError } = useForm<Inputs>();

  const onSubmit = (): void => {
    const { userId } = getValues();
    //throws Invalid hook call. Hooks can only be called inside of the body of a function component
    const { data } = fetchUser(userId);
   //....some logic here.
}

return (
    <div className='container container-rounded border w-25 bg-white text-center'>
      <div className='row p-2 mt-2 text-center'>
        <div className='col'>
          <p className='h3' data-content='header'>
            Demo
          </p>
        </div>
      </div>

      <div className='row p-2'>
        <div className='col'>
          <h5>Sign in</h5>
        </div>
      </div>

      <Form onSubmit={handleSubmit(onSubmit)}>
        <div className='row'>
          <div className='col form-group'>
            <Form.Control
              type='text'
              name='userId'
              autoFocus
              ref={register({ required: true })}
              className='form-control form-control-lg'
              placeholder='User ID'
              data-field='userId'
            />
          </div>
        </div>

        <div className='row p-2'>
          <div className='col text-center'>
            <Button
              type='submit'
              className='default btn btn-primary btn-lg btn-block button-rounded'
              data-action='sign-in'>
              Sign in
            </Button>
          </div>
        </div>
      </Form>
)

I have seen suggestions that say useMutation instead and invoke mutate callback function but this is a GET call, so useQuery is more appropriate in this case.

[TkDodo]

hooks don’t work that way, so this is not possible. If you really want to use a query for this, you have to:

• add the userId to the query key
• have local state for that userId
• disable the query while you have no userId
• set the userId on form submit.

However, signin is almost always a mutation. It logs the user in, so it must create a token or a cookie or some server session. And you don’t want refetches to happen here - this would log the user in again. I think you need to decouple this a bit:

• sign in is a mutation
• retrieving user information is a query