عدم إظهار علامة التحميل عند إرسال البيانات للخادم React Tanstack-query

محمود سعداوي2 · منذ 13 ساعة

السلام عليكم.

عند إرسال البيانات للخادم

const submitHandler = async (e) => {
    e.preventDefault();
    mutate(
      { unique_identifier, password },
      { onSuccess: () => navigate("/dashboard") }
    );
  };

لاتظهر علامة التحميل spinner في الكود التالي

<button
          type="submit"
          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-lg transition duration-300 ease-in-out"
          disabled={isLoading}
        >
          {isLoading ? (
            <ScaleLoader color="#ffffff" height={12} width={3} />
          ) : (
            "Login"
          )}
        </button>

loginApi

import axios from "axios";

export const loginApi = async(data) => {
    try {
        const res = await axios.post(
            `${process.env.REACT_APP_USER_URL}/login`,
            data
          );
          return res.data;
    } catch (error) {
        throw error.response.data.message
    }
}

useLoginMutation

import { useMutation } from "@tanstack/react-query";
import { loginApi } from "../api/userApi";

export const useLoginMutation = () => {
    return useMutation({
      mutationFn: async (data) => await loginApi(data),
      onSuccess: (data) => localStorage.setItem("token", data.token),
    });
};

شكرا.

Mustafa Suleiman · منذ 1 ساعة

تفقد أولاً هل يوجد خطأ أم لا، من خلال تعديل useLoginMutation، هل يتم طباعة رسالة خطأ؟

export const useLoginMutation = () => {
  return useMutation({
    mutationFn: async (data) => await loginApi(data),
    onSuccess: (data) => {
      localStorage.setItem("token", data.token);
    },
    onError: (error) => {
      
      console.error(error);
    }
  });
};

إن لم تجد خطأ، تأكد من استدعاء useLoginMutation في المكون الرئيسي، واستخرج isLoading و mutate:

const { mutate, isLoading } = useLoginMutation();

ثم استيراد ScaleLoader بشكل صحيح:

import { ScaleLoader } from "react-spinners";

والتأكد من أن مكتبة React Query تم إعدادها بشكل صحيح من خلال تغليف التطبيق بـ QueryClientProvider:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* باقي مكونات التطبيق */}
    </QueryClientProvider>
  );
}

إن استمرت المشكلة حاول إضافة تأخير في دالة loginApi:

export const loginApi = async(data) => {
    try {
        // هنا
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        const res = await axios.post(
            `${process.env.REACT_APP_USER_URL}/login`,
            data
        );
        return res.data;
    } catch (error) {
        throw error.response?.data?.message || 'An error occurred';
    }
}

إن استمرت قم بإضافة console.log للتحقق من قيمة isLoading:

console.log('Loading state:', isLoading);

محمود سعداوي2 · منذ 1 ساعة

بتاريخ 1 دقيقة مضت قال Mustafa Suleiman:
تفقد أولاً هل يوجد خطأ أم لا، من خلال تعديل useLoginMutation، هل يتم طباعة رسالة خطأ؟
export const useLoginMutation = () => {
  return useMutation({
    mutationFn: async (data) => await loginApi(data),
    onSuccess: (data) => {
      localStorage.setItem("token", data.token);
    },
    onError: (error) => {
      
      console.error(error);
    }
  });
};
إن لم تجد خطأ، تأكد من استدعاء useLoginMutation في المكون الرئيسي، واستخرج isLoading و mutate:
const { mutate, isLoading } = useLoginMutation();
ثم استيراد ScaleLoader بشكل صحيح:
import { ScaleLoader } from "react-spinners";
والتأكد من أن مكتبة React Query تم إعدادها بشكل صحيح من خلال تغليف التطبيق بـ QueryClientProvider:
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* باقي مكونات التطبيق */}
    </QueryClientProvider>
  );
}
إن استمرت المشكلة حاول إضافة تأخير في دالة loginApi:
export const loginApi = async(data) => {
    try {
        // هنا
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        const res = await axios.post(
            `${process.env.REACT_APP_USER_URL}/login`,
            data
        );
        return res.data;
    } catch (error) {
        throw error.response?.data?.message || 'An error occurred';
    }
}
إن استمرت قم بإضافة console.log للتحقق من قيمة isLoading:
console.log('Loading state:', isLoading);

المشكل يكمن أساسا في isLoding

أعتقد لابد من إستبدالها بـ isPending

Mustafa Suleiman · منذ 1 ساعة

إذن أنت تستخدم إصدار حديث، بدءًا من الإصدارات الحديثة من React Query (TanStack Query v5)، تم تغيير isLoading إلى isPending، ستجد تفصيل هنا:

status: loading has been changed to status: pending and isLoading has been changed to isPending and isInitialLoading has now been renamed to isLoading

عدم إظهار علامة التحميل عند إرسال البيانات للخادم React Tanstack-query

السؤال

محمود سعداوي2

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

محمود سعداوي2

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية