先週はクライアントからGraphQLへのアクセス方法を学習しました。
- ReactでGraphQL APIにアクセスする
今週は「サーバサイドはどう実装するのか?」という部分を調査しました。
今回は既に実装しているアプリケーションサーバにgraphqlを組み込みます。
$ npm install graphql express-graphql -save
jsonでもtypescriptでもないので一旦外部ファイル(graphql/schema.graphql)として定義しました。
graphqlに対応しているlintとかあるみたいなのですが、
今回は調査が追いついていません。
id(選手ID)でフィルタリングしてPlayer(選手)を返すクエリと
players(選手リスト)を返すクエリを想定します。
Playerオブジェクトは以下のようなプロパティを持つとします。
DBからデータを取得して返却する際にプロパティ同士がマッピングされます。
type Query {
player(id: Int!): Player
players(name: String): [Player]
},
type Player {
id: Int
name: String
team_name :String
team_id: Int
}
を渡す。
App.ts
import { graphql} from './graphql'
import * as express_graphql from 'express-graphql';
import { buildSchema } from 'graphql';
(中略)
let schemaStr = readFileSync('./graphql/schema.graphql',{encoding:'utf8'})
var schema = buildSchema(schemaStr);
let root = {
player:(args)=>{
let result = new graphql().getPlayer(args)
console.log(result)
return result
}
};
app.use('/graphql', express_graphql({
schema: schema,
rootValue: root,
graphiql: true
}));
GraphQLの処理部分は分けて実装したかったので、別途graphql.tsを作ってそちらに実装します。
graphql.ts
import { playerService } from "../services/playerService";
export class graphql{
public getPlayer(args:any):Promise<any>{
return new Promise((resolve,reject)=>{
(async()=>{
//既存のDBアクセスメソッドにリクエストパラメータを渡す
let player = await new playerService().findId(args.id)
console.log(player)
resolve(player[0])
})()
.catch((err)=>{
console.log(err)
reject(err)
})
})
}
}
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント