Apolloとは？
GraphQLを簡単に扱えるようにするためのバックエンド、フロントエンドライブラリです。
ApolloServerのインストール
|
1 |
npm i apollo-server@^2 graphql@^14.6.0 |
Queryサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const { ApolloServer, gql } = require("apollo-server"); const prisma = new PrismaClient(); // GraphQLのスキーマ定義 const typeDefs = gql` type Query { info: String! } `; // リゾルバ関数 const resolvers = { Query: { info: () => "リターンinfo", }, }; const server = new ApolloServer({ typeDefs, resolvers, context: ({ req }) => { return { ...req, prisma, //認証トークンがないとuserIdを取得できない⇨post投稿できない。 userId: req && req.headers.authorization ? getUserId(req) : null, }; }, csrfPrevention: true, cache: "bounded", }); server.listen().then(({ url }) => { console.log(`<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="🚀" src="https://s.w.org/images/core/emoji/11/svg/1f680.svg"> Server ready at ${url}`); }); |
スキーマ定義
infoというフィールドを持っていてStringというデータ型になっている。GraphQLの雛形です。
Query
Apollo Serverで事前に決められている文字列になるのでしっかりと使う必要があります。
リゾルバ関数
スキーマの型に対して何か情報を入れるという意味があります。上の例で言えばinfoというフィールドの方に対して情報を入れています。雛形（スキーマ定義）に対して何か情報を入れてあげるという意味になります。
起動
|
1 |
node server.js |
PlayGroundというApolloの統合開発環境が開きます。
以下のコマンドを実行したら
|
1 2 3 |
query { info } |
以下の結果が返ってきます。
|
1 2 3 4 5 |
{ "data": { "info": "リターンinfo" } } |
Mutationサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
let links = [ { id: "link a", description: "graphlqぐ", url: "fajko", }, ]; const typeDefs = gql` type Mutation { post(url: String!, description: String!): Link! } type Link { id: ID! description: String! url: String! } `; const resolvers = { Mutation: { post: (parent, args) => { const link = { id: `link-a`, description: args.description, url: args.url, }; links.push(link); return link; }, }, }; |
ただ、このサンプルだとあくまでローカルPCのメモリ上に保存している(linksという配列にpushすることで実現している)ので、データを永続化したい場合は別途DBサーバー構築などの対応が必要になります。
parent
スキーマ定義で言うところの親リゾルバ関数の戻り値になります。親リゾルバ関数がない場合はnullになります。
args
クライアントから渡された引数になります。
return link;
最後リゾルバ関数（上の例で言えば、post)でreturnしているのは上で定義したスキーマ定義と同じように返してあげてますよという意味になります。
問い合わせ
|
1 2 3 4 5 6 7 |
mutation{ post(url:"あああ",description: "あああ") { id, description, url } } |
この記事へのコメントはありません。