GraphQLで引数の書き方を忘れちゃうので備忘

こんにちは。

あるGraphQLのスキーマ、とくに引数を取るスキーマに対して、**あれどんなデータをPOSTすればいいんだっけ？** っていつもわからなくなっちゃうので備忘。

たとえばこんなスキーマを考えます。

```graphql
type Mutation {
  updateUser(user: UserInput): Response
}

type Response {
  success: Boolean!
}

input UserInput {
  userId: ID!
  firstName: String
  lastName: String
  email: String
  age: Int
  companyCode: String
}
```

``updateUser`` というMutationは、``user``という引数 (型は``UserInput``)をもってて、戻り値は``Response`` です、というスキーマです。。

## 書きかた

### 引数をインラインに展開した場合

このGraphQLに送信するデータは例えば以下のようなデータとなります。

```graphql
mutation UpdateUser {
  updateUser(user: { userId: "u001", companyCode: "com003" }) {
    __typename
    success
  }
}
```

こうやって引数のところに直接データを書いちゃうのを**インラインに展開した書き方**というみたいですね。

ちなみに、こういうデータをGraphQLでPOSTするときのcurlコマンドはこんな感じになります。

```
$ cat data.txt 
{
  "query":
  "mutation UpdateUser {
    updateUser(user: { userId: \"u001\", companyCode: \"com003\" }) {
      __typename
      success
    }
  }",
  "variables":{}
}

$ cat data.txt | curl --data @-  \
  --request POST \
  --header 'content-type: application/json' \
  --url http://localhost:3000/graphql | jq
  
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   225  100    65  100   160   1887   4645 --:--:-- --:--:-- --:--:--  6818

{
  "data": {
    "updateUser": {
      "__typename": "Response",
      "success": true
    }
  }
}
```
うまく送信ができたようです。


### 引数のデータを外出しにした場合

引数をインラインに展開している書き方は、クォートのエスケープとかが必要で、ちょっと微妙です。というわけでその引数のデータを変数にして、外出しして記述する方法もあります。

```
$ cat data.txt 
{
    "query":
    "mutation UpdateUser($userInput1: UserInput) {
      updateUser(user: $userInput1) {
        __typename
        success
      }
    }",
    "variables":{
        "userInput1":{
            "userId":"u001",
            "companyCode":"com003"
        }
    }
}
```
``user``の実データ部分が ``$userInput1``として外だしされていて、下の ``variables``にデータが移動していますね。

さあcurlしてみましょう。

```
$  cat data.txt | curl --data @-  \
  --request POST \
  --header 'content-type: application/json' \
  --url http://localhost:3000/graphql | jq

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   328  100    65  100   263   3350  13557 --:--:-- --:--:-- --:--:-- 17263
{
  "data": {
    "updateUser": {
      "__typename": "Response",
      "success": true
    }
  }
}
$
```

うまくいきました。

### おまけ

引数は下記のように、複数セットすることもできます。

```
$ cat data.txt 
{
    "query":
    "

mutation UpdateUser($userInput1: UserInput, $user: UserInput) {
  updateUser(user: $userInput1) {
    __typename
    success
  }
  createUser(user: $user) {
    id
    company {
      name
      code
    }
  }
}

  ",
  "variables":{
  
  "userInput1": {
    "userId": "u001",
    "companyCode": "com003"
  },
  "user": {
    "userId": "u011",
    "companyCode": "com003"
  }
	
	}
}
```


```
cat data.txt | curl --data @-  \
  --request POST \
  --header 'content-type: application/json' \
  --url http://localhost:3000/graphql | jq

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   511  100   138  100   373   3436   9287 --:--:-- --:--:-- --:--:-- 13102
{
  "data": {
    "updateUser": {
      "__typename": "Response",
      "success": true
    },
    "createUser": {
      "id": "u011",
      "company": {
        "name": "会社03",
        "code": "com003"
      }
    }
  }
}
$
```

### おまけ2

もはや引数と関係ないですが、おなじメソッドを別名をつけて複数呼び出すこともできます。

```graphql
query Users {
  user1:users {
    id
  }
  user2:users {
    id
    companyCode
  }
}
```

```json
{
  "data": {
    "user1": [
      {
        "id": "u001"
      },
      {
        "id": "u002"
      },...
    ],
    "user2": [
      {
        "id": "u001",
        "companyCode": "com003"
      },
      {
        "id": "u002",
        "companyCode": "com001"
      },...
    ]
  }
}
```



お疲れさまでした。

## 関連リンク


- [GraphQLサーバとRESTサーバをさっと立ちあげて、実際に触ってみる](https://qiita.com/masatomix/items/53003a34d413206bb619) 最近GraphQLを触ってみたときの記録
- [GraphQLサーバとRESTサーバをさっと立ちあげて、実際に触ってみる。つづき。関連のあるデータの取得](https://qiita.com/masatomix/items/d52ef0bdeb131f9dd6f7) その続き
- [curlの備忘](https://www.masatom.in/pukiwiki/curl/)