MY_NOTES.md

Refreshing myself on Apollo-GraphQL

• declarative data fetching
• exposes single endpoint & responds to queries.

GraphQL vs REST APIs

• No more over & underfetching.
• Rapid product iterations.
• Insightful Analytics.
• Benefits of Schema & Types.

GraphQL Response Object

{
  "data": {
    "User": "Mary",
    "posts": [
      { "title": "Learn GraphQL today" },
      { "title": "React & GraphQL - A declarative love story" },
      { "title": "Why GraphQL is better than REST" },
      { "title": "Relay vs Apollo - GraphQL Clients" }
    ],
    "followers": [
      { "name": "John" },
      { "name": "Alice" },
      { "name": "Sarah" }
    ]
  }
}

Schema Definition Language (SDL)

// ! = required.
// associations are possible just like in SQL
// [] = list.
type Person {
  id: ID!
  name: String!
  age: Int!
  posts: [Post!]!
}

type Post {
  title: String!
  author: Person!
}

GraphQL Queries

The Query

// allPersons(last: 2) // will only return the last 2 added to DB.
{
  allPersons {
    name
    age
  }
}

The Query Response

{
  "allPersons": [
    { "name": "Johnny", "age": 23 },
    { "name": "Sarah", "age": 20 },
    { "name": "Alice", "age": 20 }
  ]
}

GraphQL Mutations

3 kinds of mutations

1. Creating new data.
2. Updating existing data.
3. Deleting existing data.

The Mutation

mutation {
  createPerson(name: "bob", age: 36) {
    id // This is a unique id generated by the server.
    name
    age
  }
}

The Mutation Response

{
  "createPerson": {
    "id": 123,
    "name": "Bob",
    "age": 36,
  }
}

Subscriptions

The Subscription

// This is a stream of data.
subscription {
  newPerson {
    name
    age
  }
}

The Subscription Stream

{
  "newPerson": {
    "name": "Jane",
    "age" 42
  }
}

Defining the Schema

Root Types

type Query {
  allPersons(last: Int): [Person!]!
  allPosts(last: Int): [Post!]!
}
type Mutation {
  createPerson(name: String!, age: String!): Person!
  updatePerson(id: ID!, name: String!, age: String!): Person!
  deletePerson(id: ID!): Person!
  createPost(title: String!): Post!
  updatePost(id: ID!, title: String!): Post!
  deletePost(id: ID!): Post!
}
type Subscription {
  newPerson: Person!
  updatedPerson: Person!
  deletedPerson: Person!
  newPost: Post!
  updatedPost: Post!
  deletedPost: Post!
}

Architectural Use Cases

1. GraphQL server with a connected database. what I will be doing 😄
2. GraphQL server to integrate existing system.
3. A hybrid approach with a connected database and integration of existing system.

The Resolver Function

• GraphQL queries/mutations consist of set of fields.
• GraphQL server has one resolver function per field.
• The purpose of each resolver is to retrieve the data for its corresponding field.

Example

query {
  User(id: 'er3txsa9frju') {
    name
    friends(first: 5) {
      name
      age
    }
  }
}

The Resolvers for the above Query

User(id: String!): User
name(user: User!): String!
age(user: User!): Int!
friends(first: Int, user: User!): [User!]!