From 99c61e108ecc761896906b416b5cd3e7d4254a5c Mon Sep 17 00:00:00 2001
From: KATT <alexander@n1s.se>
Date: Sun, 6 Nov 2022 23:30:24 +0100
Subject: [PATCH 1/2] test now hyd

---
 app/page.tsx            | 22 ++--------------------
 client/trpcClient.tsx   | 16 +++++++++++++++-
 components/PostList.tsx |  1 +
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index cfeec8b..10e4335 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,7 @@
-import { Suspense, use } from "react";
+import { Suspense } from "react";
 import { CreatePostForm } from "~/client/CreatePostForm";
-import { HydrateClient } from "~/client/HydrateClient";
 import { PostList } from "~/components/PostList";
 import { PostListItem } from "~/components/PostListItem";
-import { rsc } from "../server-rsc/trpc";
 
 function PostListSkeleton() {
   return (
@@ -15,22 +13,6 @@ function PostListSkeleton() {
   );
 }
 
-function PostListRSC() {
-  use(
-    Promise.all([
-      rsc.post.list.fetchInfinite({}),
-      // Display loading for at least 300ms
-      new Promise((resolve) => setTimeout(resolve, 3_00)),
-    ]),
-  );
-
-  return (
-    <HydrateClient state={use(rsc.dehydrate())}>
-      <PostList />
-    </HydrateClient>
-  );
-}
-
 export default async function Page() {
   return (
     <div className='space-y-6 p-4'>
@@ -62,7 +44,7 @@ export default async function Page() {
 
         <div className='overflow-hidden bg-white shadow rounded-md'>
           <Suspense fallback={<PostListSkeleton />}>
-            <PostListRSC />
+            <PostList />
           </Suspense>
         </div>
       </section>
diff --git a/client/trpcClient.tsx b/client/trpcClient.tsx
index 2981351..83e69cf 100644
--- a/client/trpcClient.tsx
+++ b/client/trpcClient.tsx
@@ -17,6 +17,20 @@ export const trpc = createTRPCReact<AppRouter>({
   },
 });
 
+function getBaseUrl() {
+  if (typeof window !== "undefined")
+    // browser should use relative path
+    return "";
+  if (process.env.VERCEL_URL)
+    // reference for vercel.com
+    return `https://${process.env.VERCEL_URL}`;
+  if (process.env.RENDER_INTERNAL_HOSTNAME)
+    // reference for render.com
+    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
+  // assume localhost
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+}
+
 export function ClientProvider(props: { children: React.ReactNode }) {
   const [queryClient] = useState(() => new QueryClient());
   const [trpcClient] = useState(() =>
@@ -26,7 +40,7 @@ export function ClientProvider(props: { children: React.ReactNode }) {
           enabled: () => true,
         }),
         httpBatchLink({
-          url: "/api/trpc",
+          url: `${getBaseUrl()}/api/trpc`,
         }),
       ],
       transformer: superjson,
diff --git a/components/PostList.tsx b/components/PostList.tsx
index fcbe416..8cdd121 100644
--- a/components/PostList.tsx
+++ b/components/PostList.tsx
@@ -30,6 +30,7 @@ export function PostList() {
       },
       refetchOnMount: false,
       staleTime: Infinity,
+      suspense: true,
     },
   );
 

From 641cbeb788c3bbe12dae972ad4f6fa546d07a3a3 Mon Sep 17 00:00:00 2001
From: KATT <alexander@n1s.se>
Date: Sun, 6 Nov 2022 23:32:37 +0100
Subject: [PATCH 2/2] test

---
 app/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 10e4335..b54b15c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -43,9 +43,9 @@ export default async function Page() {
         <h2>All posts</h2>
 
         <div className='overflow-hidden bg-white shadow rounded-md'>
-          <Suspense fallback={<PostListSkeleton />}>
-            <PostList />
-          </Suspense>
+          {/* <Suspense fallback={<PostListSkeleton />}> */}
+          <PostList />
+          {/* </Suspense> */}
         </div>
       </section>
     </div>