GraphQLのジレンマ(めちゃ共通なComponentがあるとき)

みんなどうしてるんだろう　と疑問を投げるだけの記事です。

例えばいろんなページで使い回す、データ取得が必要なComponentがある場合。
Componentは共通だが、クエリは一発で済ませたいので、Fragmentを利用したくなる。

※以下、GraphQLの部分は擬似言語です

例:

type Props = {
    user: UserFragmentType;
}

export function GlobalUserHeader(props: Props) {
    const user = useFragment(props);
    return (
        <header>
            <h1>{user.name}</h1>
            <h2>{user.email}</h2>
        </header>
    )
}

利用側例:

export function MyPage() {
    const response = useQuery(myPageQueryDoc);
    return (
        <div>
            <GlobalUserHeader user={user} />
            <MyContents />
        </div>
    )
}

でも、どのページでも確実に必要になるものを、毎回クエリ書くのはめんどくさいので、正直 GlobalUserHeader 内で fetch したい。

みなさんどうしているんだろう。自分はそれでもFragmentを使ってしまってます。

[余談]
これを解決するのが、Next.js App RouterのRequest Memoization（Component内に気軽にfetch書いちゃっても良い気持ちになれる）なのかもしれないなあ（小並感）