GitHub API v4のGraphQLをaxiosとApolloで叩いてみる

ググっても最小限のサンプルがなかったので調べて試した。node環境を想定。

axiosで叩いてみる

npm i axios しておく。

const axios = require('axios')
const accessToken = 'xxxxxxxxxxxxxxxxxxxxxx'

axios({
  url: 'https://api.github.com/graphql',
  headers: {
    Authorization: `bearer ${accessToken}`,
    Accept: 'application/vnd.github.v4.idl'
  },
  method: 'POST',
  data: {
    query: `query { 
       repository(owner: "vuejs", name: "vue") { 
        name,
        description,
        license
      }
    }`
  }
})
.then(res => res.data)
.then(console.log)

実行すると👇のが返ってくる

{ data: 
   { repository: 
      { name: 'vue',
        description: 'A progressive, incrementally-adoptable JavaScript framework for building UI on the web.',
        license: 'MIT License' } } }

accessToken

accesTokenはAPIの認証用のトークン。こことかcurlで取得しておく。

漏れるとダメなやつなのでpublishするときは環境変数とかに入れときましょう。

Apolloで叩く

www.apollographql.com

package.json

パッケージがいろいろ必要。npm iしておく。

{
  "dependencies": {
    "apollo-cache-inmemory": "^1.1.4",
    "apollo-client": "^2.0.4",
    "apollo-link": "^1.0.7",
    "apollo-link-http": "^1.3.2",
    "graphql": "^0.12.3",
    "graphql-tag": "^2.6.1",
    "node-fetch": "^1.7.3"
  }
}

コード

const gql = require('graphql-tag')
const access_token = 'xxxxxxxxxxxxxxxxxxxx'
const {ApolloClient } = require('apollo-client')
const {HttpLink } = require('apollo-link-http')
const {ApolloLink, concat} = require('apollo-link')
const {InMemoryCache } = require('apollo-cache-inmemory')
const fetch = require('node-fetch')

const authMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      Authorization: `bearer ${access_token}`,
      Accept: 'application/vnd.github.v4.idl',
    }
  })
  return forward(operation)
})

const httpLink = new HttpLink({ uri: 'https://api.github.com/graphql' , fetch})
const client = new ApolloClient({
  link: concat(authMiddleware, httpLink),
  cache: new InMemoryCache()
})

client.query({ query: gql`{
  repository(owner: "vuejs", name: "vue") { 
    name,
    description
  }}`
}).then(console.log)

headerの設定が若干めんどくさい。

実行すると👇のが返ってくる。

{ data: 
   { repository: 
      { name: 'vue',
        description: 'A progressive, incrementally-adoptable JavaScript framework for building UI on the web.',
        __typename: 'Repository' } },
  loading: false,
  networkStatus: 7,
  stale: false }

graphql-tag

github.com

graphql-tag がGraphQLのquery書くのに便利なやつぽい雰囲気。

コンポーネント思考なCSSの命名規則

Qiitaに書いた。

qiita.com

SFCSSは.vueファイルという1ファイルにtemplate script style の全てが詰め込めるからこそできる命名。

外部ファイルでCSSを書くときにSFCSSを適用するのはあまり利点がないように思う。

コンポーネントの粒度

各種JSのコンポーネント指向なフレームワーク、コンポーネントの切り方がむずいなーっていう問題、CSS的な都合によるコンポーネント感とJSで制御したいコンポーネント感が必ずしも一致しないからなのかなーとか想像した。その埋め合わせはどっちかが妥協して頑張るみたいな

— Takeshi Takatsudo (@Takazudo) 2017年12月15日

コンポーネントの粒度、Vueではtemplateとstyleを一緒に書くのでこの辺りの乖離が少なく済むような感じがしている。

resolve mongoose warning

version

4.12.5

warning

DeprecationWarning: open() is deprecated in mongoose >= 4.11.0, use openUri() instead, or set the useMongoClient option if using connect() or createConnection()

and

DeprecationWarning: Mongoose: mpromise (mongoose's default promise library) is deprecated, plug in your own promise library instead: http://mongoosejs.com/docs/promises.html

fix

mongoose.connect(mongoURL, {
  useMongoClient: true
})

and

mongoose.Promise = require('bluebird')

link

https://github.com/Automattic/mongoose/issues/5399

https://github.com/Automattic/mongoose/issues/4951

Upgrading is not always the best option.

lol

Nuxt.js IE11でもHMRしたい

HMRしたい

IE11にはEventSourceがないのでwebpackのHMRが動かず、そのままだと手動リロードするハメになる。

nuxt.config.js でpolyfillを読み込ませれば動くようになる。

npm i -D event-source-polyfill

指定はbuildのvendorで。👇な感じに。

module.exports = {
  build: {
      vendor: process.env.NODE_ENV !== 'production'
        ? [
          'axios',
          'event-source-polyfill'
        ]
        : [
          'axios'
        ],
  }
}

プロダクション用ビルドに入り込まないように気をつけましょう。

https://ja.nuxtjs.org/api/configuration-build/#vendor

動いてる

Nuxt.jsに限らずwebpackのHMRをIE11で効かしたいときはEventSourceのpolyfill追加すれば動く（はず

IE11でStorybookを動かす

syntax errorの解消

そのままだとsyntax errorでプレビューが動かないので.babelrcでpresetを指定する。

{
  "presets": ["es2015"]
}

作成場所はルートに。

この.babelrcが読み込めている場合、起動時に次のようなログが出る

@storybook/vue v3.2.16

=> Loading custom .babelrc
=> Loading custom addons config.
=> Using default webpack setup based on "vue-cli".
  0% compiling

HMRを効かす

IE11にEventSourceがないので、polyfillを追加したい。

webpackのconfigをいじればなんかうまくできるんだろうけど、めんどくさいのでcdn経由でEventSourceのpolyfillを読み込ませる。

読み込ませるのはカスタムヘッダで。

https://storybook.js.org/configurations/add-custom-head-tags/

.storybook/preview-head.html を作成する。scriptが書けるのでpolyfillを指定する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/event-source-polyfill/0.0.9/eventsource.js"></script>

works fine 👍

Slackのステータス機能を活用するためにアプリを作った

Slackのユーザーステータス、使ってますか？Slack上で絵文字+テキストによって自身の状態を示すことができる機能。

メッセンジャー系ソフトウェアの機能としては目新しいものではないが、コミュニケーションの質を向上させるポテンシャルがあるなと感じている。

リモートワークとステータス

リモートでは基本のやりとりは非同期だが、たまーに同期的なコミュニケーションが必要なときに相手がどんな状態でいるのかを知りたいときがある。

自分の状態を示したいときもある。カフェで仕事してるときとか。

この状態のやりとりにSlackのステータスがうまく機能するようにできればいいのでは？と考えた。

最近移転した弊社オフィスを作業場所として使うことが多くなってきたので、オフィスに誰がいるのかを把握するのにも使えそうだな〜と思っていたところ、次のようなエントリを読んだ。

ステータス変更を自動化する

polidog.jp

このエントリではつないでいるSSIDをもとにSlackのステータスを変更するというコマンドラインツールを作ったと紹介していた。

この方法は自身の状態を大まかに示すのに最適だなと思った。

ただコマンドラインで動作するツールというのが、同僚にインストールしてもらうのには障壁になりそうだなと思った。

Electronでアプリを作った

https://nakajmg.github.io/SlackStatusChanger/

メニューバーで動作するアプリをElectronで作った。

機能は👇のような感じ

SSIDによるステータス変更

つないでいるWi-FiのSSIDによってステータスを自動で変更する。

サスペンド時のステータス変更

PCがサスペンドしたときにステータスを自動で変更する。設定はSSIDと紐付ける。

例えば、オフィスのネットワークにつないでいるときにPCを閉じたときなどに離席中といったステータスに自動で変更するように設定できる。

ステータスのリスト作成

Slackの場合、デフォルトのステータスは5個までで、チーム全員で共有される。

このアプリではアプリごとに好きなステータスのセットを保存しておけるので、よく使うステータスを1クリックで適用することができる。

アプリを活用するために

作ったアプリでステータスの変更が超カンタンにできるようになったが、メンバーのステータスを知る手段が名前の横に表示されているやつしかない。

これだとあまりステータスが有効活用できないので、botとスラッシュコマンドを作って追加した。

ステータス変更通知bot

ステータスの変更を監視して、変更があったステータスをbotに通知させるようにした。

heroku上で特定のURLを叩くとSlack APIでステータスを取得して、前回の結果との差分を取得して専用のチャンネルに流すようにしている。

URLを叩くのにはGoogle Apps Scriptの分タイマーを使ってる（herokuのschedulerがイマイチだった）。

ソース https://github.com/nakajmg/SlackStatusNotifier

ステータス一覧コマンド

メンバーのステータスを一覧で見たかったので、スラッシュコマンドを作成して追加した。

通知と一覧によってステータスの可視化ができるようになってアプリの利用価値も高まったように思う。

おわり

DLはこちらから

https://github.com/nakajmg/SlackStatusChanger/releases/tag/v2.2.0

フィードバックお待ちしております 😆

[追記] サインインとSlackへのインストールについて

アプリにサインインするにはManage PermissionでSign in with Slackを有効にする必要があります。

SlackのApp Directoryに乗せる審査を通していないので、Teamの設定でNon distributedなappのインストールが許可されてない場合にはサインインでエラーになります 🙇🏻。（PermissionのOnly allow apps from the Slack App Directoryが有効な場合）

また、インストールにAdminの許可が必要な場合（Approved Appsが有効な場合）にもサインインでエラーがでますが、インストールが許可されると使えるようになります。

サインイン以外にTokenの入力でもアプリを使えるようにするか検討中です🤔

VS Codeへの乗り換えをあきらめた話

Veturのチカラを試したくてVS Codeに乗り換えようと試みました。

nakajmg.hatenablog.com

が、Vueのアプリを書くうえでは、ちょっと耐えられないなという部分があるということで乗り換えをあきらめました。

足りない

.vueファイルへの対応

vscはintellisenseという賢いやつがパスとか色々いい感じに解決してくれますが、.vueのファイルをうまいこと認識してないようで、import fromしたファイルに飛ぶのがうまくいかないパターンがありました。ファイル名の補完も同様。

ショートカットキーの設定

ショートカットキーをWebStormに寄せるためにカスタマイズしましたが、¥ にショートカットを割り当てる方法がみつかりませんでした。cmd+¥をエディタのツリービューのトグルにずっと使っているので、これができないのがかなりのストレスになりました。

またいつか

乗り換えはあきらめましたが、それでも良いところはいっぱいあるなと思えたので、WebStorm開くまででもないなというファイルを編集するときはvscを使うようにすることにしましたとさ。

おしまい