relayjs · alunyov · Jan 17, 2023 · Jan 8, 2023 · Jan 8, 2023 · Jan 8, 2023
diff --git a/issue-tracker-next-v13/app/MainViewClientComponent.tsx b/issue-tracker-next-v13/app/MainViewClientComponent.tsx
@@ -1,13 +1,11 @@
 "use client";
 
 import MainView from "src/components/MainView";
-import { Suspense } from "react";
+import { useRelayEnvironment } from "react-relay";
 import { SerializablePreloadedQuery } from "src/relay/loadSerializableQuery";
 import MainViewQueryNode, {
   MainViewQuery,
 } from "__generated__/MainViewQuery.graphql";
-import { getCurrentEnvironment } from "src/relay/environment";
-import { RelayEnvironmentProvider } from "react-relay";
 import useSerializablePreloadedQuery from "src/relay/useSerializablePreloadedQuery";
 
 const MainViewClientComponent = (props: {
@@ -16,19 +14,13 @@ const MainViewClientComponent = (props: {
     MainViewQuery
   >;
 }) => {
-  const environment = getCurrentEnvironment();
+  const environment = useRelayEnvironment();
   const queryRef = useSerializablePreloadedQuery(
     environment,
     props.preloadedQuery
   );
 
-  return (
-    <RelayEnvironmentProvider environment={environment}>
-      <Suspense fallback="Loading...">
-        <MainView queryRef={queryRef} />
-      </Suspense>
-    </RelayEnvironmentProvider>
-  );
+  return <MainView queryRef={queryRef} />;
 };
 
 export default MainViewClientComponent;
diff --git a/issue-tracker-next-v13/app/issues/[id]/IssueViewClientComponent.tsx b/issue-tracker-next-v13/app/issues/[id]/IssueViewClientComponent.tsx
@@ -1,29 +1,21 @@
 "use client";
 
-import { RelayEnvironmentProvider } from "react-relay";
+import { useRelayEnvironment } from "react-relay";
 import Issue from "src/components/Issue";
-import { Suspense } from "react";
 import IssueQueryNode, { IssueQuery } from "__generated__/IssueQuery.graphql";
 import { SerializablePreloadedQuery } from "src/relay/loadSerializableQuery";
-import { getCurrentEnvironment } from "src/relay/environment";
 import useSerializablePreloadedQuery from "src/relay/useSerializablePreloadedQuery";
 
 const Root = (props: {
   preloadedQuery: SerializablePreloadedQuery<typeof IssueQueryNode, IssueQuery>;
 }) => {
-  const environment = getCurrentEnvironment();
+  const environment = useRelayEnvironment();
   const queryRef = useSerializablePreloadedQuery(
     environment,
     props.preloadedQuery
   );
 
-  return (
-    <RelayEnvironmentProvider environment={environment}>
-      <Suspense fallback="Loading...">
-        <Issue queryRef={queryRef} />
-      </Suspense>
-    </RelayEnvironmentProvider>
-  );
+  return <Issue queryRef={queryRef} />;
 };
 
 export default Root;
diff --git a/issue-tracker-next-v13/app/issues/[id]/page.tsx b/issue-tracker-next-v13/app/issues/[id]/page.tsx
@@ -1,7 +1,6 @@
 import loadSerializableQuery from "src/relay/loadSerializableQuery";
 import IssueQueryNode, { IssueQuery } from "__generated__/IssueQuery.graphql";
 import IssueViewClientComponent from "./IssueViewClientComponent";
-import styles from "styles/Issue.module.css";
 
 export default async function IssuePage({
   params,
@@ -17,9 +16,5 @@ export default async function IssuePage({
     issueNumber: parseInt(params.id, 10),
   });
 
-  return (
-    <div className={styles.issue}>
-      <IssueViewClientComponent preloadedQuery={preloadedQuery} />
-    </div>
-  );
+  return <IssueViewClientComponent preloadedQuery={preloadedQuery} />;
 }
diff --git a/issue-tracker-next-v13/app/layout.tsx b/issue-tracker-next-v13/app/layout.tsx
@@ -1,16 +1,26 @@
+"use client";
+
+import { RelayEnvironmentProvider } from "react-relay";
+import { getCurrentEnvironment } from "src/relay/environment";
 import "styles/globals.css";
 
+import styles from "styles/layout.module.css";
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const environment = getCurrentEnvironment();
+
   return (
     <html>
       <head>
         <title>Github Issues: Relay</title>
       </head>
-      <body>{children}</body>
+      <RelayEnvironmentProvider environment={environment}>
+        <body className={styles.layout}>{children}</body>
+      </RelayEnvironmentProvider>
     </html>
   );
 }
diff --git a/issue-tracker-next-v13/app/loading.tsx b/issue-tracker-next-v13/app/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return "Loading (server side)...";
+}
diff --git a/issue-tracker-next-v13/app/page.tsx b/issue-tracker-next-v13/app/page.tsx
@@ -1,5 +1,4 @@
 import loadSerializableQuery from "src/relay/loadSerializableQuery";
-import styles from "styles/MainView.module.css";
 import MainViewQueryNode, {
   MainViewQuery,
 } from "__generated__/MainViewQuery.graphql";
@@ -14,11 +13,7 @@ const Page = async () => {
     name: "relay",
   });
 
-  return (
-    <div className={styles.main}>
-      <MainViewClientComponent preloadedQuery={preloadedQuery} />
-    </div>
-  );
+  return <MainViewClientComponent preloadedQuery={preloadedQuery} />;
 };
 
 export default Page;

diff --git a/issue-tracker-next-v13/src/components/Issue.tsx b/issue-tracker-next-v13/src/components/Issue.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { graphql, PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { IssueQuery } from "__generated__/IssueQuery.graphql";
 
@@ -20,10 +21,10 @@ export default function Issue(props: { queryRef: PreloadedQuery<IssueQuery> }) {
   );
 
   return (
-    <>
+    <Suspense fallback="Loading (client side)...">
       <h1>{data.repository?.issue?.title}</h1>
       <p>{data.repository?.issue?.bodyText}</p>
       <p>Author: {data.repository?.issue?.author?.login}</p>
-    </>
+    </Suspense>
   );
 }
diff --git a/issue-tracker-next-v13/src/components/Issues.tsx b/issue-tracker-next-v13/src/components/Issues.tsx
@@ -8,7 +8,7 @@ import styles from "styles/Issues.module.css";
 export default function Issues(props: {
   repository: IssuesFragment$key | null;
 }) {
-  const { data, loadNext, isLoadingNext } = usePaginationFragment<
+  const { data, loadNext, isLoadingNext, refetch } = usePaginationFragment<
     IssuesPaginationQuery,
     IssuesFragment$key
   >(
@@ -67,6 +67,15 @@ export default function Issues(props: {
         <button onClick={loadMore} disabled={isLoadingNext}>
           {isLoadingNext ? "Loading..." : "Load More"}
         </button>
+        <button
+          onClick={() =>
+            refetch({
+              count: 20,
+            })
+          }
+        >
+          Refetch with 20 items
+        </button>
       </li>
     </ul>
   );

diff --git a/issue-tracker-next-v13/src/components/MainView.tsx b/issue-tracker-next-v13/src/components/MainView.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { graphql, PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { MainViewQuery } from "__generated__/MainViewQuery.graphql";
 import Issues from "./Issues";
@@ -21,11 +22,11 @@ export default function MainView(props: {
   );
 
   return (
-    <div>
+    <Suspense fallback="Loading (client side)...">
       <h1>
         {data.repository?.owner.login}/{data.repository?.name}
       </h1>
       <Issues repository={data.repository} />
-    </div>
+    </Suspense>
   );
 }
diff --git a/issue-tracker-next-v13/styles/MainView.module.css b/issue-tracker-next-v13/styles/MainView.module.css
diff --git a/...-tracker-next-v13/styles/Issue.module.css → ...tracker-next-v13/styles/layout.module.css b/...-tracker-next-v13/styles/Issue.module.css → ...tracker-next-v13/styles/layout.module.css
@@ -1,4 +1,4 @@
-.issue {
+.layout {
   padding: 4rem 0 0;
   margin: 0 auto;
   max-width: 800px;