اذهب إلى المحتوى
  • -1

جلب البيانات من الخادم بواسطة Next js

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

السؤال

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

الرجاء مساعدتي في جلب البيانات من الخادم.

route.js

/**
 * method: GET
 * path  : api/properties
*/
export const GET = async( request ) => {
    try {
        await connectDB()

        const properties = await Property.find({})
        return new Response(JSON.stringify(properties), { status: 200 })
    } catch (error) {
        console.log(error)
        return new Response('Something went wrong', { status: 500 })
    }
}

connectDB

import mongoose from 'mongoose'

let connected = false

const connectDB = async () => {
    mongoose.set('strictQuery', true)

    // If the database is already connected, don't connect again
    if (connected) {
        console.log('Mongo DB is already connected ...')
        return;        
    }

    // Connect to MongoDB
    try {
        await mongoose.connect(process.env.MONGO_URI);  
       connected = true
       console.log('MongoDB connected ...')
    } catch (error) {
        console.log(error)
    }
}

export default connectDB;

في هذه الحالة عندما أدخل على الرابط التالي http://localhost:3000/api/properties تظهر لي مصفوفة الproperties

propeties/page.jsx

import React from "react";
import PropertyCard from '@/components/PropertyCard';

async function fetchProperties() {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_DOMAIN}/properties`)
    if (!res.ok) {
      throw new Error('Failed to fetch data')    
    }
    return res.json()
  } catch (error) {
    console.log(error)
  }
}

const PropertiesPage = async () => {
  const properties = await fetchProperties()
  console.log(properties)
  return (
    <section className='px-4 py-6'>
      <div className='container-xl lg:container m-auto px-4 py-6'>
        {properties.length === 0 ? (
          <p>No properties found</p>
        ) : (
          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
            {properties.map((property) => (
              <PropertyCard key={property._id} property={property} />
            ))}
          </div>
        )}
      </div>
    </section>
  );
};
export default PropertiesPage;

في هذه الحالة مصفوفة الproperties فارغة وتظهر لي No properties found في طرف العميل

شكرا.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

وعليكم السلام ورحمة الله وبركاته .

أعتقد أن الخطأ هو في عملية ال chach حيث يقوم nextjs بعمل caching عند إستدعاء ال api بإستخدام fetch .

ولحل تلك المشكلة نضيف revalidate هكذا :

async function fetchProperties() {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_DOMAIN}/properties`,{ next: { revalidate: 10 } })
    if (!res.ok) {
      throw new Error('Failed to fetch data')    
    }
    return res.json()
  } catch (error) {
    console.log(error)
  }
}

وهكذا نقوم بجعل next بحذف ال chache بعد 10 ثواني .

ومن المفترض أن هذا يحل تلك المشكلة .

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 9 ساعة قال محمد عاطف17:

وعليكم السلام ورحمة الله وبركاته .

أعتقد أن الخطأ هو في عملية ال chach حيث يقوم nextjs بعمل caching عند إستدعاء ال api بإستخدام fetch .

ولحل تلك المشكلة نضيف revalidate هكذا :

async function fetchProperties() {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_DOMAIN}/properties`,{ next: { revalidate: 10 } })
    if (!res.ok) {
      throw new Error('Failed to fetch data')    
    }
    return res.json()
  } catch (error) {
    console.log(error)
  }
}

وهكذا نقوم بجعل next بحذف ال chache بعد 10 ثواني .

ومن المفترض أن هذا يحل تلك المشكلة .

شكرا.

بصراحة في بعض الأحيان لا أفهم شيئا.

في الصباح طرحت السؤال والكود لايعمل.

الآن صار الكود يشتغل دون أن أقوم بأي تغيير

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 دقائق مضت قال محمود سعداوي2:

شكرا.

بصراحة في بعض الأحيان لا أفهم شيئا.

في الصباح طرحت السؤال والكود لايعمل.

الآن صار الكود يشتغل دون أن أقوم بأي تغيير

إذا المشكلة كما وضحت لك أنه تم عمل حفظ للبيانات chaching ويتم مسحها بعد مدة معينة من الممكن أن تكون عدة ساعات .

الآن إذا لم تقم بإضافة الكود الذى أرفقته لك وقمت بإضافة بيانات في قاعدة البيانات في جدول الproperties  ستجد أن البيانات الجديدة لا تظهر لأنه قام بعمل caching للبيانات القديمة .

والكود الذى أرفقته لك يقوم بتجاهل حفظ ال chaching ويقوم بفرض إعادة إحضار البيانات الجديدة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...