خطأ عند جلب البيانات من الخادم بواسطة react و tanstack-query

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

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

قمت ببناء مكون React للتحقق مما إذا كان المستخدم قد فعل حسابه. حسب نتيجة العملية، أريد عرض أحد المكونات التالية:

1.نجاح التحقق:

          <>
            <AiOutlineCheckCircle className="text-teal-600 dark:text-teal-400 text-6xl mx-auto animate-bounce mb-4" />
            <h1 className="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white mb-2">
              {/* {data?.message} */}
              Valid
            </h1>
            <Link
              to="/login"
              className="inline-block bg-teal-600 hover:bg-teal-700 text-white font-medium py-2 px-6 rounded-full transition-colors duration-300"
            >
              Login
            </Link>
          </>

2.فشل التحقق

          <>
            <AiOutlineWarning className="text-red-500 dark:text-red-400 text-6xl mx-auto animate-pulse mb-4" />
            <h1 className="text-xl font-semibold text-gray-800 dark:text-white">
              error
            </h1>
            <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
              Please check your verification link or request a new one.
            </p>
          </>

المشكلة:
في الوقت الحالي، عند فتح صفحة التحقق، يظهر أولًا مكون النجاح لبضع ثوانٍ، ثم يتحول فجأة إلى مكون الفشل، رغم أنّ عملية التحقق في قاعدة البيانات تمّت بنجاح.

للمزيد من التوضيح تفضلوا:

كود الواجهة الخلفية (Node.js/Express):

export const verifyAccount = asyncHandler(async(req, res) => {
  const { userId, token } = req.params
  // Check if user exist
  const user = await User.findById(userId)
  if (!user) {
    return res.status(400).json({ message: "Invalid Verification Link" })
  }

  const verificationToken = await VerificationToken.findOne({
    userId: user._id,
    token: token,
  })
  if (!verificationToken) {
    return res.status(400).json({ message: "Invalid Link" });
  }
  user.isAccountVerified = true
  await user.save()

  await VerificationToken.deleteOne({ _id: verificationToken._id });

  res.status(200).json({ message: "Your Account is Verified!" })
})

علما أنه في حتى حاة ظهور المكون الخاص بفشل العملية في الواجهة الأمامية فإنه تم تفعيل

  user.isAccountVerified = true
  await user.save()

  await VerificationToken.deleteOne({ _id: verificationToken._id });

أما بالنسبة للواجهة الأمامية

api

export const verifyEmailApi = async ({ userId, token }) => {
  try {
    const res = await axios.get(summaryApi.auth.verify(userId, token))
    console.log("api", res.data)
    return res.data
  } catch (error) {
    console.error(error);
    throw error;
  }
}

queries

export const useVerifyEmail = () => {
  return useMutation({
    mutationFn: verifyEmailApi,
    onSuccess: (data) => {
      console.log(data)
    }
  });
}

VerifEmailComponent

const VerifyEmail = () => {
  const { userId, token } = useParams();
  const { mutate, data, isError, isPending } = useVerifyEmail();
  console.log(" data", data) // undefined

  const verify = () => {
    if (userId && token) {
      console.log("👉 sending mutation with", { userId, token, data }); // data: undefined, token: defined, userId: defined
      mutate({ userId, token });
    }
  }

  useEffect(() => {
    verify()
  }, [userId, token, mutate]);

  if (isPending) {
    return <Spinner/>
  }
  
  return (
    <section className="flex items-center justify-center min-h-[calc(100vh-2rem)] px-4">
      // الكود الذي قمت بإدراجه سلفا
    </section>
  );
};

سؤالي:
لماذا يظهر مكون النجاح أولًا لثوانٍ ثم يتحول إلى مكون الفشل، رغم أنّ التحقق في قاعدة البيانات تم بنجاح؟ وكيف يمكنني تعديل الكود الأمامي بحيث يظهر المكون الصحيح مباشرة بناءً على نتيجة العملية دون هذا التبديل الغير مرغوب فيه؟

شكرا جزيلا.

عماد شيخ العشرة · منذ 5 ساعة

هل من الممكن ارسال منطق التحكم بظهور المكون الخاص بالنجاح او الفشل فأنا لا اراه هنا قد يكون الخلل منه.

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

بتاريخ 2 دقائق مضت قال عماد شيخ العشرة:

هل من الممكن ارسال منطق التحكم بظهور المكون الخاص بالنجاح او الفشل فأنا لا اراه هنا قد يكون الخلل منه.

تقصد هذا المكون

import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useVerifyEmail } from "../lib/queries/auth.queries";
import { AiOutlineCheckCircle, AiOutlineWarning } from "react-icons/ai";
import Spinner from "../components/loaders/Spinner";

const VerifyEmail = () => {
  const { userId, token } = useParams();
  const { mutate, data, isError, isPending } = useVerifyEmail();
  console.log(" data", data) // undefined

  const verify = () => {
    if (userId && token) {
      console.log("👉 sending mutation with", { userId, token, data }); // data: undefined, token: defined, userId: defined
      mutate({ userId, token });
    }
  }

  useEffect(() => {
    verify()
  }, [userId, token, mutate]);

  if (isPending) {
    return <Spinner/>
  }
  
  return (
    <section className="flex items-center justify-center min-h-[calc(100vh-2rem)] px-4">
      <div className="w-full max-w-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-md p-6 text-center transition-all duration-300">
        {isError ? (
          <>
            <AiOutlineWarning className="text-red-500 dark:text-red-400 text-6xl mx-auto animate-pulse mb-4" />
            <h1 className="text-xl font-semibold text-gray-800 dark:text-white">
              error
            </h1>
            <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
              Please check your verification link or request a new one.
            </p>
          </>
        ) : (
          <>
            <AiOutlineCheckCircle className="text-teal-600 dark:text-teal-400 text-6xl mx-auto animate-bounce mb-4" />
            <h1 className="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white mb-2">
              {/* {data?.message} */}
              Valid
            </h1>
            <Link
              to="/login"
              className="inline-block bg-teal-600 hover:bg-teal-700 text-white font-medium py-2 px-6 rounded-full transition-colors duration-300"
            >
              Login
            </Link>
          </>
        )}
      </div>
    </section>
  );
};

export default VerifyEmail;

عماد شيخ العشرة · منذ 5 ساعة

جرب هذا الحل وهو تأكد ان الdata موجودة ولا لا وعلى اساسها نختار النجاح او غيره:

useEffect(() => {
  verify();
}, [userId, token]);

هل بامكانك تبديل خطاف useEffect بالتالي واخباري بالنتائج.

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

بتاريخ 8 دقائق مضت قال عماد شيخ العشرة:
جرب هذا الحل وهو تأكد ان الdata موجودة ولا لا وعلى اساسها نختار النجاح او غيره:
useEffect(() => {
  verify();
}, [userId, token]); 
هل بامكانك تبديل خطاف useEffect بالتالي واخباري بالنتائج.

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

عماد شيخ العشرة · منذ 4 ساعة

return (
  <section className="flex items-center justify-center min-h-[calc(100vh-2rem)] px-4">
    <div className="w-full max-w-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-md p-6 text-center transition-all duration-300">
      {isError ? (
        <>
          <AiOutlineWarning className="text-red-500 text-6xl mx-auto animate-pulse mb-4" />
          <h1 className="text-xl font-semibold">Error</h1>
          <p className="text-sm mt-2">Invalid or expired link.</p>
        </>
      ) : data ? (
        <>
          <AiOutlineCheckCircle className="text-teal-600 text-6xl mx-auto animate-bounce mb-4" />
          <h1 className="text-xl font-semibold">{data.message}</h1>
          <Link
            to="/login"
            className="inline-block bg-teal-600 hover:bg-teal-700 text-white font-medium py-2 px-6 rounded-full transition-colors duration-300"
          >
            Login
          </Link>
        </>
      ) : null}
    </div>
  </section>
);

فلنتأكد من المعلومات هل هي موجودة ام لا باستخدام data ? وهل يمكنك ارفاق ماذا يحصل في ال console ايضا؟

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

بتاريخ 3 دقائق مضت قال عماد شيخ العشرة:

return (
  <section className="flex items-center justify-center min-h-[calc(100vh-2rem)] px-4">
    <div className="w-full max-w-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-md p-6 text-center transition-all duration-300">
      {isError ? (
        <>
          <AiOutlineWarning className="text-red-500 text-6xl mx-auto animate-pulse mb-4" />
          <h1 className="text-xl font-semibold">Error</h1>
          <p className="text-sm mt-2">Invalid or expired link.</p>
        </>
      ) : data ? (
        <>
          <AiOutlineCheckCircle className="text-teal-600 text-6xl mx-auto animate-bounce mb-4" />
          <h1 className="text-xl font-semibold">{data.message}</h1>
          <Link
            to="/login"
            className="inline-block bg-teal-600 hover:bg-teal-700 text-white font-medium py-2 px-6 rounded-full transition-colors duration-300"
          >
            Login
          </Link>
        </>
      ) : null}
    </div>
  </section>
);

فلنتأكد من المعلومات هل هي موجودة ام لا باستخدام data ? وهل يمكنك ارفاق ماذا يحصل في ال console ايضا؟

data دائما undefined

تفضل صورة تبين نتائج console

عماد شيخ العشرة · منذ 4 ساعة

اعتقد ان سبب المشكلة هو التغير في ال depencincies الخاصة ب useEffect جرب التالي:

useEffect(() => {
  if (userId && token) {
    mutate({ userId, token });
  }
}, []);

بدل استخدام دالة verify وغالبا سيعمل.

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

بتاريخ 1 دقيقة مضت قال عماد شيخ العشرة:
اعتقد ان سبب المشكلة هو التغير في ال depencincies الخاصة ب useEffect جرب التالي:
useEffect(() => {
  if (userId && token) {
    mutate({ userId, token });
  }
}, []);
بدل استخدام دالة verify وغالبا سيعمل.

نفس الشيء أخي، نفس الخطأ في الـUI

عماد شيخ العشرة · منذ 4 ساعة

هل بالامكان ارسال المشروع لتفحصه؟

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

بتاريخ الآن قال عماد شيخ العشرة:

هل بالامكان ارسال المشروع لتفحصه؟

هذا المشروع كاملا فقط قم بـ

cd frontend
npm run frontend

**********************
cd backend
npm run backend

hsoub.zip

شكرا جزيلا

خطأ عند جلب البيانات من الخادم بواسطة react و tanstack-query

السؤال

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

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

Recommended Posts

عماد شيخ العشرة

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

عماد شيخ العشرة

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

عماد شيخ العشرة

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

عماد شيخ العشرة

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

عماد شيخ العشرة

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

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية