[WIP] Possible evolution of the Relay integration with Next.js v13

issue-tracker-next-v13/.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "typescript.tsdk": "./node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}

issue-tracker-next-v13/app/issues/[id]/page.tsx

@@ -1,25 +1,39 @@
-import loadSerializableQuery from "src/relay/loadSerializableQuery";
-import IssueQueryNode, { IssueQuery } from "__generated__/IssueQuery.graphql";
-import IssueViewClientComponent from "./IssueViewClientComponent";
 import styles from "styles/Issue.module.css";
+import { pageIssueQuery } from "__generated__/pageIssueQuery.graphql";
+import fetchQuery from "src/relay/fetchQuery";
+import { graphql } from "relay-runtime";
+import IssueComponent from "src/components/IssueComponent";
+import { environment } from "src/relay/environment";
 
 export default async function IssuePage({
   params,
 }: {
   params: { id: string };
 }) {
-  const preloadedQuery = await loadSerializableQuery<
-    typeof IssueQueryNode,
-    IssueQuery
-  >(IssueQueryNode.params, {
-    owner: "facebook",
-    name: "relay",
-    issueNumber: parseInt(params.id, 10),
-  });
-
+  const response = fetchQuery<pageIssueQuery>(
+    environment,
+    graphql`
+      query pageIssueQuery(
+        $owner: String!
+        $name: String!
+        $issueNumber: Int!
+      ) {
+        repository(owner: $owner, name: $name) {
+          issue(number: $issueNumber) {
+            ...IssueComponentFragment
+          }
+        }
+      }
+    `,
+    {
+      owner: "facebook",
+      name: "relay",
+      issueNumber: parseInt(params.id, 10),
+    }
+  );
   return (
     <div className={styles.issue}>
-      <IssueViewClientComponent preloadedQuery={preloadedQuery} />
+      <IssueComponent issue={(await response).repository?.issue ?? null} />
     </div>
   );
 }

issue-tracker-next-v13/app/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return "Loading...";
+}

issue-tracker-next-v13/app/page.tsx

@@ -1,26 +1,46 @@
-import loadSerializableQuery from "src/relay/loadSerializableQuery";
+import { graphql } from "relay-runtime";
+import fetchQuery from "src/relay/fetchQuery";
 import styles from "styles/MainView.module.css";
-import MainViewQueryNode, {
-  MainViewQuery,
-} from "__generated__/MainViewQuery.graphql";
-import MainViewClientComponent from "./MainViewClientComponent";
+import { pageMainViewQuery } from "__generated__/pageMainViewQuery.graphql";
 
+import RelayRoot from "src/relay/RelayRoot";
+
+import Issues from "src/components/Issues";
+import { environment } from "src/relay/environment";
+
+// This is a server only component. FetchQuery is never executed on the client
+// we're passing serializable fragment key (+ we include extra information about fetched queries)
+// so we can process them on the client (add client components can also
 const Page = async () => {
-  const preloadedQuery = await loadSerializableQuery<
-    typeof MainViewQueryNode,
-    MainViewQuery
-  >(MainViewQueryNode.params, {
-    owner: "facebook",
-    name: "relay",
-  });
+  const data = await fetchQuery<pageMainViewQuery>(
+    environment,
+    graphql`
+      query pageMainViewQuery($owner: String!, $name: String!) {
+        repository(owner: $owner, name: $name) {
+          owner {
+            login
+          }
+          name
+          ...IssuesFragment
+        }
+      }
+    `,
+    {
+      owner: "facebook",
+      name: "relay",
+    }
+  );
 
   return (
     <div className={styles.main}>
-      <MainViewClientComponent preloadedQuery={preloadedQuery} />
+      <h1>
+        {data.repository?.owner.login}/{data.repository?.name}
+      </h1>
+      <RelayRoot>
+        <Issues issues={data.repository ?? null} />
+      </RelayRoot>
     </div>
   );
 };
 
 export default Page;
-
-export const revalidate = 0;