GraphQL बनाम REST: 2024 में JavaScript प्रोजेक्ट के लिए कौन सी तकनीक चुनें?

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

GraphQL बनाम REST: वह द्वंद्व जो कल ही शुरू हो जाना चाहिए था

\n\n

परिचित स्थिति: आप JavaScript (या Node.js) पर एक नया प्रोजेक्ट लिख रहे हैं, और अचानक सवाल उठता है — फ्रंटएंड और बैकएंड के बीच संवाद के लिए क्या उपयोग करें? क्लासिक REST या फैशनेबल GraphQL? इस विषय पर बहस थमती नहीं है, और प्रत्येक डेवलपर की अपनी 'पक्की' राय होती है।

\n\n

आइए ईमानदारी से कहें: REST एक पुराना-अच्छा दोस्त है जो कभी निराश नहीं करता। GraphQL एक उद्दंड नवागंतुक है जो आपकी सभी समस्याओं को हल करने का वादा करता है। लेकिन कैसे चुनें? मैं आपको सिर्फ सूखी तुलना तालिकाएँ नहीं दिखाऊंगा, बल्कि JavaScript पर वास्तविक युद्ध-स्तरीय उदाहरण दिखाऊंगा। आप देखेंगे कि कोड कैसा दिखता है, कहाँ छिपी समस्याएँ उत्पन्न होती हैं, और सबसे महत्वपूर्ण — कब क्या उपयोग करना है।

\n\n

वैसे, यदि आप Python पर डेवलप कर रहे हैं (और यह साइट Python के बारे में है, इसे न भूलें), तो इन तकनीकों के बीच चयन के सिद्धांत बहुत समान हैं। लेकिन आज हम JavaScript के बारे में बात कर रहे हैं — वह भाषा जो क्लाइंट और सर्वर दोनों पर राज करती है।

\n\n

संक्षिप्त परिचय: 60 सेकंड में REST और GraphQL

\n\n

REST (Representational State Transfer)

\n

यह एक आर्किटेक्चरल शैली है जहाँ प्रत्येक संसाधन (उपयोगकर्ता, पोस्ट, टिप्पणी) का अपना URL होता है। आप /api/users/1 पर GET-अनुरोध करते हैं — आपको उपयोगकर्ता मिलता है। उसके पोस्ट चाहिए? /api/users/1/posts पर जाएँ। सब कुछ सरल, पूर्वानुमानित है, लेकिन... कभी-कभी बहुत अधिक शब्दाडंबरपूर्ण।

\n\n

GraphQL

\n

यह एक क्वेरी भाषा और निष्पादन वातावरण है। आपके पास एक endpoint (आमतौर पर /graphql) होता है, और आप स्वयं तय करते हैं कि आप कौन सा डेटा प्राप्त करना चाहते हैं। कोई over-fetching (जब 50 फ़ील्ड आती हैं, लेकिन 3 चाहिए) और under-fetching (जब पेज बनाने के लिए 5 अनुरोध करने पड़ते हैं) नहीं।

\n\n

युद्ध-स्तरीय तुलना: JavaScript पर कोड लिखना

\n\n

आइए एक विशिष्ट कार्य की कल्पना करें: पेज पर उपयोगकर्ता की प्रोफ़ाइल को उसके अंतिम तीन पोस्ट के साथ प्रदर्शित करना है। दोनों दृष्टिकोणों की तुलना करें।

\n\n

Express (Node.js) पर REST API का उदाहरण

\n\n
// Express पर REST-सर्वर\nconst express = require('express');\nconst app = express();\n\napp.get('/api/users/:id', (req, res) => {\n  // उपयोगकर्ता का सारा डेटा लौटाता है\n  const user = users.find(u => u.id === req.params.id);\n  res.json(user); // { id, name, email, phone, address, ... }\n});\n\napp.get('/api/users/:id/posts', (req, res) => {\n  // उपयोगकर्ता के सभी पोस्ट लौटाता है\n  const posts = posts.filter(p => p.userId === req.params.id);\n  res.json(posts); // [{ id, title, body, createdAt, ... }]\n});\n\n// क्लाइंट कोड (fetch पर फ्रंटएंड)\nasync function loadProfile(userId) {\n  // पहला अनुरोध — उपयोगकर्ता प्राप्त करें (बहुत सारा अनावश्यक डेटा आता है)\n  const userResponse = await fetch(`/api/users/${userId}`);\n  const user = await userResponse.json();\n  \n  // दूसरा अनुरोध — पोस्ट प्राप्त करें (फिर से अनावश्यक डेटा)\n  const postsResponse = await fetch(`/api/users/${userId}/posts`);\n  const allPosts = await postsResponse.json();\n  \n  // केवल 3 नवीनतम पोस्ट लें\n  const latestPosts = allPosts.slice(0, 3);\n  \n  return { user, posts: latestPosts };\n}
\n\n

समस्या स्पष्ट है: हमें बहुत सारा अनावश्यक डेटा (over-fetching) मिला। हमें email, phone, address की क्या आवश्यकता है जब हम केवल नाम और अवतार दिखा रहे हैं? और पोस्ट 100 हो सकते हैं, लेकिन हमें सिर्फ 3 चाहिए।

\n\n

Apollo Server (Node.js) पर GraphQL का उदाहरण

\n\n
// GraphQL स्कीमा\nconst typeDefs = `\n  type User {\n    id: ID!\n    name: String\n    avatar: String\n    posts(limit: Int): [Post]\n  }\n\n  type Post {\n    id: ID!\n    title: String\n    body: String\n  }\n\n  type Query {\n    user(id: ID!): User\n  }\n`;\n\n// रिज़ॉल्वर (डेटा प्राप्त करने का तर्क)\nconst resolvers = {\n  Query: {\n    user: (parent, { id }) => users.find(u => u.id === id),\n  },\n  User: {\n    posts: (parent, { limit }) => {\n      let result = posts.filter(p => p.userId === parent.id);\n      if (limit) result = result.slice(0, limit);\n                

ब्लॉग

पुस्तक अनुशंसाएँ