1. HOME
  2. ブログ
  3. IT技術
  4. GraphQLでデータ操作をしてみた

GraphQLでデータ操作をしてみた

はじめに

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

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

よろしくお願いします。

GraphQLとは

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

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

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

RESTGraphQL
取得GETQuery
登録POSTMutation
更新PATCHMutation
削除DELETEMutation

詳しくは、こちらの記事をご参照ください。

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

GraphQLサーバー構築

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

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

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

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

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

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

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

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

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

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

無事起動できました😀

Prisma

それでは、DBにデータを保存するためprisma、prisma/clientをインストールします

インストール後、初期化処理を行います。

実行後、prismaディレクトリに、schema.prismaファイルが作成されます。

今回DBはSQliteを使用します。

model作成後、マイグレーションを行います

マイグレーションファイルが作成されたので、Prisma Clientを再生成します。

script.jsファイルを作成し、Prisma Clientでデータベース操作をするためのコードを記述します。

ターミナルで確認するとデータが入っているので連携しているようです。
クライアントとPrismaは連携ができたので、次はサーバーとPrismaを連携してみます。

index.jsにコンテキストを追加して、リゾルバ関数内で使用できるようにコードを修正します。

Apollo Serverを起動して、データの取得や作成ができるか確認してみます。

Mutation実行後、

データが追加されました

ちなみに、Prisma Studioを使用すると、データベースの中身をテーブルで確認することもできます!

終わりに

記事をご覧いただきありがとうございました。

今回はバックエンドだけの実装であったことと、GraphQLの初歩的なデータ操作しか扱わなかったので、次回は、フロント側の実装や、もう少し深いところまで記事にできたら良いなと思います。

 

書いた人はこんな人

ずお(エンジニア)
愛媛県の田舎町で生まれ育ちましたずおと申します。
趣味はサウナと居酒屋巡りです。
未経験で入社させていただいたので、いち早く戦力になれるように日々頑張ります!
座右の銘は「悩んでるひまに、一つでもやりなよ」
ドラえもんの名言です。よろしくお願いします。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア