prisma-korea · DevYuns · Feb 8, 2023 · Feb 7, 2023 · Feb 8, 2023
diff --git a/app/Providers.tsx b/app/Providers.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import {RelayEnvironmentProvider} from 'react-relay';
+import {getCurrentEnvironment} from '~/lib/relay';
+
+export default function Providers({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement {
+  const environment = getCurrentEnvironment();
+
+  return (
+    <RelayEnvironmentProvider environment={environment}>
+      {children}
+    </RelayEnvironmentProvider>
+  );
+}
diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import {useEffect} from 'react';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}): React.ReactElement {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <html>
+      <head></head>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import '../styles/output.css';
 
+import Providers from './providers';
 import type {ReactElement} from 'react';
 
 export default function RootLayout({
@@ -11,7 +12,9 @@ export default function RootLayout({
     <html lang="en">
       <head />
       <body>
-        <div className="bg-basic">{children}</div>
+        <Providers>
+          <div className="w-screen h-screen bg-paper">{children}</div>
+        </Providers>
       </body>
     </html>
   );

diff --git a/app/loading.tsx b/app/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading(): React.ReactElement {
+  return (
+    <div className="h-full flex justify-center items-center">
+      Loading on server side...
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,13 +1,32 @@
+import {H1, H4} from '~/components/Typography';
+
 import {Inter} from '@next/font/google';
+import type {PostsQuery} from '~/lib/__generated__/PostsQuery.graphql';
+import PostsQueryNode from '~/lib/__generated__/PostsQuery.graphql';
 import type {ReactElement} from 'react';
+import TempClientQueryComponent from '~/components/TempClientComponent';
 import clsx from 'clsx';
+import loadSerializableQuery from '~/lib/relay/loadSerializableQuery';
 
 const inter = Inter({subsets: ['latin']});
 
-export default function Home(): ReactElement {
+export default async function Page(): Promise<ReactElement> {
+  const preloadedQuery = await loadSerializableQuery<
+    typeof PostsQueryNode,
+    PostsQuery
+  >(PostsQueryNode.params, {});
+
   return (
-    <main className="role-basic">
-      <h1 className={clsx('text-basic', inter.className)}>This is main</h1>
-    </main>
+    <div className="h-full flex flex-col justify-center items-center">
+      <H1 className={clsx('text-h1', 'mb-8', inter.className)}>
+        Prisma nextjs graphql
+      </H1>
+      <div>
+        <H4 className={clsx('text-h2', 'mb-4', inter.className)}>Post list</H4>
+        <TempClientQueryComponent preloadedQuery={preloadedQuery} />
+      </div>
+    </div>
   );
 }
+/* https://beta.nextjs.org/docs/api-reference/segment-config#revalidate */
+export const revalidate = 0;
diff --git a/app/posts/[id]/PostClientComponent.tsx b/app/posts/[id]/PostClientComponent.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import Post from '~/components/Post';
+import type {PostQuery} from '~/lib/__generated__/PostQuery.graphql';
+import type PostQueryNode from '~/lib/__generated__/PostQuery.graphql';
+import type {ReactElement} from 'react';
+import type {SerializablePreloadedQuery} from '~/lib/relay/loadSerializableQuery';
+import {getCurrentEnvironment} from '~/lib/relay';
+import {useRouter} from 'next/navigation';
+import useSerializablePreloadedQuery from '~/lib/relay/useSerializableQuery';
+
+export default function PostClientComponent(props: {
+  preloadedQuery: SerializablePreloadedQuery<typeof PostQueryNode, PostQuery>;
+}): ReactElement {
+  const router = useRouter();
+  const environment = getCurrentEnvironment();
+  const queryRef = useSerializablePreloadedQuery(
+    environment,
+    props.preloadedQuery,
+  );
+
+  return (
+    <div className="h-full flex flex-col justify-center items-center">
+      <Post queryRef={queryRef} />
+      <button
+        type="button"
+        className="mt-8 border-[1px] border-solid p-2 rounded"
+        onClick={() => router.push('/')}
+      >
+        Go back
+      </button>
+    </div>
+  );
+}
diff --git a/app/posts/[id]/page.tsx b/app/posts/[id]/page.tsx
@@ -0,0 +1,20 @@
+import PostClientComponent from './PostClientComponent';
+import type {PostQuery} from '~/lib/__generated__/PostQuery.graphql';
+import PostQueryNode from '~/lib/__generated__/PostQuery.graphql';
+import type {ReactElement} from 'react';
+import loadSerializableQuery from '~/lib/relay/loadSerializableQuery';
+
+export default async function PostPage({
+  params: {id},
+}: {
+  params: {id: string};
+}): Promise<ReactElement> {
+  const preloadedQuery = await loadSerializableQuery<
+    typeof PostQueryNode,
+    PostQuery
+  >(PostQueryNode.params, {id});
+
+  return <PostClientComponent preloadedQuery={preloadedQuery} />;
+}
+
+export const revalidate = 0;
diff --git a/codegen.yml b/codegen.yml
@@ -0,0 +1,15 @@
+overwrite: true
+schema:
+  - './server/generated/schema.graphql'
+generates:
+  lib/types/graphql.tsx:
+    # documents: 'src/__generated__/**/*.graphql'
+    config:
+      skipDocumentsValidation: true
+      flattenGeneratedTypes: true
+      gqlImport: graphql-tag
+      enumsAsTypes: true
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'
diff --git a/components/Post.tsx b/components/Post.tsx
@@ -0,0 +1,21 @@
+import type {PostQuery} from '~/lib/__generated__/PostQuery.graphql';
+import type {PreloadedQuery} from 'react-relay';
+import type {ReactElement} from 'react';
+import {Suspense} from 'react';
+import {postQuery} from '~/lib/relay/queries/Post';
+import {usePreloadedQuery} from 'react-relay';
+
+export default function Post(props: {
+  queryRef: PreloadedQuery<PostQuery>;
+}): ReactElement {
+  const data = usePreloadedQuery(postQuery, props.queryRef);
+
+  return (
+    <Suspense fallback="Loading (client side)...">
+      <div className="flex flex-col justify-center items-center">
+        <h1>Title : {data.post?.title}</h1>
+        <p>Content: {data.post?.content}</p>
+      </div>
+    </Suspense>
+  );
+}
diff --git a/components/TempClientComponent.tsx b/components/TempClientComponent.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import Link from 'next/link';
+import type {PostsQuery} from '~/lib/__generated__/PostsQuery.graphql';
+import type PostsQueryNode from '~/lib/__generated__/PostsQuery.graphql';
+import type {PreloadedQuery} from 'react-relay';
+import type {ReactElement} from 'react';
+import type {SerializablePreloadedQuery} from '~/lib/relay/loadSerializableQuery';
+import {getCurrentEnvironment} from '~/lib/relay';
+import {postsQuery} from '~/lib/relay/queries/Post';
+import {usePreloadedQuery} from 'react-relay';
+import useSerializablePreloadedQuery from '~/lib/relay/useSerializableQuery';
+
+type Props = {
+  queryRef: PreloadedQuery<PostsQuery>;
+};
+
+function Component({queryRef}: Props): ReactElement {
+  const data = usePreloadedQuery(postsQuery, queryRef);
+
+  return (
+    <div className="flex flex-col">
+      {data.posts ? (
+        data.posts.map((elm) => (
+          <Link
+            href={`/posts/${elm?.id}`}
+            key={elm?.id}
+            className="mb-4 hover:underline cursor-pointer"
+          >
+            {elm?.title || 'title'}
+          </Link>
+        ))
+      ) : (
+        <p>Try to seed mock data with yarn seed</p>
+      )}
+    </div>
+  );
+}
+
+export default function TempClientQueryComponent({
+  preloadedQuery,
+}: {
+  preloadedQuery: SerializablePreloadedQuery<typeof PostsQueryNode, PostsQuery>;
+}): ReactElement {
+  const environment = getCurrentEnvironment();
+  const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery);
+
+  return <Component queryRef={queryRef} />;
+}