LoginSignup
1

More than 5 years have passed since last update.

GraphQLで、電脳少女シロちゃんの`オホー報`を取得するスキーマを作ってみる

Last updated at Posted at 2018-06-14

概要

GraphQLの入門がてら、シロちゃんのオホー報を取得するスキーマを作るまで

オホー報とは

:dolphin:電脳少女シロちゃん:dolphin:が、自身のTwitterにて呟くやんごとなき告知
oho1.PNG
oho2.PNG
シロちゃんかわいいよシロちゃん

やってみる

GraphQLサーバー構築

npm init
npm i express express-graphql
vi server.js
server.js
const express = require('express')
const expressGraphQl = require('express-graphql')
const {buildSchema} = require('graphql')

const schema = buildSchema(`
  type Query {
    hoge : String
  }
`)

const app = express()
app.use('/graphql', expressGraphQl({
  schema,
  rootValue : {
   hoge : () => 'hello! graphql!'
  },
  graphiql : true
}))

app.listen(80, () => console.log('running graphql server.'))

node server.jsでGraphQLサーバーが立ち上がります
http://<<ホスト名>>/graphqlにブラウザでアクセスすると、GraphQLサーバー及びGraphQLクライアント(web)アプリが立ち上がっている事が確認出来ます
graphql.PNG
あっさりGraphQLサーバーが構築出来ましたねexpress-graphqlやりおるマン

シロちゃんのツイートを取得

  • twitter APIにアクセスするための認証情報を設定
authInfo.json
{
  "consumer_key" : "your consumer_key",
  "consumer_secret" : "your consumer_secret",
  "access_token_key" : "your access_token_key",
  "access_token_secret" : "your access_token_secret"
}

  • node moduleのTwitterクライアントでツイートを取得
npm i twitter
twitter.js
const Twitter = require('twitter')
const AuthInfo = require('./authInfo')
const client = new Twitter(AuthInfo)

module.exports.getTweet = ({target}) => {
  const param = {
    screen_name : target, // ★twitterで見かける『@』から始まるアレ
    count : 200
  }

  return new Promise((resolve, reject) => {
    client.get('statuses/user_timeline', param, (error, tweets, response) => {
      if(error) {
        return reject(error, response)
      }

      resolve(tweets, response)
    })
  })
}

const twitter = require('./twitter.js')

twitter
 .getTweet({// ツイート情報取得(最大直近200件)
  target : 'SIROYoutuber' // ★twitterで見かける『@』から始まるアレ
 })
 .then(tweets => console.table(tweets)) // ツイート情報ログ表示(取得に成功した場合)

オホー報を取得するスキーマを定義

server.js
const express = require('express')
const expressGraphQl = require('express-graphql')
const {buildSchema} = require('graphql')

const twitter = require('./twitter/twitter.js')

const schema = buildSchema(`
  type Query {
    ohoHou : [String]
  }
`)

const ohoHou = twitter // ツイート情報(配列、構造体)から【オホー報】を抽出
                .getTweet({target : 'SIROyoutuber'})
                .then(tweets => tweets.map(tweet => tweet.text))
                .then(texts => texts.filter(text => text.match(/【オホー報】/)))

const app = express()
app.use('/graphql', expressGraphQl({
  schema,
  rootValue : { ohoHou },
  graphiql : true
}))

app.listen(80, () => console.log('running graphql server.'))

サーバーをスタート

node server.js

クライアントアプリから『オホー報クエリ』(ohoHou)を発行してみましょう

query
{
 ohoHou
}

ohoQuery.PNG
無事取得出来ました!

やってみて(技術的な感想)

rootValueの返却値に、Promiseな値をそのまま定義出来てちょっと感動

  • 普通(?)の値はこう
const schema = buildSchema(`
  type Query {
    hogeText : String
  }
`)

const app = express()
/** 
   {
    hogeText
   }
   クエリを発行すると // クエリ
   'hogehoge!'が取得される
**/
app.use('/graphql', expressGraphQl({
  schema,
  rootValue : { 
   hogeText : () => 'hogehoge!'
  },
  graphiql : true
}))
  • Promise型な値はこう引き渡す
const schema = buildSchema(`
  type Query {
    hogeText : String
  }
`)

const app = express()
/** 
   {
    hogeText // クエリ
   }
   クエリを発行すると 
   'Promise hogehoge!'が取得される
**/
app.use('/graphql', expressGraphQl({
  schema,
  rootValue : { 
   hogeText : new Promise((resolve, reject) => resolve('Promise hogehoge!'))
  },
  graphiql : true
}))

javascriptお馴染みである非同期取得した値も、非常に直観的に扱えてgoodです!

やってみて(雑多な感想)

  • 直近200件のツイートからしか取得が出来なかった。twitter apiの仕様(?)なのでどうしようもないんだろうかという若干の消化不良感
    • その辺りもあまり詳しくないので、 ご存知の方はご指摘頂けると幸いです
  • 単純すぎて、GraphQLでやる意味が正直薄い要件だったな、とは思ってる…
  • ただこんなチャチい物でも、実際に手を動かして作ってみる事によって、これがGraphQLか!感を軽く掴めた気がするシロちゃんのオホー報は為になるなぁ!
    • 今回を足掛かりに、次はもっと(GraphQLの旨味を活かせるような)応用的な某かを作りたいと思った
      • GraphQL面白い!:grin:

ソース

githubに上げてます

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1