TypeScript GraphQL लाइब्रेरी: पूर्ण गाइड

TypeScript में GraphQL: लाइब्रेरीज़ और टूल्स का पूर्ण अवलोकन

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

GraphQL के लिए TypeScript क्यों?

GraphQL क्वेरी और प्रतिक्रियाओं की एक सख्त संरचना होती है, और TypeScript आपको संकलन चरण में इस संरचना की जांच करने की अनुमति देता है। यह गलत डेटा प्रकारों से संबंधित त्रुटियों के एक पूरे वर्ग को समाप्त करता है। मुख्य लाभ:

टाइप सुरक्षा — GraphQL स्कीमा से प्रकारों की स्वचालित पीढ़ी
ऑटो-कम्प्लीशन — IDE क्वेरी के फ़ील्ड और प्रकार सुझाता है
रीफैक्टरिंग — स्कीमा में बदलाव स्वचालित रूप से सभी क्लाइंट क्वेरी को अपडेट करता है
त्रुटियों को कम करना — कोड निष्पादित होने से पहले प्रकार की त्रुटियों का पता लगाया जाता है

सर्वर-साइड के लिए मुख्य लाइब्रेरीज़

1. TypeGraphQL

TypeGraphQL TypeScript पर GraphQL API बनाने के लिए सबसे लोकप्रिय लाइब्रेरी है। यह स्कीमा और रिज़ॉल्वर को परिभाषित करने के लिए डेकोरेटर का उपयोग करता है।

इंस्टॉलेशन:

npm install type-graphql graphql reflect-metadata

प्रकार और रिज़ॉल्वर घोषित करने का उदाहरण:

import { ObjectType, Field, Int, Resolver, Query, Arg } from "type-graphql";

@ObjectType()class User {  @Field(() => Int)  id: number;

  @Field()  name: string;

  @Field({ nullable: true })  email?: string;}

@Resolver(User)class UserResolver {  @Query(() => User, { nullable: true })  async user(@Arg("id", () => Int) id: number): Promise<User | null> {    // डेटाबेस से उपयोगकर्ता प्राप्त करने का तर्क    return { id, name: "John", email: "john@example.com" };  }}

स्कीमा बिल्डिंग:

import { buildSchema } from "type-graphql";

const schema = await buildSchema({  resolvers: [UserResolver],  emitSchemaFile: true,});

2. GraphQL Yoga

GraphQL Yoga एक बहुमुखी GraphQL सर्वर है जो TypeScript के साथ शानदार काम करता है। यह Express पर आधारित है, लेकिन किसी भी प्लेटफ़ॉर्म का समर्थन करता है।

इंस्टॉलेशन:

npm install graphql-yoga graphql

सर्वर उदाहरण:

import { createYoga, createSchema } from "graphql-yoga";import { createServer } from "node:http";

const schema = createSchema({  typeDefs: `    type Query {      hello: String      user(id: Int!): User    }    type User {      id: Int!      name: String    }  `,  resolvers: {    Query: {      hello: () => "Hello, GraphQL!",      user: (_, { id }) => ({ id, name: "Alice" }),    },  },});

const yoga = createYoga({ schema });const server = createServer(yoga);server.listen(4000, () => console.log("Server running on http://localhost:4000/graphql"));

क्लाइंट-साइड के लिए लाइब्रेरीज़

3. Apollo Client (TypeScript समर्थन के साथ)

Apollo Client GraphQL के साथ काम करने के लिए एक शक्तिशाली क्लाइंट है। TypeScript के साथ, यह क्वेरी की पूर्ण टाइपिंग प्रदान करता है।

इंस्टॉलेशन:

npm install @apollo/client graphql

टाइप की गई क्वेरी का उदाहरण:

import { gql, useQuery } from "@apollo/client";

const GET_USER = gql`  query GetUser($id: Int!) {    user(id: $id) {      id      name      email    }  }`;

interface UserData {  user: {    id: number;    name: string;    email?: string;  };}

function UserProfile({ userId }: { userId: number }) {  const { loading, data } = useQuery<UserData>(GET_USER, {    variables: { id: userId },  });

  if (loading) return <p>Loading...</p>;  return <p>{data?.user.name}</p>;}