ClerkのRemixアダプターは、デフォルトだとClerkが提供するLoaderだけをrootのLoaderで使うように説明されています。これを他の処理と同居させる方法を試したので、その覚書です。

やりたいこと

レイアウト要素をrootで定義するようなサイトを作っています。その中で外部のAPIが提供するデータを使おうとしていたのですが、Clerkのドキュメントに記載されているloaderの使い方では、他のloaderとの併用が出来無さそうでした。

// Import rootAuthLoader
import { rootAuthLoader } from '@clerk/remix/ssr.server'

// Export as the root route loader
export const loader: LoaderFunction = (args) => rootAuthLoader(args)

以下の例では、レイアウト要素で記事カテゴリ一覧を出すため、WP APIを呼びだしています。

export async function loader(args: LoaderFunctionArgs) {
  const locale = params.lang?.startsWith('en') ? 'en' : 'ja'
  const wpClient = new WPAPIClient('https://example.com')
  const categories = await wpClient.listWPCategories({
    orderby: 'count',
    order: 'desc',
    hide_empty: true,
    locale
  })
  return json({
    categories: categories,
    user,
  })
}

rootAuthLoaderはPromise<Response>を返すので、それを応用する

型定義を調べると、rootAuthLoaderはPromise形式でResponseオブジェクトを返していました。ということは、その形を維持するようなloaderを作ればいけそうです。

export async function loader(args: LoaderFunctionArgs) {
  const clerkLoader = await rootAuthLoader(args, () => {
    return {}
  }, {
    publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
  })
  const clerkResponse = await (clerkLoader as Response).json<object>()

  const locale = params.lang?.startsWith('en') ? 'en' : 'ja'
  const wpClient = new WPAPIClient('https://example.com')
  const categories = await wpClient.listWPCategories({
    orderby: 'count',
    order: 'desc',
    hide_empty: true,
    locale
  })
  return json({
    ...clerkResponse,
    categories: categories,
    user,
  })
}

この方法を採用する場合のポイントは、rootAuthLoaderの第二引数第三引数です。この辺りはまだあまりちゃんと把握できていないのですが、第三引数でClerkのPublishable Keyを渡してやるのが良さそうでした。

また、JSONでreturnする必要があったので、clerkLoader.json()を一度かませています。