React डेवलपर के लिए GraphQL की मूल बातें

REST निश्चित आकार वाले एंडपॉइंट उपलब्ध कराता है: GET /users/:id क्लाइंट की आवश्यकता चाहे जो भी हो, पूरा उपयोगकर्ता ऑब्जेक्ट लौटाता है। GraphQL क्लाइंट को यह सटीक रूप से बताने देता है कि उसे कौन-से फ़ील्ड चाहिए, जिससे आवश्यकता से अधिक डेटा प्राप्त करना और आवश्यकता से कम डेटा प्राप्त करना, दोनों समाप्त होते हैं। कम डेटा मिलने पर कई अनुरोध करने पड़ते हैं।

एक GraphQL क्वेरी एक ही राउंड-ट्रिप में उपयोगकर्ता, उसकी पोस्ट और हर पोस्ट के लेखक को प्राप्त कर सकती है।

हर GraphQL API को Schema Definition Language (SDL) में लिखी गई स्कीमा द्वारा परिभाषित किया जाता है। स्कीमा प्रकारों, उनके फ़ील्ड और रूट Query, Mutation तथा Subscription प्रकारों की घोषणा करती है, जिन पर क्लाइंट काम कर सकते हैं।

स्कीमा क्लाइंट और सर्वर के बीच अनुबंध होती है। स्कीमा पर सहमति बन जाने के बाद फ़्रंटएंड और बैकएंड टीमें समानांतर रूप से काम कर सकती हैं।

GraphQL क्वेरी फ़ील्ड चुनती है: { user(id: "1") { name email posts { title } } }। नेस्टेड फ़ील्ड एक ही अनुरोध में संबंधों का अनुसरण करते हैं। एलियास फ़ील्ड के नाम बदल देते हैं: { me: user(id: "1") { name } }। फ़्रैगमेंट कई क्वेरी में फ़ील्ड चयन का पुनः उपयोग करते हैं।

वेरिएबल क्वेरी को पुनः उपयोग योग्य बनाते हैं: query GetUser($id: ID!) { user(id: $id) { name } } और variables: { id: "1" }।

GraphQL स्कीमा के हर फ़ील्ड के लिए सर्वर पर एक रिज़ॉल्वर फ़ंक्शन होता है। जब कोई क्लाइंट user.name की क्वेरी करता है, तो user रिज़ॉल्वर उपयोगकर्ता ऑब्जेक्ट प्राप्त करता है और name रिज़ॉल्वर (या डिफ़ॉल्ट रिज़ॉल्वर) name फ़ील्ड लौटाता है।

फ़ील्ड-स्तरीय समाधान ही GraphQL को केवल अनुरोधित डेटा सटीक रूप से प्राप्त करने में सक्षम बनाता है।

यदि आप 100 पोस्ट की सूची की क्वेरी करते हैं और हर पोस्ट में उसका लेखक शामिल है, तो सरल कार्यान्वयन लेखकों के लिए डेटाबेस की 100 अलग-अलग क्वेरी चलाता है। यह N+1 समस्या अनुकूलन के बिना GraphQL API को धीमा कर देती है।

DataLoader हर अनुरोध के लिए कैश और बैच फ़ंक्शन का उपयोग करके सभी लेखक खोजों को एक ही डेटाबेस क्वेरी में बैच करता है और N+1 समस्या हल करता है।

Apollo Studio और GraphQL Playground ब्राउज़र-आधारित यूआई हैं, जिनसे GraphQL एपीआई को इंटरैक्टिव ढंग से एक्सप्लोर किया जा सकता है। वे स्कीमा से फ़ील्ड के लिए स्वतः-पूर्णता देते हैं, क्वेरी के परिणाम दिखाते हैं और प्रकारों का दस्तावेज़ साथ-साथ दिखाते हैं।

क्लाइंट कोड लिखने से पहले किसी अपरिचित GraphQL एपीआई को समझने का सबसे तेज़ तरीका प्लेग्राउंड का उपयोग करना है।

GraphQL एपीआई एक इंट्रोस्पेक्शन क्वेरी के माध्यम से अपना स्कीमा उपलब्ध कराते हैं: { __schema { types { name } } }। क्लाइंट स्वयं स्कीमा पर क्वेरी चला सकते हैं और उपलब्ध प्रकारों, फ़ील्ड तथा आर्ग्युमेंट का पता लगा सकते हैं।

graphql-codegen जैसे कोड जनरेशन उपकरण इंट्रोस्पेक्शन का उपयोग करके एपीआई स्कीमा से मेल खाने वाले TypeScript प्रकार अपने-आप बनाते हैं।

GraphQL म्यूटेशन डेटा में बदलाव करते हैं: mutation CreatePost($input: PostInput!) { createPost(input: $input) { id title } }। सब्सक्रिप्शन एक स्थायी कनेक्शन (आमतौर पर WebSocket) स्थापित करते हैं और अपडेट भेजते हैं: subscription { postAdded { id title } }।

तीनों रूट प्रकार (Query, Mutation, Subscription) एक ही फ़ील्ड-चयन सिंटैक्स का उपयोग करते हैं।

GraphQL उन अनुप्रयोगों में उत्कृष्ट है जिनमें जटिल, नेस्टेड डेटा संबंधी आवश्यकताएँ हों, अलग-अलग क्लाइंट प्रकार (मोबाइल, वेब, TV) को फ़ील्ड के अलग-अलग उपसमुच्चय चाहिए हों, या एपीआई तेज़ी से विकसित हो रहे हों और एंडपॉइंट के संस्करण बनाने के बजाय फ़ील्ड को अप्रचलित करना पसंद किया जाता हो।

पूर्वानुमेय, सपाट संसाधन संरचना वाले CRUD एपीआई के लिए REST सरल होता है और ETag तथा कैश हेडर के माध्यम से उत्कृष्ट HTTP कैशिंग सुविधाएँ देता है।

Apollo Client सबसे अधिक सुविधाओं वाला GraphQL क्लाइंट है: सामान्यीकृत कैश, स्थानीय स्थिति प्रबंधन, सब्सक्रिप्शन और त्रुटि-संभालने वाले लिंक। URQL हल्का है, इसमें दस्तावेज़ कैश और सरल एपीआई होता है। graphql-request के साथ React Query, बिना उन्नत कैशिंग के बुनियादी क्वेरी+म्यूटेशन के लिए सबसे सरल तरीका है।

अपनी कैशिंग आवश्यकताओं के आधार पर चुनाव कीजिए: अलग-अलग क्वेरी में साझा की जाने वाली इकाइयों के लिए सामान्यीकृत कैैश (Apollo), और स्वतंत्र क्वेरी के लिए सरल दस्तावेज़ कैश (URQL या React Query)।

एक सरल SDL: type User { id: ID! name: String! posts: [Post!]! } type Post { id: ID! title: String! author: User! } type Query { user(id: ID!): User users: [User!]! }। विस्मयादिबोधक चिह्न नल-रहित फ़ील्ड दर्शाते हैं।

यह स्कीमा क्लाइंट को ठीक-ठीक बताता है कि प्रत्येक प्रकार में कौन-से फ़ील्ड मौजूद हैं और कौन-सी क्वेरी उपलब्ध हैं, जिससे प्रकार-सुरक्षित कोड जनरेशन संभव होता है।

GraphQL क्लाइंट को स्कीमा में परिभाषित क्वेरी भाषा का उपयोग करके ठीक वही फ़ील्ड माँगने देता है जिनकी उन्हें आवश्यकता है, इसलिए ज़रूरत से अधिक या कम डेटा प्राप्त नहीं होता। रिज़ॉल्वर प्रत्येक फ़ील्ड का उत्तर देते हैं; DataLoader N+1 समस्या हल करता है। इंट्रोस्पेक्शन TypeScript प्रकारों के लिए कोड जनरेशन सक्षम करता है। Apollo Client, URQL और React Query React के साथ संगत मुख्य GraphQL क्लाइंट हैं।

जटिल, नेस्टेड और कई क्लाइंट वाली डेटा आवश्यकताओं के लिए GraphQL चुनिए; पूर्वानुमेय संरचना वाले सरल CRUD के लिए REST चुनिए।