Apollo Serverを使用してGraphQLサーバを起動する – 【GraphQL】
GraphQLサーバを起動します。Apollo Serverを使用します。
プロジェクト作成とインストール
$ npm init -y $ npm i @apollo/server graphql $ touch server.mjs
v3とv4
apollo-serverはv3、@apollo/serverはv4のようです。
package.json
package.jsonのnpmスクリプトを以下にします。
"scripts": {
"start": "node server.mjs"
}
server.mjs
server.mjsの中身です。
server.mjs
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
// schema
const typeDefs = `#graphql
type Query{
hi: String
hello(name: String!): String
bye(name: String!, message: String!): String
}
`
// resolver
const resolvers = {
Query: {
hi: () => {return 'hi.'},
hello: (p, a) => {
return 'Hello World ' + a.name
},
bye: (p, a)=> a.message + ' ' + a.name
}
}
const server = new ApolloServer({ typeDefs, resolvers });
const { url } = await startStandaloneServer(server);
console.log(`🚀 Server ready at ${url}`);
起動
npm run startでサーバ起動ができます。
http://localhost:4000/にアクセスします。
GraphQLのplaygroundにアクセスできます。この画面からhelloクエリを実行します。
helloクエリ
Qurery
query ExampleQuery($name: String!) {
hello(name: $name)
}
Variables
{
"name": "takahashi"
}
Response
{
"data": {
"hello": "Hello World takahashi"
}
}
上記がブラウザでhelloクエリを実行したレスポンス結果です。
byeクエリ
次にbyeクエリを実行します。
Qurery
query Query($name: String!, $message: String!) {
bye(name: $name, message: $message)
}
Variables
{
"name": "takahashi",
"message": "byebye"
}
Response
{
"data": {
"bye": "byebye takahashi"
}
}
上記がブラウザでbyeクエリを実行したレスポンス結果です。
スキーマの種類
スキーマにはQuery、Mutation、Subscription、それと任意の名前のオブジェクトと言うスキーマが定義できます。
Query、Mutation、Subscriptionの3つは予め定義された特別なスキーマです。
フロントからfetchでデータ取得する
htmlファイルを作成してfetchして確認します。
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>test</title>
</head>
<script>
async function load() {
const response = await fetch("http://localhost:4000", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
query: `query($name: String!, $message: String!) {
bye(name: $name, message: $message)
}`,
variables: {"name": "takahashi", "message": "bybybybyby"}
})
});
const data = await response.json();
document.getElementById('app').innerHTML = `${data.data.bye}`;
}
load();
</script>
<body>
<div id="app"></div>
</body>
</html>
ブラウザで開くと、byeクエリが実行されています。
curlコマンド
curlコマンドでPOSTしても確認できます。hiクエリを実行する例です。
C:\>curl -X POST -H "Content-Type: application/json" ^
-d "{\"query\": \"{ hi }\"}" http://localhost:4000/
引数有になってくるとcurlは面倒なのでPOSTMANなどのツールでテストする方がよさそうです。
ドキュメント
apollo-server
Production ready GraphQL Server. Latest version: 3.13.0, last published: 2 months ago. Start using apollo-server in your...
www.npmjs.com
@apollo/server
Core engine for Apollo GraphQL server. Latest version: 4.10.0, last published: 15 days ago. Start using @apollo/server i...
www.npmjs.com
GraphQL Code Libraries, Tools and Services
A query language for your API — GraphQL provides a complete description of the data in your API, gives clients the power...
graphql.org
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント