React Query v3 to v4

[luis-cicada]

Hi,
We are currently using React Query on a project I'm working. We have created something called store which is a NPM Package that inlcudes the queries and mutations that can be used across platforms (web and mobile).

The store project has clasess that are exported something like this:

/**
 * Auth class
 *
 * @exports
 *
 */
export class Auth {
  /**
   * Attempt to login the user
   * @exports
   *
   * @param username The username of the user
   * @param password The password of the user
   */
  private async login(username: string, password: string): Promise<UseMutationResult<ILoginResponse | ILoginError>> {
    try {
      const options = {
        path: 'auth/login',
        method: 'POST' as HTTPMethod,
        body: {
          content: 'json' as body,
          data: {
            username,
            password,
          },
        },
      }

      const response: any = await request<ILoginResponse | ILoginError>(options)

      return response
    } catch (err) {
      return err
    }
  }

  public loginUser: UseMutationResult = useMutation((params: ILogin) => this.login(params.username, params.password))

}

So then we can import them as the following code:

import {Auth } from 'store package';

const {loginUser} = new Auth();

I'm trying to migrate from react-query v3.13.3 to react-query v4.0.0-alpha.9, since we are tying to implement an offline solution.

In the current version of React Query (v3.13.3) using the store as a class based modules work perfect. However when we migrated to v4 we are getting this error:

After checking at the documention seems we have to export a function with the useQuery or useMutation instead of having them gruoped inside a class. Have the store rewrite to function based will involved a lot of effort, any idea here? we really want to keep it up with React Query .

Thanks!

[TkDodo]

hmm, I think calling loginMFAChallenge.loginUser, which calls a hook under the hood would violate the rules-of-hooks because hooks have to start with use.... So i think purely from a react-hooks perspective, you can't have classes that export hooks.

generally, there weren't really any changes in this regard between v3 and v4. It looks more like you're maybe having two different versions of react-query so the react context is not picked up? Like maybe your npm package has v4 but the consumer still has v3? does your package have react-query as a peerDependency?

[luis-cicada]

Actually now that you mention it I just checked the store npm package and that could be the issue. We are using "react-query": "^3.12.0", so I will upgrade the version to "v4.0.0-alpha.9" and see if that solves the issue 😄

[luis-cicada]

@TkDodo it did work. Thanks 😸