试着创建一个GraphQL模式来获取虚拟少女Shiro酱的“オホー报”

2 年 ago

清, 扬

2 minutes

简要概述

为了介绍GraphQL的入门知识，创建一个获取Shirochan的Oho报告的模式。

「オホー報」とは什么意思？

我来试试看

搭建GraphQL服务器

express及びexpress-graphqlでGraphQLサーバー構築

npm init
npm i express express-graphql

vi 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.'))

获取白酱的推文

twitter APIにアクセスするための認証情報を設定

{
  "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

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)) // ツイート情報ログ表示(取得に成功した場合)

定义一个获取Oh! 報的架构

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”（オホー報クエリ）查询。

{
 ohoHou
}

你试试看（技术上的感想）

我对于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中熟悉的异步获取的值，处理起来非常直观和好!

试试看吧（杂乱的感受）

その辺りもあまり詳しくないので、ご存知の方はご指摘頂けると幸いです

単純すぎて、GraphQLでやる意味が正直薄い要件だったな、とは思ってる…
ただこんなﾁｬﾁい物でも、実際に手を動かして作ってみる事によって、これがGraphQLか!感を軽く掴めた気がするシロちゃんのオホー報は為になるなぁ!

今回を足掛かりに、次はもっと(GraphQLの旨味を活かせるような)応用的な某かを作りたいと思った

GraphQL面白い!

原始数据

我已经将文件上传至GitHub。