Skip to content

Instantly share code, notes, and snippets.

@msociety
Last active July 13, 2018 08:18
Show Gist options
  • Save msociety/7c37e9c8c7b587fd12a269322006288b to your computer and use it in GitHub Desktop.
Save msociety/7c37e9c8c7b587fd12a269322006288b to your computer and use it in GitHub Desktop.

How to GraphQL - Core Concepts

The Schema Definition Language (SDL)

Defining simple types

type Person {
    id: ID!
    name: String!
    age: Int!
    posts: [Post!]!
}

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

Fetching Data with Queries

RESTful API

Fixed endpoints

/users/<id>
/users/<id>/posts
/users/<id>/followers

GraphQL

Flexible queries

>
{
  allPersons(last: 2) {
    name
    age
  }
}

<
{
  "allPersons": [
    { "name": "Johnny", "age": 23 },
    { "name": "Sarah", "age": 20  },
    { "name": "Alice", "age": 35  }
  ]
}
>
{
  allPersons(last: 2) {
    name
    age
  }

}

<
{
  "allPersons": [
    { "name": "Sarah", "age": 20  },
    { "name": "Alice", "age": 35  }
  ]
}
>
{
  allPersons(last: 1) {
    name
    posts {
      title
    }
  }

}
<
{
  "allPersons": [
    {
      "name": "Alice",
      "posts": [
        { "title": "How to get started with React & GraphQL" }
      ]
    }
  ]
}

The GraphQL Schema

  • Defines capabilities of the API by specifying how a client and fetch and update data
  • Represents contract between client and server
  • Collection of GraphQL types with special root types

Root Tpes

type Query { ... }
type Mutation { ... }
type Subscription { ... }

The Query Type

{
    allPersons {
        name
    }
}

type Query {
    allPersons(last: Int): [Person!]!
}

The Mutation Type (writing data)

mutation {
    createPerson(name: “Bob”, age: 36) {
        id
    }
}

type Mutation {
    createPerson(name: String!, age: String!): Person!
}
3 kinds of mutations
  • creating new data
  • updating existing data
  • deleting existing data

The Subscription Type (realtime updates with push notifications)

subscription {
    newPerson {
        name
        age
    }
}

type Subscription {
    newPerson: Person!
}

Full Schema

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!
    updatePerson: Person!
    deletePerson: Person!
    newPost: Post!
    updatePost: Post!
    deletePost: Post!
}


type Person {
    id: ID!
    name: String!
    age: Int!
    posts: [Post!]!
}

type Post {
    title: String!
    author: Person!
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment