JavaScript के साथ GraphQL API: शुरुआती लोगों के लिए चरण-दर-चरण ट्यूटोरियल

GraphQL और इसके लाभों का परिचय

GraphQL Facebook द्वारा विकसित API के लिए एक क्वेरी भाषा है। REST के विपरीत, जहां प्रत्येक एंडपॉइंट डेटा की एक निश्चित संरचना लौटाता है, GraphQL क्लाइंट को केवल आवश्यक फ़ील्ड का अनुरोध करने की अनुमति देता है। यह API को अधिक लचीला और कुशल बनाता है।

इस ट्यूटोरियल में, हम Apollo Server लाइब्रेरी का उपयोग करके Node.js पर एक सरल GraphQL सर्वर बनाएंगे, स्कीमा सेट करेंगे, क्वेरी और म्यूटेशन लागू करेंगे। आप सीखेंगे:

\n
• Apollo Server को कैसे स्थापित और कॉन्फ़िगर करें
\n
• डेटा प्रकारों के साथ स्कीमा कैसे परिभाषित करें
\n
• क्वेरी और म्यूटेशन के लिए रिज़ॉल्वर कैसे लिखें
\n
• GraphQL Playground के माध्यम से API का परीक्षण कैसे करें
\n

काम करने के लिए आपको Node.js (संस्करण 16+) और JavaScript की बुनियादी समझ की आवश्यकता होगी। चलिए शुरू करते हैं!

चरण 1: प्रोजेक्ट सेटअप और निर्भरताएँ स्थापित करना

प्रोजेक्ट के लिए एक नई निर्देशिका बनाएँ और package.json को इनिशियलाइज़ करें:

mkdir graphql-tutorial\ncd graphql-tutorial\nnpm init -y

आवश्यक पैकेज स्थापित करें:

npm install apollo-server graphql

पैकेज apollo-server GraphQL के लिए एक तैयार HTTP सर्वर प्रदान करता है, और graphql स्कीमा और क्वेरी के साथ काम करने के लिए कोर है।

चरण 2: बुनियादी स्कीमा और रिज़ॉल्वर बनाना

एक फ़ाइल index.js बनाएँ और Apollo Server को इम्पोर्ट करें:

const { ApolloServer, gql } = require('apollo-server');\n\n// मेमोरी में डेटा (डेटाबेस का अनुकरण)\nconst books = [\n  { id: '1', title: 'वॉर एंड पीस', author: 'लियो टॉल्स्टॉय', year: 1869 },\n  { id: '2', title: 'क्राइम एंड पनिशमेंट', author: 'फ्योडोर दोस्तोयेव्स्की', year: 1866 },\n  { id: '3', title: 'द मास्टर एंड मार्गरीटा', author: 'मिखाइल बुल्गाकोव', year: 1967 }\n];

अब gql टैग का उपयोग करके स्कीमा को परिभाषित करें:

const typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n    year: Int\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n\n  type Mutation {\n    addBook(title: String!, author: String!, year: Int): Book\n  }\n`;

रिज़ॉल्वर बनाएँ - ऐसे फ़ंक्शन जो प्रत्येक क्वेरी फ़ील्ड के लिए डेटा लौटाते हैं:

const resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  },\n  Mutation: {\n    addBook: (parent, args) => {\n      const newBook = {\n        id: String(books.length + 1),\n        title: args.title,\n        author: args.author,\n        year: args.year\n      };\n      books.push(newBook);\n      return newBook;\n    }\n  }\n};

चरण 3: सर्वर चलाना और परीक्षण करना

सर्वर का एक इंस्टेंस बनाएँ और इसे चलाएँ:

const server = new ApolloServer({ typeDefs, resolvers });\n\nserver.listen().then(({ url }) => {\n  console.log(`🚀 सर्वर इस पते पर तैयार है: ${url}`);\n});

सर्वर को node index.js कमांड से चलाएँ। डिफ़ॉल्ट रूप से, Apollo Server पोर्ट 4000 पर चलता है और GraphQL Playground खोलता है - क्वेरी परीक्षण के लिए एक इंटरैक्टिव वातावरण।

एक सरल क्वेरी चलाने का प्रयास करें:

query {\n  books {\n    title\n    author\n  }\n}

उत्तर में चयनित फ़ील्ड के साथ पुस्तकों की एक सूची होनी चाहिए:

{\n  "data": {\n    "books": [\n      { "title": "वॉर एंड पीस", "author": "लियो टॉल्स्टॉय" },\n      { "title": "क्राइम एंड पनिशमेंट", "author": "फ्योडोर दोस्तोयेव्स्की" },\n      { "title": "द मास्टर एंड मार्गरीटा", "author": "मिखाइल बुल्गाकोव" }\n    ]\n  }\n}

अब एक नई पुस्तक जोड़ने के लिए म्यूटेशन का परीक्षण करें:

mutation {\n  addBook(title: "अन्ना कैरेनिना", author: "लियो टॉल्स्टॉय", year: 1877) {\n    id\n    title\n    author\n  }\n}

म्यूटेशन निष्पादित करने के बाद, सर्वर निर्दिष्ट ID के साथ नई पुस्तक की वस्तु लौटाएगा।

चरण 4: स्कीमा का विस्तार - कनेक्शन