53ningen.com53ningen.com
Loading...

GraphQLsheet はじめの一歩

2023/01/10 07:12
2024/12/30 17:54
Programming
GraphQL
かねてより 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 となりますが、ガッツリ利用する場合、これではちょっと足りないかも......？ と感じたり。