Hydrogen におけるサーバーサイドでの cart attribute の取得方法

日本語 ディスカッション 技術的なQ＆A
1

お世話になります。

現在 hydrogen をつかってカスタムフロントショップの実装を進めており、cart attribute の値を利用して特定のコンポーネントの表示を切り替えるような実装をしたいと考えています。
下記ドキュメントのにあるように useCart を使って cart attribute の値を取得し制御を行おうと思ったのですが Expected a Cart Context, but no Cart Context was found というエラーが発生してしまいました。
https://shopify.dev/api/hydrogen/hooks/cart/usecart

上記の制御はサーバーサイドコンポーネントから呼び出される処理の中で行おうとしていましたが、下記ドキュメントよりカート情報の利用はクライアントサイド限定であると理解しました。
https://shopify.dev/custom-storefronts/hydrogen/framework/work-with-rsc#using-context-in-react-server-components

  • サーバーサイドでカート情報を利用、参照する方法はないのか
  • cart attribute の値によってサーバーサイドコンポーネントの表示を切り替えるようなことはできないのか

上記について、なにかご存知でしたらご教示いただきたいです。

また、cart attribute を利用する理由は 顧客アカウントでのログイン状態にかかわらず、閲覧者に対してステータスを持たせる ためで、そういう意味では cookie でも似たようなことができると考えています。（cookie もサーバーサイドから参照できないはずなので同じ問題が発生するのですが。。）

もし cart attribute 以外でも似たようなことができそうでしたら、そちらについてもご教示いただけると幸いです。

よろしくお願いいたします。

2

Hydrogen に搭載されている useCart などの hook 機能を参考に下記のようなコードで useCookie.server を作成したところサーバーサイドで cookie を読み取ることができ 顧客アカウントでのログイン状態にかかわらず、閲覧者に対してステータスを持たせる という要件を満たすことができたのですが、こちらを使用するとページのレンダリングが終わらなくなってしまいました。

import React, { useContext } from 'react';

type UseCookieProps = {
  cookie: { [key in string]: string };
};

const DEFAULT = {
  cookie: {},
};

const context = React.createContext(DEFAULT);

export const CookieProvider = ({
  cookie,
  children,
}: {
  cookie: Map

`useCookie.server` を `useCookie.client` に変更してみたところ正常に画面が表示されるようになるのですが、クライアント側の処理ですとサーバーサイド側のコンポーネントの表示を制御することができません。

サーバーサイドコンポーネントの中で上記コードの `useCookie` を実行すると、問題なく cookie の値は取れるのですが `Warning: Only ServerContext is supported in Flight` という警告が発生します。

何かいい方法をご存知でしたらご教示いただきたいです。
よろしくお願いいたします。