JavaScript के साथ GraphQL API: चरण-दर-चरण व्यावहारिक ट्यूटोरियल

JavaScript के साथ GraphQL API का परिचय

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

इस ट्यूटोरियल में, हम Apollo Server का उपयोग करके Node.js पर एक पूर्ण GraphQL API बनाएंगे। आप स्कीमा परिभाषित करना, रिज़ॉल्वर लिखना, क्वेरी और म्यूटेशन निष्पादित करना सीखेंगे। सभी कोड उदाहरण चलाने के लिए तैयार हैं और व्यवहार में परीक्षण किए गए हैं।

काम करने के लिए आपको Node.js संस्करण 14 या उच्चतर और JavaScript का बुनियादी ज्ञान चाहिए। यदि आप Express.js से परिचित हैं, तो Apollo Server आपको बहुत समान लगेगा - यह भी middleware का उपयोग करता है और HTTP के साथ काम करता है।

प्रोजेक्ट की स्थापना और कॉन्फ़िगरेशन

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

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

आवश्यक निर्भरताएँ स्थापित करें:

npm install @apollo/server graphqlnpm install nodemon --save-dev

एक फ़ाइल index.js बनाएं - यह हमारे एप्लिकेशन का प्रवेश बिंदु होगी।

प्रोजेक्ट की मूल संरचना इस प्रकार दिखेगी:

graphql-tutorial/├── node_modules/├── index.js├── package.json└── package-lock.json

पहला GraphQL सर्वर बनाना

एक न्यूनतम सर्वर से शुरू करते हैं जो एक सरल संदेश लौटाता है। index.js खोलें और निम्नलिखित कोड जोड़ें:

import { ApolloServer } from '@apollo/server';import { startStandaloneServer } from '@apollo/server/standalone';

// GraphQL स्कीमा परिभाषित करेंconst typeDefs = `#graphql  type Query {    hello: String  }`;

// हैलो क्वेरी के लिए रिज़ॉल्वरconst resolvers = {  Query: {    hello: () => 'नमस्ते, दुनिया! यह पहला GraphQL अनुरोध है!',  },};

// सर्वर इंस्टेंस बनाएंconst server = new ApolloServer({  typeDefs,  resolvers,});

// सर्वर शुरू करेंconst { url } = await startStandaloneServer(server, {  listen: { port: 4000 },});

console.log(`🚀 सर्वर चालू है: ${url}`);

सर्वर को node index.js कमांड से चलाएं। ब्राउज़र खोलें और http://localhost:4000 पर जाएं। आप Apollo Sandbox इंटरफ़ेस देखेंगे, जहां आप क्वेरी निष्पादित कर सकते हैं।

बाएं पैनल में दर्ज करें:

query {  hello}

और "Run" बटन दबाएं। जवाब में आपको मिलेगा:

{  "data": {    "hello": "नमस्ते, दुनिया! यह पहला GraphQL अनुरोध है!"  }}

डेटा प्रकार और जटिल क्वेरी के साथ काम करना

GraphQL आपको अपने स्वयं के डेटा प्रकार परिभाषित करने की अनुमति देता है। आइए अपने API के लिए उपयोगकर्ता और पुस्तकों का एक मॉडल बनाएं।

index.js फ़ाइल को अपडेट करें:

import { ApolloServer } from '@apollo/server';import { startStandaloneServer } from '@apollo/server/standalone';

// प्रकार परिभाषित करेंconst typeDefs = `#graphql  type Book {    id: ID!    title: String!    author: String!    publishedYear: Int  }

  type User {    id: ID!    name: String!    email: String!    books: [Book]  }

  type Query {    books: [Book]    book(id: ID!): Book    users: [User]    user(id: ID!): User  }`;

// परीक्षण डेटाconst books = [  { id: '1', title: 'हैरी पॉटर', author: 'जे.के. राउलिंग', publishedYear: 1997 },  { id: '2', title: 'द लॉर्ड ऑफ द रिंग्स', author: 'जे.आर.आर. टॉल्किन', publishedYear: 1954 },  { id: '3', title: '1984', author: 'जॉर्ज ऑरवेल', publishedYear: 1949 },];

const users = [  { id: '1', name: 'इवान इवानोव', email: 'ivan@example.com', bookIds: ['1', '2'] },  { id: '2', name: 'अन्ना पेट्रोवा', email: 'anna@example.com', bookIds: ['3'] },];

// रिज़ॉल्वरconst resolvers = {  Query: {    books: () => books,    book: (_, { id }) => books.find(book => book.id === id),    users: () => users,    user: (_, { i