Zenn
📐

GraphQLsheet はじめの一歩

2023/01/10に公開
GraphQL
tech

かねてより Google Spreadsheet をデータベース代わりにしつつ、そのデータを GraphQL API として利用できれば便利だなと思っていました。

今回はそれを手軽に実現できそうなサービスとして "GraphQLsheet" というサービスがありましたので、とりあえず使ってみた記録です。

GraphQL API のセットアップ

Google Spreadsheet と連携した GraphQLsheet が提供する GraphQL API のセットアップは次のようなステップで手軽に実施できます。

  1. GraphQLsheet と Google アカウントの紐付けをひとまず Free プランで行う
  2. 対象の Spreadsheet を用意する（検証用に GraphQLsheet 側が用意したサンプルも利用できる）
  3. GraphQL API 作成ページ に Spreadsheet の ID を入力する（Spreadsheet URL は https://docs.google.com/spreadsheets/<ID>/edit という構造になっている）

なお、用意する Spreadsheet の先頭行は alphabet 始まりのデータ名にする必要があります。

GraphQLsheet が提供する GraphQL API を操作する

GraphiQL を利用したリクエスト

GraphQLsheet は GraphiQL もホストしてくれています。Dashboard ページ から対象の Spreadsheet の [API] を選択すると対応する GrapiQL にアクセスできます。あとはそれを利用してリクエストを行うのみです。

例として GraphQLsheet 側が用意したサンプル に対応する GraphQL API へリクエストを行った例は下記のようになります。

// Query
query MyQuery {
  get(limit: 10){
    Name,
    Age,
    Member
  }
}

// Response
{
  "data": {
    "get": [
      {
        "Name": "Achilleas",
        "Age": 12,
        "Member": true
      },
      {
        "Name": "Ioanna",
        "Age": 14,
        "Member": false
      }
    ]
  }
}

curl を利用したリクエスト

curl を利用するサンプルコマンドも Dashboard ページ から手軽に参照可能です。基本的に一般的な GraphQL API と同様、単純にトークンをリクエストヘッダに仕込む形になります。

$ URL="<ENDPOINT_URL>"
$ TOKEN="<ACCESS_TOKEN>"
$ curl $ENDPOINT_URL \
-X POST \
-H "Content-Type: application/json" \
-H "token: $TOKEN" \
--data '{ "query": "{ get (limit: 20) { Name, Age, Member } }" }'

{"data":{"get":[{"Name":"Achilleas","Age":12,"Member":true},{"Name":"Ioanna","Age":14,"Member":false}]}}

JavaScript を利用したリクエスト

curl コマンドの例と同様、JavaScirpt, PHP, Python での GraphQL API 呼び出し例もコピー&ペーストで利用できる形になっており、とてもとっつきやすいです。

以下は JavaScript を利用したリクエスト例です。Chrome の Developer コンソールに貼り付けて実行すれば動作を確認できます。

const queryData = async () => {
  const token = '<ACCESS_TOKEN>'
  const spreadsheetId = '<SPREADSHEET_ID>'
  const response = await fetch(
    `https://api.graphqlsheet.com/api/${spreadsheetId}`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        token: token,
      },
      body: JSON.stringify({
        query: `
        {
          get (limit: 20) {
            Name,
            Age,
            Member
          }
        }
      `,
      }),
    }
  )
  const responseJSON = await response.json()
  console.log(responseJSON)
}

queryData()

// response:
{
    "data": {
        "get": [
            {
                "Name": "Achilleas",
                "Age": 12,
                "Member": true
            },
            {
                "Name": "Ioanna",
                "Age": 14,
                "Member": false
            }
        ]
    }
}

サービスのプラン

注: 以下は 2023/1/10 現在の情報です

Free プランだと 500 requests/month までの利用となっているため、データ量にもよりますが Spreadsheet をもとに 0.5〜1 日に一回 ISR でページ生成するといった用途であれば、このまま使えるかと思います。

もっとも Plus プランは $9 で 10,000 request/month まで利用できるため、この程度の金額であれば手が出しやすく、立ち上がりのタイミングで Spreadsheet のデータを用いてリアルタイム性があまり求められない SSG, ISR なページを作りたい場合はとても便利だと感じます。

最上位の Pro プランは $79 で 1,000,000 request/month となりますが、ガッツリ利用する場合、これではちょっと足りないかも...？ と感じたり。

Discussion