GraphQLでデータ操作をしてみた【株式会社ライトコード】

※弊社エンジニアの記事になります。

はじめに

こんにちは、福岡オフィスでWebエンジニアとして働いているずおです！

今回は、GraphQLでデータ操作をしてみるというお題で記事を書いていきたいと思います。

よろしくお願いします。

GraphQLとは

一言で言うと「APIのクエリ言語」です。

REST APIと異なり、GraphQLは、基本的に１つのエンドポイントから、自分が欲しい情報だけを取得することができます。

RESTとGraphQLの対応関係は下記の通りです。

REST：GraphQL

取得 GET：Query

登録 POST：Mutation

更新 PATCH：Mutation

削除 DELETE：Mutation

では実際にGraphQLを利用してみましょう！

GraphQLサーバー構築

まずは、ディレクトリを作成し、package.jsonを作成します。

私はディレクトリ名をgraphql-backendとしました。

mkdir graphql-backend
cd graphql-backend
npm init -y

次に、apollo/serverとgraphqlライブラリのインストールを行います。

npm install @apollo/server graphql

インストール完了後、package.jsonにライブラリが追加されていればOKです！

{
  "name": "graphql-backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@apollo/server": "^4.7.4",
    "graphql": "^16.7.1"
  }
}

そして、schema.graqhqlファイルを作成し、スキーマを定義していきます。

# GraphQLスキーマを定義する
type Query {
  info: String!
  feed: [Link!]!
}

type Mutation {
  post(url: String!, description: String!): Link!
}

type Link {
  id: ID!
  description: String!
  url: String!
}

次にindex.jsファイルを作成し、先ほど別ファイルで定義したスキーマを読み込みます。

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";
import { readFileSync } from "fs";

// schema.graphqlファイルを読み込む
const typeDefs = readFileSync("./src/schema.graphql", { encoding: 'utf-8' });

次にリゾルバを定義します。

スキーマで定義された型の取得方法を定義し、実際にデータ操作を行うのがリゾルバというものになります。

// リゾルバを定義する
const resolvers = {
	Query: {
		info: () => `github information`
	}
};

スキーマとリゾルバが定義できたら、ApolloServerをインスタンス化し、

それをstartStandaloneServerに渡し、実際にサーバーが起動できているか確認します。

// ApolloServerをインスタンス化する
const server = new ApolloServer({
	typeDefs,
	resolvers
});

// startStartaloneServer関数にApolloServerインスタンスを渡す
const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

// console.logでサーバーのURLを表示する
console.log(`🚀 Server ready at ${url}`);

無事起動できました😀

記事の続きは下のリンクをクリック！

https://rightcode.co.jp/blog/information-technology/graphql-data-manipulation-syain