ग्राफ़क्यूएल एपीआई क्वेरी भाषा है जो ग्राहकों को ठीक उसी डेटा का अनुरोध करने देती है जिसकी उन्हें आवश्यकता है। 2026 में, GraphQL का उपयोग Facebook, GitHub, Shopify, Twitter और हजारों स्टार्टअप द्वारा किया जाता है। यह मार्गदर्शिका ग्राफक्यूएल स्कीमा डिज़ाइन, क्वेरीज़, म्यूटेशन, सब्सक्रिप्शन और उत्पादन पैटर्न को कवर करती है।
📋 Table of Contents
ग्राफक्यूएल बनाम आरईएसटी
| पहलू | आराम | ग्राफक्यूएल |
|---|---|---|
| डेटा लाया जा रहा है | एकाधिक समापन बिंदु, निश्चित प्रतिक्रिया | एकल समापन बिंदु, लचीली प्रतिक्रिया |
| अति-लाभ | सामान्य समस्या | हटा दिया गया – वही प्राप्त करें जिसकी आपको आवश्यकता है |
| कम लाना | एकाधिक अनुरोधों की आवश्यकता है | नेस्टेड डेटा के लिए एक अनुरोध |
| सुरक्षा टाइप करें | ओपनएपीआई (वैकल्पिक) | अंतर्निहित मजबूत टाइपिंग |
| सीखने की अवस्था | Low | मध्यम |
| के लिए सर्वोत्तम | सरल सीआरयूडी एपीआई | जटिल, परस्पर जुड़ा हुआ डेटा |
ग्राफक्यूएल स्कीमा
# Schema Definition Language (SDL)
type Query {
user(id: ID!): User
users(first: Int, after: String): UserConnection!
post(id: ID!): Post
posts(filter: PostFilter, orderBy: PostOrderBy): [Post!]!
me: User
}
type Mutation {
createUser(input: CreateUserInput!): CreateUserPayload!
updateUser(id: ID!, input: UpdateUserInput!): User!
deleteUser(id: ID!): Boolean!
createPost(input: CreatePostInput!): Post!
}
type Subscription {
userCreated: User!
postPublished: Post!
}
type User {
id: ID!
name: String!
email: String!
posts(first: Int): [Post!]!
createdAt: DateTime!
}
type Post {
id: ID!
title: String!
content: String!
author: User!
tags: [String!]!
published: Boolean!
publishedAt: DateTime
}
input CreateUserInput {
name: String!
email: String!
password: String!
}
type CreateUserPayload {
user: User!
token: String!
}
type UserConnection {
edges: [UserEdge!]!
pageInfo: PageInfo!
totalCount: Int!
}
type UserEdge {
node: User!
cursor: String!
}
type PageInfo {
hasNextPage: Boolean!
endCursor: String
}
scalar DateTime
प्रश्न और उत्परिवर्तन
# Basic query
query GetUser {
user(id: "1") {
id
name
email
posts(first: 5) {
title
publishedAt
}
}
}
# Query with variables (best practice)
query GetUserPosts($userId: ID!, $first: Int = 10) {
user(id: $userId) {
name
posts(first: $first) {
id
title
tags
author {
name
}
}
}
}
# Mutation
mutation CreatePost($input: CreatePostInput!) {
createPost(input: $input) {
id
title
author {
name
}
publishedAt
}
}
# Variables JSON:
# {
# "input": {
# "title": "TypeScript Guide 2026",
# "content": "...",
# "tags": ["typescript", "javascript"]
# }
# }
# Fragments — reuse field selections
fragment UserFields on User {
id
name
email
}
query {
user(id: "1") { ...UserFields }
me { ...UserFields }
}
पायथन (स्ट्रॉबेरी) के साथ ग्राफक्यूएल
pip install strawberry-graphql fastapi uvicorn
import strawberry
from strawberry.fastapi import GraphQLRouter
from fastapi import FastAPI
from typing import Optional
import asyncio
@strawberry.type
class User:
id: strawberry.ID
name: str
email: str
@strawberry.type
class Post:
id: strawberry.ID
title: str
content: str
author: User
@strawberry.input
class CreatePostInput:
title: str
content: str
tags: list[str] = strawberry.field(default_factory=list)
@strawberry.type
class Query:
@strawberry.field
async def user(self, id: strawberry.ID) -> Optional[User]:
# Fetch from database
user_data = await db.users.find_one({"id": id})
if not user_data:
return None
return User(id=user_data["id"], name=user_data["name"], email=user_data["email"])
@strawberry.field
async def posts(self, first: int = 10) -> list[Post]:
posts_data = await db.posts.find().limit(first).to_list(first)
return [Post(id=p["id"], title=p["title"], content=p["content"],
author=User(id=p["author_id"], name=p["author_name"], email=""))
for p in posts_data]
@strawberry.type
class Mutation:
@strawberry.mutation
async def create_post(self, input: CreatePostInput) -> Post:
new_post = {"title": input.title, "content": input.content, "tags": input.tags}
result = await db.posts.insert_one(new_post)
return Post(id=str(result.inserted_id), title=input.title, content=input.content,
author=User(id="1", name="Alice", email="alice@example.com"))
schema = strawberry.Schema(query=Query, mutation=Mutation)
graphql_app = GraphQLRouter(schema)
app = FastAPI()
app.include_router(graphql_app, prefix="/graphql")
# Playground at http://localhost:8000/graphql
एन+1 समस्या और डेटालोडर
एन+1 समस्या: पोस्टों की एक सूची प्राप्त करना, फिर उसका लेखक प्राप्त करने के लिए प्रति पोस्ट 1 डीबी क्वेरी बनाना = कुल एन+1 क्वेरीज़।
from strawberry.dataloader import DataLoader
async def load_users_by_ids(user_ids: list[str]) -> list[User]:
# ONE query for all user IDs
users_data = await db.users.find({"id": {"$in": user_ids}}).to_list(None)
user_map = {u["id"]: u for u in users_data}
return [user_map.get(uid) for uid in user_ids]
# In your GraphQL context
context = {
"user_loader": DataLoader(load_fn=load_users_by_ids)
}
# In resolver — batches all user lookups into one query
@strawberry.type
class Post:
author_id: strawberry.Private[str]
@strawberry.field
async def author(self, info: strawberry.types.Info) -> User:
return await info.context["user_loader"].load(self.author_id)
अपोलो क्लाइंट (प्रतिक्रिया)
// Setup
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery, useMutation } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://api.example.com/graphql',
cache: new InMemoryCache(),
});
// Wrap app
function App() {
return <ApolloProvider client={client}><Router /></ApolloProvider>;
}
// Query hook
const GET_POSTS = gql`
query GetPosts($first: Int!) {
posts(first: $first) {
id title author { name }
}
}
`;
function PostList() {
const { data, loading, error } = useQuery(GET_POSTS, {
variables: { first: 10 },
fetchPolicy: 'cache-and-network',
});
if (loading) return <Spinner />;
if (error) return <Error message={error.message} />;
return (
<ul>
{data.posts.map(post => (
<li key={post.id}>{post.title} by {post.author.name}</li>
))}
</ul>
);
}
// Mutation hook
const CREATE_POST = gql`
mutation CreatePost($input: CreatePostInput!) {
createPost(input: $input) { id title }
}
`;
function NewPostForm() {
const [createPost, { loading }] = useMutation(CREATE_POST, {
update(cache, { data: { createPost } }) {
// Update cache to include new post
cache.modify({
fields: {
posts(existingPosts = []) {
return [...existingPosts, createPost];
}
}
});
}
});
const handleSubmit = (title: string) => {
createPost({ variables: { input: { title, content: '' } } });
};
}
2026 में ग्राफक्यूएल परिपक्व और उत्पादन के लिए तैयार है। इसका उपयोग तब करें जब आपके फ्रंटएंड को लचीले डेटा लाने की आवश्यकता हो, जब मोबाइल और वेब क्लाइंट को अलग-अलग डेटा आकार की आवश्यकता हो, या जब आपके पास इंटरकनेक्टेड डेटा (उपयोगकर्ता/पोस्ट/टिप्पणियां) हो। सरल CRUD API के लिए REST का उपयोग करें या जब क्लाइंट यह नियंत्रित न करें कि उन्हें कौन सा डेटा प्राप्त होता है।
🔗 Share this article
✍️ Leave a Comment