GraphQL Cheatsheet: Mastering Flexible and Efficient Data Fetching

1. Basic Concepts and Setup

What is GraphQL?

A query language and runtime for APIs
Single endpoint approach
Client-specified queries
Strongly typed schema

Core Components

- Schema: Defines the shape of your data
- Query: Fetching data
- Mutation: Modifying data
- Subscription: Real-time updates

2. Schema Definition Language (SDL) Basics

Basic SDL Syntax

graphql

1
2
3
4
5
6
7
type User {
  id: ID!
  name: String
  email: String!
  age: Int
}

Key SDL Syntax Elements

!: Required field (non-nullable)
ID: Unique identifier type
String, Int, Boolean, Float: Scalar types

3. Scalar Types and Custom Types

Built-in Scalar Types

graphql

1
2
3
4
5
6
scalar String     # Text
scalar Int        # Integer
scalar Float      # Floating-point number
scalar Boolean    # true/false
scalar ID         # Unique identifier

Custom Scalar Types

graphql

1
2
3
4
scalar Date
scalar Email
scalar URL

4. Object Types and Interfaces

Object Type Definition

graphql

1
2
3
4
5
6
7
8
9
10
11
12
type Person {
  name: String!
  age: Int
  address: Address
}

type Address {
  street: String!
  city: String!
  country: String!
}

Interface Definition

graphql

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface Character {
  id: ID!
  name: String!
}

type Hero implements Character {
  id: ID!
  name: String!
  superpower: String
}

type Villain implements Character {
  id: ID!
  name: String!
  evilPlan: String
}

5. Query Operations and Syntax

Basic Query

graphql

1
2
3
4
5
6
7
query {
  user(id: "123") {
    name
    email
  }
}

Nested Queries

graphql

1
2
3
4
5
6
7
8
9
10
11
12
13
query {
  user(id: "123") {
    name
    posts {
      title
      comments {
        text
        author
      }
    }
  }
}

6. Mutations for Data Modification

Create Mutation

graphql

1
2
3
4
5
6
7
8
9
10
mutation {
  createUser(input: {
    name: "John Doe"
    email: "john@example.com"
  }) {
    id
    name
  }
}

Update Mutation

graphql

1
2
3
4
5
6
7
8
9
mutation {
  updateUser(id: "123", input: {
    name: "Jane Doe"
  }) {
    id
    name
  }
}

7. Subscriptions for Real-Time Data

Subscription Example

graphql

1
2
3
4
5
6
7
8
9
10
subscription {
  newMessage {
    id
    text
    sender {
      name
    }
  }
}

8. Arguments and Variables

Query with Arguments

graphql

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
query GetUsers($limit: Int, $filter: UserFilter) {
  users(limit: $limit, filter: $filter) {
    name
    email
  }
}

# Variables
{
  "limit": 10,
  "filter": {
    "active": true
  }
}

9. Fragments and Inline Fragments

Fragment Definition

graphql

1
2
3
4
5
6
7
8
9
10
11
12
fragment UserDetails on User {
  id
  name
  email
}

query {
  users {
    ...UserDetails
  }
}

Inline Fragment

graphql

1
2
3
4
5
6
7
8
9
10
11
12
query {
  search(query: "example") {
    __typename
    ... on User {
      name
    }
    ... on Post {
      title
    }
  }
}

10. Directives

Common Directives

graphql

1
2
3
4
5
6
7
8
9
10
11
query ($showEmail: Boolean!) {
  user {
    name
    email @include(if: $showEmail)
  }
}

type User {
  deprecatedField: String @deprecated(reason: "Use newField instead")
}

11. Introspection and Schema Exploration

Introspection Query

graphql

1
2
3
4
5
6
7
8
9
{
  __schema {
    types {
      name
      kind
    }
  }
}

12. Error Handling and Validation

Error Response

JSON

1
2
3
4
5
6
7
8
9
10
11
{
  "data": null,
  "errors": [
    {
      "message": "User not found",
      "locations": [{"line": 2, "column": 3}],
      "path": ["user"]
    }
  ]
}

13. Performance Optimization

N+1 Problem Solution (DataLoader)

JavaScript

1
2
3
4
5
const userLoader = new DataLoader(async (ids) => {
  const users = await User.findByIds(ids);
  return ids.map(id => users.find(user => user.id === id));
});

14. Best Practices

Design for Flexibility
Use Pagination
Implement Field-Level Authorization
Version Your Schema
Use Meaningful Error Messages
Optimize Complex Queries
Cache Strategically

15. Ecosystem Tools

Clients

Apollo Client
Relay
urql
GraphQL Request

Servers

Apollo Server
Express GraphQL
GraphQL Yoga
Hasura

Development Tools

GraphiQL
GraphQL Playground
GraphQL Code Generator

Additional Resources

Official GraphQL Documentation
GraphQL.org
Community Tutorials and Workshops

GraphQL

Continue Learning