Building Scalable Real-time Dashboards with MongoDB Change Streams and React Query (In Hindi)

Real-time Dashboards बनाना: MongoDB Change Streams और React Query का जादू

दोस्तों, आज हम एक ऐसी चीज़ के बारे में बात करेंगे जो आजकल के मॉडर्न वेब ऐप्स की जान है—Real-time Data। मान लो आप एक डैशबोर्ड बना रहे हो जहाँ डेटा हर सेकंड बदल रहा है, जैसे कि Stock Prices या Live Delivery Tracking। पुराने ज़माने में हम setInterval लगाकर हर 2 सेकंड में API call करते थे, जिससे सर्वर पर लोड पड़ता था। आज हम सीखेंगे कि कैसे MongoDB Change Streams और React Query का यूज़ करके इसे बहुत ही स्मूथ और स्केलेबल बनाया जा सकता है।

Change Streams क्या बला है?

आसान शब्दों में कहें तो MongoDB Change Streams आपके डेटाबेस में होने वाले बदलावों (Insert, Update, Delete) को "सुनता" है। जैसे ही डेटाबेस में कुछ चेंज होता है, MongoDB तुरंत सर्वर को बता देता है। हम इस इवेंट को Socket.io के थ्रू क्लाइंट (React) तक भेजेंगे।

Backend Setup: MongoDB Change Streams

सबसे पहले, हमारे Node.js सर्वर में Mongoose का उपयोग करके Change Stream सेटअप करते हैं। ध्यान रहे, आपका MongoDB एक Replica Set मोड में होना चाहिए।

// server.js
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const Order = require('./models/Order');

const app = express();
const server = http.createServer(app);
const io = new Server(server, { cors: { origin: '*' } });

const changeStream = Order.watch();

changeStream.on('change', (change) => {
  if (change.operationType === 'insert' || change.operationType === 'update') {
    io.emit('orderUpdate', change.fullDocument);
  }
});

server.listen(4000, () => console.log("Server running on port 4000"));

Frontend Implementation: React Query का कमाल

क्लाइंट साइड पर, हम React Query (TanStack Query) का यूज़ करेंगे ताकि हमारे पास पहले से फेच किया हुआ डेटा हो और हम उसे रियल-टाइम में अपडेट कर सकें।

// useOrderData.js
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:4000');

export const useOrderData = () => {
  const queryClient = useQueryClient();

  // Initial Fetch
  const { data } = useQuery({
    queryKey: ['orders'],
    queryFn: async () => {
      const res = await fetch('http://localhost:4000/orders');
      return res.json();
    }
  });

  // Listen for real-time updates
  useEffect(() => {
    socket.on('orderUpdate', (newOrder) => {
      queryClient.setQueryData(['orders'], (oldData) => {
        return [...oldData, newOrder];
      });
    });

    return () => socket.off('orderUpdate');
  }, [queryClient]);

  return data;
};

ध्यान देने वाली बातें (Pro-Tips)

• Scalability: बहुत ज़्यादा इवेंट्स आने पर सर्वर क्रैश न हो, इसके लिए हमेशा Socket.io के Rooms का इस्तेमाल करें।
• Performance: React Query का setQueryData बहुत ही पावरफुल है, लेकिन बहुत ज़्यादा अपडेट्स आने पर कंपोनेंट बार-बार रेंडर हो सकता है। यहाँ आप useMemo या memoization का यूज़ ज़रूर करें।
• Database Access: Change Streams सिर्फ Replica Sets या Sharded Clusters पर चलते हैं, लोकल डेवलपमेंट के लिए MongoDB को Replica Set में बदलना न भूलें।

Toh dosto, humne aaj seekha...

हमने देखा कि कैसे हम MongoDB के पावरफुल Change Streams और React Query के QueryClient के तालमेल से एक ऐसा डैशबोर्ड बना सकते हैं जो बिना पेज रिफ्रेश किए लाइव अपडेट होता है। ये तरीका न केवल तेज़ है, बल्कि ये आपके सर्वर के रिसोर्सेज को भी बचाता है। इसे अपने अगले MERN प्रोजेक्ट में ज़रूर ट्राई करना!