/typescript-graphql-tutorial

"Typescript+GraphQL" sample using "graphql-yoga" .

Primary LanguageTypeScriptMIT LicenseMIT

Description

GraphQLの学習用ソース。 graphql-yoga + Typescriptで作成。

Install

yarn install

Run

chapter-1からchapter-5まで順番に実行していくと理解が捗る。 各チャプター共通で、実行後はlocalhost:4000からPlayground画面を開いて検証する。

Chapter1 基本的なクエリ(src/basic)

yarn chapter-1

一番基本的な形。 下記のようなクエリを実行する。

query {
    chapter {
        no
        name
        version
        original
        postDate
    }
}

Chapter2 パラメータ付きクエリ(src/params)

yarn chapter-2

Chapter1のクエリに加えて、パラメータを付けたサンプル。 ここではno:2の場合のみ値を取得できるようにしている。 クエリは以下の通り。

query {
  chapter(param:{no:2}) {
    no
    name
    version
    original
    postDate
  }
}

Chapter3 配列型のレスポンス(src/multiple)

yarn chapter-3

Chapter1のクエリを変形し、配列型のレスポンスを扱うサンプル。 クエリは以下の通り。

query {
  chapters {
    no
    name
    version
    original
    postDate
  }
}

Chapter4 Mutationを用いた作成・更新処理(src/mutation)

yarn chapter-4

Mutationを定義し、値の生成や変更を行う場合のサンプル。 クエリ以外にQueryValiablesを指定する必要がある。

クエリ

mutation($param: UpdateParam!) {
  update(param: $param) {
    no
    name
    version
    original
    postDate
  }
}

QueryValiables

{
    "param": {
      "no": 4,
      "name": "Mutationを使って追加・更新を行う",
      "version": "1.0.0",
      "original": true,
      "postDate": "2020-10-29T:12:00:00Z"
    }
}

Chapter5 Validation処理(src/validation)

yarn chapter-5

Chapter4の内容にValidation機能を加えたサンプル。 create()を行う時にnoが4以下だったら重複エラーを出すようにしている。

mutation($param: CreateParam!) {
  create(param: $param) {
    data {
      no
      name
      version
      original
      postDate
    }
    statusCode
    error {
      code
      value
    }
  }
}

QueryValiables(エラーが発生するパターン)

{
    "param": {
        "no": 4,
        "name": "Validationを追加する",
        "version": "1.0.0",
        "original": true,
        "postDate": "2020-10-29T:12:00:00Z"
    }
}

QueryValiables(成功パターン)

{
    "param": {
        "no": 5,
        "name": "Validationを追加する",
        "version": "1.0.0",
        "original": true,
        "postDate": "2020-10-29T:12:00:00Z"
    }
}