Think in GraphQL系列

GraphQL 入門： Server Setup X NodeJS X Apollo (寫程式囉！)

{
    hello
}

GraphQL 入門：初次實作 Schema 與 Resolver

{
    me {
        id
        name
        age
    }
}

GraphQL 入門： Schema 與 Resolver 進階功能！ (Array, Non-Null, Field Resolver)

{
    users {
        id
        name
        friends {
            id
            name
        }
    }
}

GraphQL 入門： Arguments, Aliases, Fragment 讓 Query 更好用 (進階 Query)

Arguments

    {
        # 傳入 Argument "Fong" (Argument for Object Type)
        user(name: "Fong") {
            id
            name
            # 傳入 Argument METRE (Argument for Scalar Type)，
            # 此 field 回傳 FLOAT type
            height
            # 傳入 Argument POUND (Argument for Scalar Type)，
            # 此 field 回傳 FLOAT type
            weight(unit: POUND)
        }
    }

Variables

    # 因為 user 的 argument name 為必填 `!`，所以在參數宣告列上也要加上 `!`
    query ($name: String!) {
        user(name: $name) {
            id
            name
        }
    }

    {
        "name": "Fong"
    }

Operation Name

    query MyBasicInfo {
        me {
            id
            name
        }
    }

Aliases

    query UserData($name1: String!, $name2: String!, $name3: String!) {
        user1: user(name: $name1) {
            id
            name
        },
        user2: user(name: $name2) {
            id
            name
        },
        user3: user(name: $name3) {
            id
            name
        }
    }

    {
        "name1": "Fong",
        "name2": "Kevin",
        "name3": "Mary"
    }

Fragment

    query {
        user1: user(name: "Fong") {
            ...userData
        },
        user2: user(name: "Kevin") {
            ...userData
        }
    }
    fragment userData on User {
        id
        name
    }

GraphQL 入門：初次使用 Mutation

取得所有貼文

    {
        posts {
            id
            title
            author {
                name
            }
            likeGivers {
                id
                name
            }
        }
    }

新增 post

    # Operation Type 為 mutation 時不可省略
    mutation AddPostAgain ($input: AddPostInput) {
        addPost(input: $input) {
            id
            title
            author {
                name
            }
        }
    }

按讚

    # Operation Type 為 mutation 時不可省略
    mutation {
        likePost(postId: 1) {
            id
            title
            author {
                name
            }
        }
}

Input Object Type

    # Operation Type 為 mutation 時不可省略
    mutation AddPostAgain ($input: AddPostInput!) {
        addPost(input: $input) {
            id
            title
            author {
                name
            }
        }
}

    {
        "input": {
            "title": "Input Object Is Awesome",
            "content": "ZZZZZZZZZZZZZ"
        }
    }

打造 GraphQL API Server 應用：部落格社交軟體 - 1 (Query & Mutation Part)

Query user

    {
        me {
            email
            name
            posts {
                id
                author {
                    name
                }
            }
            friends {
                email
            }
        }
        user(name: "Kevin") {
            name
        }
        users {
            id
        }
    }

Query post

<<<<<<< HEAD post(id: 1) {

      posts(name: 1) {

6c45139b634b7901a7b21a6504695148fc9a5e7e title body author { name } likeGivers { id name } } }

  - Mutation Type Demo
```graphql
mutation ($updateMeInput: UpdateMyInfoInput!, $addPostInput: AddPostInput!) {
        updateMyInfo (input: $updateMeInput) {
            name
            age
        }
        addPost (input: $addPostInput) {
            id
            title
            body
        }
        addFriend (userId: 3) {
            id
            name
            friends{
                id
                name
            }
        }
        # Can run this independently to toggle like
        likePost (postId: 3) {
            id
            title
            body
            author {
                name
            }
            likeGivers {
                id
                name
                age
            }
        }
}

{
      "updateMeInput": {
        "name": "FX",
        "age": 24
      },
      "addPostInput": {
        "title": "Hello World2",
        "body": "testttttinggggg"
      }
}

打造一個 GraphQL API Server 應用：部落格社交軟體 - 2 (Authentication & Authorization)

Registry & Login

mutation {
  signUp(name: "TestMan", email: "test@test.com", password: "123456"){
    id
    name
    email
  }
  login(email: "test@test.com", password: "123456"){
    token
  }
}

Authentication

{
    "x-token": "eyJh......."
}

{
    me {
      id
      name
      email
    }
}

mutation {
      signUp(name: "TestMan", email: "test@test.com", password: "123456"){
        id
        name
        email
      }
      login(email: "test@test.com", password: "123456"){
        token
      }
}

Authentication with variables

mutation ($updateMeInput: UpdateMyInfoInput!, $addPostInput:AddPostInput!) {
      updateMyInfo(input: $updateMeInput) {
        id
        name
        age
      }
      addPost(input: $addPostInput) {
        id
        title
        body
        author {
          name
        }
        createdAt
      }
      likePost(postId: 1) {
        id
      }
}

{
    "updateMeInput": {
      "name": "NewTestMan",
      "age": 28
    },
    "addPostInput": {
      "title": "Test ~ Hello World",
      "body": "testttttinggggg"
    }
}

打造一個 GraphQL API Server 應用：部落格社交軟體 - 3 (環境變數)
- 用 dotenv 來幫我們做管理～～首先安裝 dotenv 套件，並新增一個 .env 檔案存放環境變數
```
$ npm install --save dotenv
$ touch .env
```
- 打開 .env 在裡面輸入
```
# JWT Setting
SECRET=just_some_secret
# Bcrypt Setting
SALT_ROUNDS=2
```

GraphQL 入門：實作 Custom Scalar Type (Date Scalar Type)

建立一個 Date Scalar Type

query ($date: Date!){
    now
    parseValueDemo: isFriday(date: 1540791381379)
    parseLiteralDemo:isFriday(date: $date)
}

{
    "date": 1540791381379
}

引入外部套件實作 Custom Scalar Type

query ($date: DateTime!){
    now
    parseLiteralDemo: isFriday(date: "2018-10-26T10:10:10.000Z")
    parseValueDemo:isFriday(date: $date)
}

{
    "date": "2018-10-10T10:10:10.000Z"
}

GraphQL 入門：給我更多的彈性！建立自己的 Directives

ChrisWongAtCUHK/GraphQL-Demo

Think in GraphQL系列

<<<<<<< HEAD post(id: 1) {