this.client.defaultMutationOptions is not a function react-query, pocketbase, nextjs

Question

I'm trying to follow a series on using Pocketbase with NextJS, but I'm following a video which uses create-react-app, so I'm needing to make some changes along the way. It's been fun, but I'm stuck on this bit, and google gave no joy. It doesn't seem to be nextjs specific, but this is the first time I've seen mutations, so I don't really know. Here is the code:

"use client";
import pb from "@/lib/pocketbase";
import { useState } from "react";
import { useMutation } from "react-query";

export default function useLogin() {
  async function login({ email, password }) {
    const authData = await pb
      .collection("users")
      .authWithPassword(email, password);
  }

  return useMutation(login);
}

and the error is

TypeError: this.client.defaultMutationOptions is not a function

Everything was working fine until I tried to introduce the useMutation bit. For reference, the video is at https://www.youtube.com/watch?v=kBI_Bp06DpE&list=PLqFvlDFoiZ-0ixIS8D4JTHRuVy_rkfROY&index=4

I'd appreciate any help. Thanks.

Unless

Answer 1

You need to use new react-query v5 syntax with mutationFn key:

useMutation({
    mutationFn: login,
    onSuccess: () => {
      // Success actions
    },
    onError: (error) => {
      // Error actions
    },
  });

Ecesis

Answer 2

wrong package "react-query" it should be "@tanstack/react-query"

import {useMutation} from "@tanstack/react-query"

aslo resintall react-query

npm install @tanstack/react-query

Evangelicalism