GraphQLクエリをCDNキャッシュに載せたい

https://gyazo.com/8c211bb56664804a0dbf7c16dab18e4d

大稻埕碼頭

はじめに

Persisted Queries を使う方法として二種類のパターンを考えてみました。

Next.js（フロントエンド）からNext.js（API Routes）へのリクエストにのみハッシュ値を使う

Next.js（フロントエンド）からRails（バックエンド）に至るまで全てハッシュ値でやりとりする

今回は前者の実装だけで目的を達成することができるため、前者の実装を行うことにしました。

クエリとハッシュ値を相互に変換するテーブルを用意する

code:codegen.yml

overwrite: true

...

generates:

generated/server.graphql.gen.json:

plugins:

- graphql-codegen-persisted-query-ids:

output: server

algorithm: sha256

generated/client.graphql.gen.json:

plugins:

- graphql-codegen-persisted-query-ids:

output: client

algorithm: sha256

その後、コード生成コマンドを実行します。

code:console

./node_modules/.bin/graphql-codegen --config codegen.yml

Apollo Linkの設定

Http Linkを使います。以下のように設定していきます。

url

BFFへのエンドポイントを指定する

useGETForQueries

fetch

GETリクエストの場合は query をハッシュ値に置き換える

code:apolloClient.ts

import { ApolloClient, from, HttpLink } from "@apollo/client"

import queryHash from "generated/client.graphql.gen.json"

const endPointLink = new HttpLink({

uri: "/api/graphql",

useGETForQueries: true,

fetch: (uri, options: RequestInit) => {

if (options.method === "GET") {

// クエリをハッシュ値に変換します

const params = new URLSearchParams(queryString)

// params の中身についてはこちらが参考になります

const { query, operationName, ...others } = Object.fromEntries(params)

const hashedParams = new URLSearchParams({

operationName,

...others,

})

}

return fetch(uri, options)

},

})

export const apolloClient = (() =>

API Routesでの処理

最後にAPI Routesの処理を書いていきます。主な観点は以下の部分です。

ハッシュ値をクエリに戻した上で、GraphQLバックエンドにPOSTリクエストする

HTTP キャッシュヘッダーをセットする

code:pages/api/grpahql.ts

import type opnameHash from "generated/client.graphql.gen.json"

import hashQuery from "generated/server.graphql.gen.json"

import type httpProxy from "http-proxy"

import { NextApiHandler, NextApiRequest, NextApiResponse, PageConfig } from "next"

import httpProxyMiddleware from "next-http-proxy-middleware"

export const config: PageConfig = {

api: {

bodyParser: false,

externalResolver: true,

},

}

const handleProxyInit = (proxy: httpProxy) => {

proxy.on("proxyReq", (proxyReq, req, res) => {

if (proxyReq.method !== "GET") return

const params = new URLSearchParams(queryString)

// クエリのハッシュ値からクエリを復元する

const { q, operationName, ...others } = Object.fromEntries(params)

// GETリクエストをPOSTリクエストとして送信する

proxyReq.method = "POST"

const bodyData = JSON.stringify({

query,

operationName,

...others,

})

proxyReq.setHeader("Content-Length", Buffer.byteLength(bodyData))

proxyReq.write(bodyData)

})

proxy.on("proxyRes", (proxyRes, req, res) => {

})

}

const h: NextApiHandler = (req: NextApiRequest, res: NextApiResponse): Promise<void> =>

httpProxyMiddleware(req, res, {

..., // ※ RailsバックエンドへのProxyの設定を書く

onProxyInit: handleProxyInit,

})

export default h

これで完了です。Apollo Linkを使っているため、フロント側のuseQueryフックは変更する必要がありません。これでCDNでのキャッシュと、クエリをブラウザに露出させることを防ぐことができるようになりました。

まとめ

Persisted QueriesはApolloが提唱する仕様通りに作ることもできますが、今回の例のように自分で変換処理を書くことで、最低限の仕組みだけで実装することが可能です。

一方でApolloの仕様に則ったライブラリも豊富なので、そちらに実装に合わせておくと良い場合もありそうです。いずれにしても仕組み自体は難しくないので、覚えておくと何かと便利な仕組みだと思いました。

宣伝

株式会社モニクルでは、はたらく世代・子育て世代が抱えるお金や資産運用に関する不安や悩みを解決するお手伝いをさせていただき、現在から老後に至るまでの資金計画や最適なポートフォリオの提案を行っております。