reactjs - useMutation ขึ้นอยู่กับ useQuery isError

ฉันมี useQuery hook ที่รับ id ทำการค้นหาฐานข้อมูลและส่งกลับสองผลลัพธ์ที่เป็นไปได้ คือ พบแถวและส่งมันกลับพร้อมกับ สถานะ HTTP 200 หรือไม่พบและส่งกลับ สถานะ HTTP 404

ถ้า 404 ถูกส่งกลับ ค่า isError ของ useQuery จะเป็นจริง ผมตรวจสอบ isError และตรวจสอบรหัสสถานะสำหรับ 404 ถ้าทุกอย่างนั้นเป็นจริง ผมต้องการเรียกฟังก์ชัน mutate

ฉันกำลังใช้ @tanstack/react-query v5 นี่คือสิ่งที่ฉันได้ลองทำ ทุกอย่างนี้อยู่ในไฟล์ที่ต่างกัน

นี่คือ useQuery

const getUser = async (cnum: string) => {
  const { data } = await api.get<UserInfo>(`/users/get/${cnum}`);
  return data;
};

export const useGetUserQuery = () => {
  const auth = useAuth();
  const cnum = auth.user?.profile.uid as string;

  return useQuery({
    queryKey: ['user', 'get', cnum],
    queryFn: () => getUser(cnum),
    enabled: !!auth && !!cnum,
    staleTime: Infinity,
  });
};

นี่คือ useMutation

const createUser = async (user: NewUser) => {
  const { data } = await api.post<UserInfo>(`/users/create`, user);
  return data;
};

export const useCreateUserMutation = () => {
  const queryClient = useQueryClient();
  const auth = useAuth();
  const user: NewUser = {
       // properties here
  }

  return useMutation({
    mutationKey: ['user', 'create', user],
    mutationFn: () => {
      return createUser(user);
    },
    onSuccess: async (data) => {
      await queryClient.invalidateQueries(
        {
          queryKey: ['user', 'get', data.cnum],
          refetchType: 'all', //using 'all' since I understand that the query won't be active since it is in error state, I could be wrong.
        },
      );
    },
  });
};

ในไฟล์ App.tsx ฉันกำลังทำสิ่งต่อไปนี้:

function App() {
const userInfo = useGetUserQuery();
const createUser = useCreateUserMutation();


if (userInfo.isSuccess) {
    sessionStorage.setItem('user', JSON.stringify(userInfo.data));
  }

if (userInfo.isError) {
    const submit = async () => {
      try {
        await createUser.mutateAsync();
      } catch (e) {
        console.log('error', e);
      }
    };
    void submit();
  }

return (
  ...
)
}

ฉันกำลังคาดหวังว่าเมื่อการเปลี่ยนแปลงสำเร็จ useQuery ก่อนหน้านี้จะถูกยกเลิกและดึงข้อมูลใหม่ ซึ่งจากนั้น (หวังว่า) จะคืนค่าผู้ใช้ใหม่ที่สร้างขึ้น ไม่แน่ใจว่าฉันสามารถตั้งค่าข้อมูลของ useQuery โดยตรงเมื่อการเปลี่ยนแปลงสำเร็จได้หรือไม่

สิ่งที่ฉันได้ดูเหมือนจะเป็นลูปไม่สิ้นสุด ซึ่งฟังก์ชัน mutate ถูกเรียกซ้ำๆ