experiment: Static fragments on Client Components

examples/app-dir-experiments/app/User.tsx

@@ -0,0 +1,27 @@
+// Turning this component into a Client Component causes the reference in the
+// owner component to be changed into a lazy reference where the static fragment
+// is not available.
+
+// 'use client';
+
+import { gql } from "@apollo/client";
+
+type Props = {
+  user: {
+    id: string;
+    name: string;
+  }
+}
+
+export default function User({user}: Props) {
+  return <p>Received from RSC render: {JSON.stringify(user)}</p>
+}
+
+User.fragments = {
+  user: gql`
+    fragment User_user on User {
+      id
+      name
+    }
+  `
+}

examples/app-dir-experiments/app/page.tsx

@@ -1,25 +1,29 @@
 import { gql } from "@apollo/client";
 import { getClient } from "./ApolloClient";
 import Link from "next/link";
+import User from "./User"; 
+
+// Only available when `User` is a Server Component
+console.log(User.fragments.user);
 
 export const dynamic = "force-dynamic";
 // 'auto' | 'force-dynamic' | 'error' | 'force-static'
 
 const userQuery = gql`
   query {
     getUser(id: "1") {
-      id
-      name
+      ...User_user
     }
   }
+  ${User.fragments.user}
 `;
 
 export default async function Home() {
   const { data } = await getClient().query({ query: userQuery });
 
   return (
     <div>
-      <p>data received during RSC render: {JSON.stringify(data)}</p>
+      <User user={data.getUser} />
       <p>
         <Link href="/ssr">SSR examples are here</Link>
       </p>