mmag

ハマったことメモなど

Absintheをちょっと触った

Absinthe(アブサンアブサント)というElixirのライブラリがありまして、GraphQLのAPIやってみよということでちょっと触りました。

http://absinthe-graphql.org/

ほんとにちょっと触っただけなので見せるコードもありませんが、いくつか思っていることを。

Schemaって分割できないんすか

Absinthe: Our First Query

ここでweb/schema.exというファイルにqueryを書いているのですが、ファイル分けたいなーなんて。Typeはimport_typesとか使えるんですが、import_queryは見当たらず。ソース読んだらわかるのだろうか。

queryのテストどう書いてく

Resolverは普通に単体テストできるしmutationもなんとなく行けそうなんで置いといて、ConnCase使ってquery投げてテストするとき、どうテストファイル分けようかな、というところ。いわゆるRESTなリソースベースならUserControlerとかあるわけですが、全部/graphqlにPOSTとかですし、リソースに縛られずに欲しいもの取れるとこが強みの1つなんで、リソースという考えは一旦ポイしようと。ところがどっこいじゃあどう分けましょうかね。queryに関しては思いっきり複雑なの数本投げておしまい、くらいでいいんすかね。

ファイル分けることしか考えてねーな。

v-modelを受け付けるカスタムコンポーネントの書き方の好み

Vue.js 2系を対象とします。

何がしたいかというと、

<my-great-text-input v-model="text" />

ということがしたい。

とりあえずドキュメントを見ると、以下のような方法が書いてある。

https://jp.vuejs.org/v2/guide/components.html#カスタムイベントを使用したフォーム入力コンポーネント

<template>
  <input type="text" :value="value" @input="updateText">
</template>

<script>
  export default {
    props: ['value'],
    methods: {
      updateText(e) {
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

ただ、必ずしもこれしか方法がないわけではなくて

  • value プロパティを受け入れる
  • 新しい値と共に input イベントを送出する

を満たしていればOK。なので色々なパターンが考えられる。自分は双方向算出プロパティがスッキリしているように見えるマンなので

<template>
  <input type="text" v-model="innerValue">
</template>

<script>
  export default {
    props: ['value'],
    computed: {
      innerValue: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    }
  }
</script>

というのが好き。

OpenAPIの3.0.0が出てた

1週間くらい前にリリースされていた模様。semverになってる。

github.com

気になるとこ

レスポンス深い

https://github.com/OAI/OpenAPI-Specification/tree/master/examples/v3.0 などの例をちらっと見た程度だけど、以下のようにレスポンスの書き方がやや深くなって、contentとかレスポンス形式をキーに持つようになっていた。多くの場合はapplication/jsonだと思うので省略したいように思うけど、どうやら省略することはできないっぽい。ちなみにapplication/jsonキーの値にあたるものをMedia Type Objectと呼ぶ。

get:
  responses:
    200:
      description: pet response
      content:
        application/json:
          schema:
            type: array

Components Object

Components Objectなるものが増えていた。

https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#componentsObject

これまで再利用したいオブジェクトはルートレベルにだらっと書かれていたけど、これらをまとめるような役割。

Server Object

https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#serverObject

servers:
  - url: https://sandbox.example.com/v1
    description: Sandbox server
  - url: https://example.com/v1
    description: Production server

これまではトップレベルあたりにhostというキーでIPやホスト名を1個だけ書けるようになっていたけど、複数のホストが書けるようになっていた。このパスへのリクエストはこのサーバしか受け付けませんよ、みたいに書ける。

'/pets':
  get:
    ...
  servers:
    - url: https://example.com/v1  # $refが使えないように読めるのが気になる
      description: Production server

2.0からのコンバータとかは無いよね、ですよね。

追記

よくよく見たらCallback ObjectとLink Objectっていうよくわからないやつらも追加されていた。

https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#callback-object

https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#link-object

Link Objectはクライアントに対して、「レスポンスのこのパラメータ使えばこっちのAPIこんな風に叩けるんすよ」っていうことを示すものっぽい。

Callback Objectは全く使い方がわからない。わからない。

テーマはFB matteをベースにしてます。作者さんに感謝を込めて。