⭐ GraphQL Complete Guide

GraphQL basically “smart way of talking to your API” है.

🥇 1. GraphQL – Beginner Level

1.1 GraphQL kya hai?

GraphQL ek query language है APIs के लिए, jo Facebook ने banaya था.

Simple शब्दों में:

REST में:
- /users → सारे users
- /users/1 → user 1
- /users/1/posts → उसके posts
  Multiple endpoints, अलग-अलग URLs।
GraphQL में:
- बस एक endpoint (जैसे /graphql)
- Query में लिखो: मुझे user name + उसके posts चाहिए
  → Server वही exact data वापिस करेगा.

1.2 Kyun use karein? (Benefits)

Over-fetching नहीं: जो fields चाहिए, वही मिलती हैं.
Under-fetching नहीं: REST में कभी-कभी multiple API calls करने पड़ते हैं; GraphQL में एक query काफी।
Single endpoint: सब GraphQL पर ही होता है.
Strongly typed schema: कौनसा field किस type का है, पहले से defined होता है.

1.3 Basic Building Blocks

Schema → API ka contract
Types → Data की structure (User, Post, Product, etc.)
Query → Data read करने के लिए
Mutation → Data change करने के लिए (insert, update, delete)
Resolver → वो functions जो actual data लाकर देते हैं

1.4 Simple GraphQL Example

मान लो schema में ये type है:


type User {
  id: ID!
  name: String!
  email: String!
}

और आप users list fetch करना चाहते हो:


query {
  users {
    id
    name
    email
  }
}

Response:


{
  "data": {
    "users": [
      { "id": "1", "name": "Babu", "email": "babu@example.com" },
      { "id": "2", "name": "Rajesh", "email": "rajesh@example.com" }
    ]
  }
}

Notice:
तुमने id, name, email माँगा → बस वही मिला. No extra data.

🥈 2. GraphQL – Intermediate Level

अब थोड़ा और depth में चलते हैं.

2.1 Schema Design

Example schema:


type User {
  id: ID!
  name: String!
  email: String!
  posts: [Post!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}

type Query {
  users: [User!]!
  user(id: ID!): User
  posts: [Post!]!
}

Yahaan:

User aur Post एक दूसरे से जुड़े हुए हैं
Query type बताता है कि client क्या-क्या पूछ सकता है

2.2 Nested Query Example


query {
  user(id: 1) {
    name
    email
    posts {
      id
      title
    }
  }
}

Result:


{
  "data": {
    "user": {
      "name": "Babu",
      "email": "babu@example.com",
      "posts": [
        { "id": "10", "title": "My First Post" },
        { "id": "11", "title": "GraphQL is Awesome" }
      ]
    }
  }
}

Ek hi request में user + उसके posts.

2.3 Mutations (Create / Update / Delete)


mutation {
  createPost(
    title: "New GraphQL Post"
    content: "Learning GraphQL with Babu's blog"
    authorId: 1
  ) {
    id
    title
    author {
      name
    }
  }
}

Response:


{
  "data": {
    "createPost": {
      "id": "12",
      "title": "New GraphQL Post",
      "author": {
        "name": "Babu"
      }
    }
  }
}

2.4 Queries vs Mutations – याद रखने वाला rule

Query → "GET" wali दुनिया
Mutation → "POST/PUT/DELETE" wali दुनिया

🥉 3. GraphQL – Pro Level Concepts

Yahan se GraphQL professional wali दुनिया शुरू होती है.

3.1 Fragments

Jab same fields बार-बार कई जगह चाहिए हों:


fragment UserBasicFields on User {
  id
  name
  email
}

query {
  users {
    ...UserBasicFields
  }
  user(id: 1) {
    ...UserBasicFields
  }
}

3.2 Variables

Hard-coded values avoid करने के लिए:


query GetUser($userId: ID!) {
  user(id: $userId) {
    id
    name
  }
}

Variables (side में):


{
  "userId": 1
}

3.3 Subscriptions (Real-time updates)

Jab live updates चाहिए (जैसे chat, notifications):


subscription {
  messageAdded {
    id
    text
    user {
      name
    }
  }
}

Backend WebSocket के through live updates देता है.

🏛️ 4. GraphQL + CMS (Directus, Strapi, etc.)

अब आता है वो हिस्सा jo तुझे पसंद है:
GraphQL को Directus CMS, Strapi ya kisi bhi Headless CMS ke saath kaise integrate करें?

4.1 Directus + GraphQL

Directus ek headless CMS है jo by default REST + GraphQL दोनों APIs provide करता है.

GraphQL endpoint usually:
https://your-directus-url/graphql
Directus में jo collections होते हैं (e.g. articles, user_profile, BCA_worker_Data), वो GraphQL types बन जाते हैं.

Example: मान लो Directus में एक collection है: articles

GraphQL query:


query {
  articles {
    id
    title
    content
    date_created
  }
}

अगर Directus ने GraphQL को items_articles jaise नाम दिया हो, तो:


query {
  articles {
    items {
      id
      title
      content
    }
  }
}

(Exact naming Directus instance config पर depend करेगा, लेकिन idea यही है: collection → GraphQL type.)

4.2 Next.js / React से Directus GraphQL call

Simple fetch example:


const DIRECTUS_GRAPHQL = "https://your-directus-url/graphql";

export async function fetchArticles() {
  const query = `
    query {
      articles {
        id
        title
        content
      }
    }
  `;

  const res = await fetch(DIRECTUS_GRAPHQL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // "Authorization": "Bearer <YOUR_TOKEN>"  // अगर auth required है
    },
    body: JSON.stringify({ query }),
  });

  const json = await res.json();
  return json.data.articles;
}

Next.js page:


export default async function ArticlesPage() {
  const articles = await fetchArticles();

  return (
    <div>
      <h1>Articles from Directus</h1>
      <ul>
        {articles.map((a: any) => (
          <li key={a.id}>
            <h2>{a.title}</h2>
            <p>{a.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

बस – Directus CMS → GraphQL → Next.js → UI.

4.3 Any other Headless CMS (GraphQL pattern same hi hai)

Most modern CMS (जैसे Strapi, Hygraph, Contentful, Sanity etc.):

Provide करते हैं:
- GraphQL endpoint
- Auth token
- Schema playground (GraphiQL, etc.)

GraphQL integration का pattern almost same:

GraphQL query define करो
fetch ya Apollo Client से POST request
Response से data निकालो
UI में show करो

Example (Contentful style):


query {
  blogPostCollection {
    items {
      title
      slug
      content
    }
  }
}

🧠 5. GraphQL vs REST – कब क्या use करना चाहिए?

GraphQL बेहतर कब:

जब complex UI हो with nested data
Mobile apps जहाँ हर byte important हो
Frontend team fast iterate करना चाहती हो
Multiple clients (web, mobile, partner apps) same API use कर रहे हों

REST बेहतर कब:

Simple छोटे services
Legacy systems already REST पर based
बहुत simple CRUD API, जहाँ flexibility कम चाहिए

Real life में कई जगह दोनों mix भी होते हैं.

🧾 6. Quick Summary for your Blog Readers

GraphQL ek query language for APIs है
Beginner level: Query, Mutation, Schema, Types
Intermediate: Nested queries, Input types, variables
Pro: Fragments, Subscriptions, caching, schema design
Headless CMS (Directus, Strapi, Contentful…) → GraphQL ko और आसान बना देते हैं
Directus:
- CMS UI में content बनाओ
- GraphQL endpoint से data fetch करो
- Next.js / React में easily दिखाओ

Mohit Bhati - Experience CMS

Search This Blog