SWRを用いてDynamoDBを操作してみた #TypeScript

概要

fetch ポリフィル developit/unfetch など、任意のライブラリを使用してデータのフェッチを処理できます：

(引用元: SWR-データフェッチ)
とのことらしいのでDynamoDBの操作をSWRからやってみた、という記事です

環境

Next.js: 12.2.5
swr: 1.3.0
@aws-cdk/client-dynamodb: 3.145.0

動作検証用にSWRと親和性の高いNext.jsを採用しています。またローカル環境での動作チェックのためDynamoDB-LocalをDockerコンテナ上で走らせることを想定しています。

DynamoDBの操作

サンプルとして、IDが主キーになっているTODOリストから特定のIDのみを取得するQueryを実装します。DynamoDB-Localを用いているので、credentialsは適当なデータにしておきます。

(この実装方法だとリクエストを飛ばすたびにDynamoDBClientを生成しているのであまりよくない。。。)

import { DynamoDBClient, QueryCommand, QueryCommandOutput } from "@aws-sdk/client-dynamodb"

const queryWrapper = async (id: number): Promise<QueryCommandOutput> => {
  const client = new DynamoDBClient({
    endpoint: "http://dynamodb-local:8000",
    region: "ap-northeast-1",
    credentials: { accesskeyId: "dummy", secretAccesskey: "dummy" },
  })

  const command = new QueryCommand({
    TableName: "posts",
    KeyConditionExpression: "id = :id",
    ExpressionAttributeValues: {
      "id": { N: String(id) },
    },
  })

  return await client.send(command)
}

SWRを用いて叩く例

useSWRに渡すfetcherでは、従来のようなfetchを叩くのではなくqueryWrapperを叩くようにします。取得したデータはQueryCommandOutputというDynamoDB特有の型になっているので適宜変換をしておく必要があります。(この例ではやってません)

import useSWR from "swr"
import type { QueryCommandOutput } from "@aws-sdk/client-dynamodb"

interface FetcherInput {
  id: number
}

const postList = () => {
  const fetcher = ({ id }: FetcherInput) => queryWrapper(id)

  const { data } = useSWR<QueryCommandOutput>({ id: 1 }, fetcher)

  return data
}

まとめ

~~いかがでしたか？~~

DynamoDBの操作をSWRを用いて行うことによって、リクエストのキャッシュなどのSWRのメリットを享受出来るようになりました。SWR側で細かい設定をすることなく、任意のデータフェッチ関数を渡すことでよしなに扱ってくれる点はSWRの良い点だと思ってます。

是非皆さんも使ってみてください！