Upstash Redisで実現するNetlify Graphのグローバルキャッシュ

はじめに

先日、Netlifyは「Netlify Graph」という新機能を発表しました。同僚が以前から指摘していた不足していたピースに対して、Netlifyがソリューションへ向けて良い一歩を踏み出した形です。

Netlify Graphは、開発者がWebアプリ向けのGraphQL API呼び出しを構築するのを支援する機能です。Netlifyダッシュボード上でGraphQLリクエストを準備すれば、ワンクリックでクライアントコードをプロジェクトに注入できます。

Netlify Functionsとサードパーティサービスの課題

Netlify Functionsをサードパーティサービスと組み合わせて使う場合、1つの注意点があります。クライアントからのリクエストは、まずNetlifyバックエンド(Functions)に送られ、その後サードパーティサービス(本記事の例ではSpotify)へと渡されます。これらのサービスとエンドユーザーが同じ地理的な場所にいない場合、この経路によってレイテンシが大幅に増加してしまいます。

もしNetlify Functionsから取得したデータをキャッシュできれば、レイテンシを最小限に抑えることができます。Upstash Global Redis Databaseは、Netlify API呼び出しをキャッシュするための優れたソリューションです。Upstash Redisのマルチリージョンレプリケーションのおかげで、APIレスポンスをグローバルにキャッシュ・レプリケートできます。

それでは、Spotify APIを呼び出し、そのAPI呼び出しをUpstash Global Redisにキャッシュする、シンプルなSpotifyアプリケーションを作成していきましょう。

Next.jsスターターアプリのデプロイ

まず、Netlify Consoleを使ってNext JS Starter Appをデプロイします。これは数回のクリックでデプロイできる、非常にシンプルなNext.jsアプリです。Next.jsスターターアプリのデプロイに関する他のオプションも併せて確認しておくとよいでしょう。

デプロイ後、サンプルリポジトリをローカル環境にクローンし、netlify devコマンドを実行します。localhost:8888で動作するはずです。初めてセットアップする場合は、netlify loginコマンドの実行が必要になることがあります。

Netlify GraphとSpotify APIの連携設定

次に、Netlify GraphとSpotify APIの統合を設定します。以下のパスに移動してください。

Netlify Console → サンプルアプリ → Graph → Connect API or Service → Spotify

Spotify設定ページでAuthenticationとGraph Explorerを有効にすると、API統合のためにSpotifyとの認証が行われます。

GraphQL Playgroundでクエリを作成

これでGraphQL Playgroundを操作できます。Start querying Spotifyボタンをクリックしてください。続いて、プロジェクトディレクトリで以下のコマンドを実行してnetlify-cliを起動します。

netlify dev --graph

CLIの処理が完了したら、Netlify Graphセクションを確認すると、アクティブなセッションが表示されます。セッションをクリックすると、GraphQL API用のプレイグラウンド環境が開きます。

このプレイグラウンドは非常に優秀なツールです。目的に応じたGraphQLクエリを手軽に生成できます。筆者もすぐに、Featured Playlists(注目プレイリスト)を返すSpotifyクエリを生成しました。

query SpotifyFeatured {
  spotify {
    featuredPlaylists {
      name
      images {
        url
      }
      description }}}

コードの生成とプロジェクトへの注入

クエリを作成したら、コードを生成してプロジェクトに注入しましょう。

Actions → Generate Handlerをクリックします。

netlify-cliが自動的に、apiディレクトリ配下にSpotifyFeatured.jsファイルを、pagesディレクトリ配下にSpotifyFeaturedForm.jsxファイルを生成します。

• SpotifyFeatured.js: Netlifyバックエンド → Spotify APIからデータを取得するNetlify関数の定義
• SpotifyFeaturedForm.jsx: Netlify Functionを呼び出してレスポンスを返す、シンプルなReactコンポーネント(フォーム)

筆者はUI体験を向上させるために、このコンポーネントのHTML/CSS部分のみ編集しました。コードは記事の最後に共有しています。

index.jsにSpotifyFeaturedForm.jsxコンポーネントを組み込みます。

import Spotify from './SpotifyFeaturedForm'
...
...
<Spotify title="Spotify Featured Playlist"/>

これでメインページにボタンが表示され、Spotify APIからレスポンスを取得できるようになりました。次に、このレスポンスをキャッシュしていきます。

Upstash Global Databaseによるキャッシュの実装

Upstash Globalデータベースの作成

Upstash ConsoleからUpstash Globalデータベースを作成します。

自動生成されたNetlify Functionコードの修正

自動生成されたNetlify Functionコード(SpotifyFeatured.js)を修正します。コード内には、Netlifyバックエンド/Spotify APIからデータを取得する以下の部分があります。

const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured({  }, {accessToken: accessToken});

ここでは、まずRedisにキャッシュが存在するかを確認し、存在しない場合にのみサードパーティサービスを呼び出すように変更します。

Redisとの通信には、Upstash Redis JSライブラリを使用しました。Upstash Redis REST認証情報は、データベース詳細ページから取得できます。

コードスニペット内のUPSTASH_REDIS_REST_URLとUPSTASH_REDIS_REST_PASSWORDを、ご自身の値に置き換えてください。

redisClient.auth('UPSTASH_REDIS_REST_URL', 'UPSTASH_REDIS_REST_PASSWORD');
spotifyData = await redisClient.get('spotify-cache');
if (spotifyData.data == null) {
    spotifyData = await NetlifyGraph.fetchSpotifyFeatured({}, {accessToken: accessToken});
    if (spotifyData.errors) {
        console.error(JSON.stringify(spotifyData.errors, null, 2));
    } else {
        await redisClient.setex('spotify-cache', 300, JSON.stringify(spotifyData));
    }
} else {
    spotifyData = JSON.parse(spotifyData.data)
}
res.setHeader("Content-Type", "application/json");

return res.status(200).json({
    spotifyData
});

上記のコードスニペットでは、まずUpstash Redisにキャッシュが存在するかどうかを確認します。キャッシュが存在すればそれを使用し、存在しなければ元のAPIからデータをフェッチして、結果をUpstashに保存します。非常にシンプルなコードスニペットなので、用途に応じて自由に改善・カスタマイズできます。

わずか数行のコードを追加するだけで、Netlify Graph機能にグローバルキャッシュの仕組みを実装できました。

まとめ

Netlify Graph機能により、すべての開発者がサードパーティAPIサービスを簡単にコードへ統合できるようになります。NetlifyのGraphQLエクスプローラーとコード注入機能は、開発作業を大きく効率化してくれます。

一方、APIレスポンスをキャッシュしたい場合は、Upstash Globalデータベースが最適なソリューションとなります。Upstash Redisデータベースの作成は、ほんの数回のクリックで完了します。

サンプルアプリケーションの最新コードは、こちらからご覧いただけます。