From 34caed830bf354f2fa5c5e99008c503cba42bffe Mon Sep 17 00:00:00 2001
From: taneba <taneba.vla@gmail.com>
Date: Wed, 6 Apr 2022 04:02:18 +0900
Subject: [PATCH 1/6] fixed auth flow after user signed in

---
 apps/frontend/src/contexts/currentUser.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/contexts/currentUser.tsx b/apps/frontend/src/contexts/currentUser.tsx
index 9fd8415e..b25baf5a 100644
--- a/apps/frontend/src/contexts/currentUser.tsx
+++ b/apps/frontend/src/contexts/currentUser.tsx
@@ -8,7 +8,7 @@ import { gql } from '~/generated'
 
 type CurrentUserModel = Omit<
   ReturnType<typeof useCurrentUserInternal>,
-  'auth0Loading'
+  'auth0Loading' | 'getProfileFetching'
 >
 
 const CurrentUserContext = createContext<CurrentUserModel>(undefined as any)
@@ -53,6 +53,7 @@ function useCurrentUserInternal() {
 
   return {
     currentUser: res.data?.getProfile,
+    getProfileFetching: res.fetching,
     auth0Loading: isLoading,
     isOnboarded,
     isAuthenticated,
@@ -68,9 +69,9 @@ export function CurrentUserProvider({
   const value = useCurrentUserInternal()
   const router = useRouter()
 
-  const { auth0Loading, ...rest } = value
+  const { auth0Loading, getProfileFetching, ...rest } = value
 
-  if (auth0Loading) {
+  if (auth0Loading || getProfileFetching) {
     return <Spinner global />
   }
 

From c5f63943f90b374d00e2e0d6de41ad78fc25a2ed Mon Sep 17 00:00:00 2001
From: taneba <taneba.vla@gmail.com>
Date: Wed, 6 Apr 2022 04:02:41 +0900
Subject: [PATCH 2/6] React18 and Suspense

---
 apps/frontend/package.json                    |   6 +-
 .../components/util/UrqlClientProvider.tsx    |   9 +-
 apps/frontend/src/pages/signin/index.page.tsx |   4 -
 apps/frontend/src/pages/users/UserList.tsx    |  34 +++
 apps/frontend/src/pages/users/index.page.tsx  |  71 ++-----
 yarn.lock                                     | 199 +++++++++---------
 6 files changed, 160 insertions(+), 163 deletions(-)
 create mode 100644 apps/frontend/src/pages/users/UserList.tsx

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index d89d640f..e57518de 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -24,9 +24,9 @@
     "@radix-ui/react-portal": "0.1.4",
     "graphql": "15.8.0",
     "graphql-anywhere": "4.2.7",
-    "next": "12.0.10",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next": "12.1.4",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
     "react-hook-form": "7.22.5",
     "spinners-react": "1.0.6",
     "styled-components": "5.3.3",
diff --git a/apps/frontend/src/components/util/UrqlClientProvider.tsx b/apps/frontend/src/components/util/UrqlClientProvider.tsx
index 47a1551f..b0d2ac4b 100644
--- a/apps/frontend/src/components/util/UrqlClientProvider.tsx
+++ b/apps/frontend/src/components/util/UrqlClientProvider.tsx
@@ -11,7 +11,12 @@ import {
   fetchExchange,
   Provider as UrqlProvider,
 } from 'urql'
-import { pipe, tap } from 'wonka'
+import { delay, pipe, tap } from 'wonka'
+
+const fakeSlowNetworkExchange: Exchange =
+  ({ forward }) =>
+  (ops$) =>
+    pipe(ops$, delay(1000), forward)
 
 const authCheckExchange: Exchange =
   ({ forward }) =>
@@ -57,6 +62,7 @@ const exchanges = [
   cacheExchange,
   ...(process.env.NODE_ENV !== 'test' ? [debugExchange] : []),
   authCheckExchange,
+  fakeSlowNetworkExchange,
   fetchExchange,
 ]
 
@@ -89,6 +95,7 @@ export function UrqlClientProvider({
               authorization: token ? `Bearer ${token}` : '',
             },
           }),
+          suspense: true,
         })
       )
     }
diff --git a/apps/frontend/src/pages/signin/index.page.tsx b/apps/frontend/src/pages/signin/index.page.tsx
index 3ff898d8..3aa7bca5 100644
--- a/apps/frontend/src/pages/signin/index.page.tsx
+++ b/apps/frontend/src/pages/signin/index.page.tsx
@@ -1,5 +1,4 @@
 import { useAuth0 } from '@auth0/auth0-react'
-import Link from 'next/link'
 
 import { Button } from '~/components'
 import { Role } from '~/generated/graphql'
@@ -20,9 +19,6 @@ function SignIn() {
       </Button>
       <div>
         if you don't have an account? then
-        {/* <Link href="/signup">
-          <span tw="text-blue-500 cursor-pointer">sign up</span>
-        </Link> */}
         <Button secondary tw="ml-1" onClick={loginAsUser}>
           Sign up
         </Button>
diff --git a/apps/frontend/src/pages/users/UserList.tsx b/apps/frontend/src/pages/users/UserList.tsx
new file mode 100644
index 00000000..302e97a4
--- /dev/null
+++ b/apps/frontend/src/pages/users/UserList.tsx
@@ -0,0 +1,34 @@
+import { useQuery } from 'urql'
+
+import { Avatar, Flex } from '~/components'
+import { gql } from '~/generated/'
+
+const GetAllUsers = gql(/* GraphQL */ `
+  query GetAllUsers {
+    allUsers {
+      id
+      name
+    }
+  }
+`)
+
+export function UserList() {
+  const [res] = useQuery({ query: GetAllUsers, requestPolicy: 'network-only' })
+
+  return (
+    <div tw="mt-4">
+      {res.data && res.data.allUsers.length < 1 && <p>No Users</p>}
+      {res.data &&
+        res.data.allUsers.map((user) => (
+          <Flex
+            key={user.id}
+            // tw="flex flex-row items-center justify-between w-full py-1 px-4 my-1 rounded border bg-gray-100 text-gray-600"
+            tw="p-2 items-center border-b-2 border-gray-100"
+          >
+            <Avatar size="s" name={user.name || 'NN'} />
+            <p tw="ml-2">{user.name}</p>
+          </Flex>
+        ))}
+    </div>
+  )
+}
diff --git a/apps/frontend/src/pages/users/index.page.tsx b/apps/frontend/src/pages/users/index.page.tsx
index 07828a8d..0f9bb386 100644
--- a/apps/frontend/src/pages/users/index.page.tsx
+++ b/apps/frontend/src/pages/users/index.page.tsx
@@ -1,67 +1,24 @@
-import tw from 'twin.macro'
-import { useQuery } from 'urql'
+import { Suspense, useState } from 'react'
 
-import { Avatar, Flex } from '~/components'
-import { DevNote } from '~/components/general/DevNote'
-import { gql } from '~/generated/'
+import { Spinner, TextField } from '~/components'
 
-const GetAllUsers = gql(/* GraphQL */ `
-  query GetAllUsers {
-    allUsers {
-      id
-      name
-    }
-  }
-`)
+import { UserList } from './UserList'
 
 function Users() {
-  const [res] = useQuery({ query: GetAllUsers })
+  const [value, setValue] = useState('')
+
   return (
     <div tw="mt-4">
+      <TextField
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        name={'foo'}
+      />
+      <div>{value}</div>
       <h1 tw="text-black font-bold text-3xl">All Users</h1>
-
-      {/* <DevNote.Root tw="self-center mx-auto bg-cyan-50 p-3 border-cyan-100 border-2 rounded-md">
-        <DevNote.P tw="text-xs whitespace-pre-wrap leading-relaxed">
-          Here we don't see any email of each user, which is a private field and
-          shouldn't be visible to other people. This is because GetUsers query
-          doesn't include email field.
-        </DevNote.P>
-        <DevNote.Pre>
-          {`query GetAllUsers {
-  allUsers {
-    id
-    name
-  }
-}
-`}
-        </DevNote.Pre>
-        <DevNote.P>
-          {`But if graphql api is not accurately implemented, email possiblly could be seen if hacker query manually.
-So if it's wrong, curl request below unhappily works,
-`}
-        </DevNote.P>
-        <DevNote.Pre>{`curl -X POST \\
--H "Content-Type: application/json" \\
--H "Authorization: Bearer <Token> \\
--d '{"query":"query GetAllUsers {allUsers {id name email __typename }}","operationName":"GetAllUsers","variables":{}}' \\
-http://localhost:5000/graphql
-
-{"data":{"allUsers":[{"id":"1","name":"John","email":"test@gmail.com","__typename":"User"},{"id":"2","name":"Paul","email":"test2@gmail.com","__typename":"User"}]}}
-`}</DevNote.Pre>
-      </DevNote.Root> */}
-      <div tw="mt-4">
-        {res.data && res.data.allUsers.length < 1 && <p>No Users</p>}
-        {res.data?.allUsers.map((user) => (
-          <Flex
-            key={user.id}
-            // tw="flex flex-row items-center justify-between w-full py-1 px-4 my-1 rounded border bg-gray-100 text-gray-600"
-            tw="p-2 items-center border-b-2 border-gray-100"
-          >
-            <Avatar size="s" name={user.name || 'NN'} />
-            <p tw="ml-2">{user.name}</p>
-          </Flex>
-        ))}
-      </div>
+      <Suspense fallback={<Spinner />}>
+        <UserList />
+      </Suspense>
     </div>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 03c6f2ab..bf260bc1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2017,10 +2017,10 @@
   dependencies:
     webpack-bundle-analyzer "4.3.0"
 
-"@next/env@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.0.10.tgz#561640fd62279218ccd2798ae907bae8d94a7730"
-  integrity sha512-mQVj0K6wQ5WEk/sL9SZ+mJXJUaG7el8CpZ6io1uFe9GgNTSC7EgUyNGqM6IQovIFc5ukF4O/hqsdh3S/DCgT2g==
+"@next/env@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.4.tgz#5af629b43075281ecd7f87938802b7cf5b67e94b"
+  integrity sha512-7gQwotJDKnfMxxXd8xJ2vsX5AzyDxO3zou0+QOXX8/unypA6icw5+wf6A62yKZ6qQ4UZHHxS68pb6UV+wNneXg==
 
 "@next/eslint-plugin-next@12.1.0":
   version "12.1.0"
@@ -2029,60 +2029,65 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-android-arm64@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.0.10.tgz#fd9d716433cc9d361021b0052f8b002bcaff948d"
-  integrity sha512-xYwXGkNhzZZsM5MD7KRwF5ZNiC8OLPtVMUiagpPnwENg8Hb0GSQo/NbYWXM8YrawEwp9LaZ7OXiuRKPh2JyBdA==
-
-"@next/swc-darwin-arm64@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.10.tgz#34b2d0dc62eb89efb9176af111e3820a11fdb3f0"
-  integrity sha512-f2zngulkpIJKWHckhRi7X8GZ+J/tNgFF7lYIh7Qx15JH0OTBsjkqxORlkzy+VZyHJ5sWTCaI6HYYd3ow6qkEEg==
-
-"@next/swc-darwin-x64@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.10.tgz#a4306795159293c7d4d58a2c88ce1710ff0a8baa"
-  integrity sha512-Qykcu/gVC5oTvOQoRBhyuS5GYm5SbcgrFTsaLFkGBmEkg9eMQRiaCswk4IafpDXVzITkVFurzSM28q3tLW2qUw==
-
-"@next/swc-linux-arm-gnueabihf@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.10.tgz#1ad15af3d5fca2fef57894d61e16f73aee61ec2e"
-  integrity sha512-EhqrTFsIXAXN9B/fiiW/QKUK/lSLCXRsLalkUp58KDfMqVLLlj1ORbESAcswiNQOChLuHQSldGEEtOBPQZcd9A==
-
-"@next/swc-linux-arm64-gnu@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.10.tgz#a84a92d0e1a179c4346c9ed8f22e26f708101ad6"
-  integrity sha512-kqGtC72g3+JYXZbY2ca6digXR5U6AQ6Dzv4eAxYluMePLHjI/Xye1mf9dwVsgmeXfrD/IRDp5K/3A6UNvBm4oQ==
-
-"@next/swc-linux-arm64-musl@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.10.tgz#973ec96c77f845bd0a6eecbf1892caa1ee4defaf"
-  integrity sha512-bG9zTSNwnSgc1Un/7oz1ZVN4UeXsTWrsQhAGWU78lLLCn4Zj9HQoUCRCGLt0OVs2DBZ+WC8CzzFliQ1SKipVbg==
-
-"@next/swc-linux-x64-gnu@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.10.tgz#efcc7f8252ea8225834760eaf09350f1bead73f7"
-  integrity sha512-c79PcfWtyThiYRa1+3KVfDq0zXaI8o1d6dQWNVqDrtLz5HKM/rbjLdvoNuxDwUeZhxI/d9CtyH6GbuKPw5l/5A==
-
-"@next/swc-linux-x64-musl@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.10.tgz#c2a73d939dfd310acc1892a0a132762500dd5757"
-  integrity sha512-g/scgn+21/MLfizOCZOZt+MxNj2/8Tdlwjvy+QZcSUPZRUI2Y5o3HwBvI1f/bSci+NGRU+bUAO0NFtRJ9MzH5w==
-
-"@next/swc-win32-arm64-msvc@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.10.tgz#2316af5f612cde1691abdf2571ff40ec32ea3429"
-  integrity sha512-gl6B/ravwMeY5Nv4Il2/ARYJQ6u+KPRwGMjS1ZrNudIKlNn4YBeXh5A4cIVm+dHaff6/O/lGOa5/SUYDMZpkww==
-
-"@next/swc-win32-ia32-msvc@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.10.tgz#98a4f74d164871cfaccb0df6efddf2b7bcbaa54b"
-  integrity sha512-7RVpZ3tSThC6j+iZB0CUYmFiA3kXmN+pE7QcfyAxFaflKlaZoWNMKHIEZDuxSJc6YmQ6kyxsjqxVay2F5+/YCg==
-
-"@next/swc-win32-x64-msvc@12.0.10":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.10.tgz#5c0ba98b695c4be44d8793aff42971a0dac65c2d"
-  integrity sha512-oUIWRKd24jFLRWUYO1CZmML5+32BcpVfqhimGaaZIXcOkfQW+iqiAzdqsv688zaGtyKGeB9ZtiK3NDf+Q0v+Vw==
+"@next/swc-android-arm-eabi@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.4.tgz#c3dae178b7c15ad627d2e9b8dfb38caecb5c4ac7"
+  integrity sha512-FJg/6a3s2YrUaqZ+/DJZzeZqfxbbWrynQMT1C5wlIEq9aDLXCFpPM/PiOyJh0ahxc0XPmi6uo38Poq+GJTuKWw==
+
+"@next/swc-android-arm64@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.4.tgz#f320d60639e19ecffa1f9034829f2d95502a9a51"
+  integrity sha512-LXraazvQQFBgxIg3Htny6G5V5he9EK7oS4jWtMdTGIikmD/OGByOv8ZjLuVLZLtVm3UIvaAiGtlQSLecxJoJDw==
+
+"@next/swc-darwin-arm64@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.4.tgz#fd578278312613eddcf3aee26910100509941b63"
+  integrity sha512-SSST/dBymecllZxcqTCcSTCu5o1NKk9I+xcvhn/O9nH6GWjgvGgGkNqLbCarCa0jJ1ukvlBA138FagyrmZ/4rQ==
+
+"@next/swc-darwin-x64@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.4.tgz#ace5f80d8c8348efe194f6d7074c6213c52b3944"
+  integrity sha512-p1lwdX0TVjaoDXQVuAkjtxVBbCL/urgxiMCBwuPDO7TikpXtSRivi+mIzBj5q7ypgICFmIAOW3TyupXeoPRAnA==
+
+"@next/swc-linux-arm-gnueabihf@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.4.tgz#2bf2c83863635f19c71c226a2df936e001cce29c"
+  integrity sha512-67PZlgkCn3TDxacdVft0xqDCL7Io1/C4xbAs0+oSQ0xzp6OzN2RNpuKjHJrJgKd0DsE1XZ9sCP27Qv0591yfyg==
+
+"@next/swc-linux-arm64-gnu@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.4.tgz#d577190f641c9b4b463719dd6b8953b6ba9be8d9"
+  integrity sha512-OnOWixhhw7aU22TQdQLYrgpgFq0oA1wGgnjAiHJ+St7MLj82KTDyM9UcymAMbGYy6nG/TFOOHdTmRMtCRNOw0g==
+
+"@next/swc-linux-arm64-musl@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.4.tgz#e70ffe70393d8f9242deecdb282ce5a8fd588b14"
+  integrity sha512-UoRMzPZnsAavdWtVylYxH8DNC7Uy0i6RrvNwT4PyQVdfANBn2omsUkcH5lgS2O7oaz0nAYLk1vqyZDO7+tJotA==
+
+"@next/swc-linux-x64-gnu@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.4.tgz#91498a130387fb1961902f2bee55863f8e910cff"
+  integrity sha512-nM+MA/frxlTLUKLJKorctdI20/ugfHRjVEEkcLp/58LGG7slNaP1E5d5dRA1yX6ISjPcQAkywas5VlGCg+uTvA==
+
+"@next/swc-linux-x64-musl@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.4.tgz#78057b03c148c121553d41521ad38f6c732762ff"
+  integrity sha512-GoRHxkuW4u4yKw734B9SzxJwVdyEJosaZ62P7ifOwcujTxhgBt3y76V2nNUrsSuopcKI2ZTDjaa+2wd5zyeXbA==
+
+"@next/swc-win32-arm64-msvc@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.4.tgz#05bbaabacac23b8edf6caa99eb86b17550a09051"
+  integrity sha512-6TQkQze0ievXwHJcVUrIULwCYVe3ccX6T0JgZ1SiMeXpHxISN7VJF/O8uSCw1JvXZYZ6ud0CJ7nfC5HXivgfPg==
+
+"@next/swc-win32-ia32-msvc@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.4.tgz#8fd2fb48f04a2802e51fc320878bf6b411c1c866"
+  integrity sha512-CsbX/IXuZ5VSmWCpSetG2HD6VO5FTsO39WNp2IR2Ut/uom9XtLDJAZqjQEnbUTLGHuwDKFjrIO3LkhtROXLE/g==
+
+"@next/swc-win32-x64-msvc@12.1.4":
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.4.tgz#a72ed44c9b1f850986a30fe36c59e01f8a79b5f3"
+  integrity sha512-JtYuWzKXKLDMgE/xTcFtCm1MiCIRaAc5XYZfYX3n/ZWSI1SJS/GMm+Su0SAHJgRFavJh6U/p998YwO/iGTIgqQ==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -7227,28 +7232,28 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-next@12.0.10:
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.0.10.tgz#fcc4584177418bd777ce157f3165b7ba5e7708f7"
-  integrity sha512-1y3PpGzpb/EZzz1jgne+JfZXKAVJUjYXwxzrADf/LWN+8yi9o79vMLXpW3mevvCHkEF2sBnIdjzNn16TJrINUw==
+next@12.1.4:
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.1.4.tgz#597a9bdec7aec778b442c4f6d41afd2c64a54b23"
+  integrity sha512-DA4g97BM4Z0nKtDvCTm58RxdvoQyYzeg0AeVbh0N4Y/D8ELrNu47lQeEgRGF8hV4eQ+Sal90zxrJQQG/mPQ8CQ==
   dependencies:
-    "@next/env" "12.0.10"
+    "@next/env" "12.1.4"
     caniuse-lite "^1.0.30001283"
     postcss "8.4.5"
-    styled-jsx "5.0.0"
-    use-subscription "1.5.1"
+    styled-jsx "5.0.1"
   optionalDependencies:
-    "@next/swc-android-arm64" "12.0.10"
-    "@next/swc-darwin-arm64" "12.0.10"
-    "@next/swc-darwin-x64" "12.0.10"
-    "@next/swc-linux-arm-gnueabihf" "12.0.10"
-    "@next/swc-linux-arm64-gnu" "12.0.10"
-    "@next/swc-linux-arm64-musl" "12.0.10"
-    "@next/swc-linux-x64-gnu" "12.0.10"
-    "@next/swc-linux-x64-musl" "12.0.10"
-    "@next/swc-win32-arm64-msvc" "12.0.10"
-    "@next/swc-win32-ia32-msvc" "12.0.10"
-    "@next/swc-win32-x64-msvc" "12.0.10"
+    "@next/swc-android-arm-eabi" "12.1.4"
+    "@next/swc-android-arm64" "12.1.4"
+    "@next/swc-darwin-arm64" "12.1.4"
+    "@next/swc-darwin-x64" "12.1.4"
+    "@next/swc-linux-arm-gnueabihf" "12.1.4"
+    "@next/swc-linux-arm64-gnu" "12.1.4"
+    "@next/swc-linux-arm64-musl" "12.1.4"
+    "@next/swc-linux-x64-gnu" "12.1.4"
+    "@next/swc-linux-x64-musl" "12.1.4"
+    "@next/swc-win32-arm64-msvc" "12.1.4"
+    "@next/swc-win32-ia32-msvc" "12.1.4"
+    "@next/swc-win32-x64-msvc" "12.1.4"
 
 no-case@^3.0.4:
   version "3.0.4"
@@ -7964,14 +7969,13 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
+  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.21.0"
 
 react-hook-form@7.22.5:
   version "7.22.5"
@@ -8034,13 +8038,12 @@ react-test-renderer@17.0.2:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
-react@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
+  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 readable-stream@^2.0.0, readable-stream@~2.3.6:
   version "2.3.7"
@@ -8405,6 +8408,13 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 scuid@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/scuid/-/scuid-1.1.0.tgz#d3f9f920956e737a60f72d0e4ad280bf324d5dab"
@@ -8797,10 +8807,10 @@ styled-components@5.3.3:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
-styled-jsx@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0.tgz#816b4b92e07b1786c6b7111821750e0ba4d26e77"
-  integrity sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==
+styled-jsx@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.1.tgz#78fecbbad2bf95ce6cd981a08918ce4696f5fc80"
+  integrity sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==
 
 subscriptions-transport-ws@^0.11.0:
   version "0.11.0"
@@ -9512,13 +9522,6 @@ use-sidecar@^1.0.1:
     detect-node-es "^1.1.0"
     tslib "^1.9.3"
 
-use-subscription@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
-  integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==
-  dependencies:
-    object-assign "^4.1.1"
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

From eb73201b961cc42d93c206e2959c14016b355815 Mon Sep 17 00:00:00 2001
From: taneba <taneba.vla@gmail.com>
Date: Wed, 6 Apr 2022 07:50:29 +0900
Subject: [PATCH 3/6] Suspense

---
 .../src/pages/all-todos/AllTodoList.tsx       | 35 ++++++++++++++++++
 .../src/pages/all-todos/index.page.tsx        | 34 +++--------------
 .../src/pages/todos/CreateTodoModal.tsx       | 20 ++++++----
 apps/frontend/src/pages/todos/TodoList.tsx    | 37 +++++++++++++++++++
 apps/frontend/src/pages/todos/index.page.tsx  | 30 +++------------
 apps/frontend/src/pages/users/UserList.tsx    |  8 +---
 apps/frontend/src/pages/users/index.page.tsx  | 12 +-----
 7 files changed, 98 insertions(+), 78 deletions(-)
 create mode 100644 apps/frontend/src/pages/all-todos/AllTodoList.tsx
 create mode 100644 apps/frontend/src/pages/todos/TodoList.tsx

diff --git a/apps/frontend/src/pages/all-todos/AllTodoList.tsx b/apps/frontend/src/pages/all-todos/AllTodoList.tsx
new file mode 100644
index 00000000..84cebef5
--- /dev/null
+++ b/apps/frontend/src/pages/all-todos/AllTodoList.tsx
@@ -0,0 +1,35 @@
+import { useQuery } from 'urql'
+
+import { gql } from '~/generated'
+
+const GetAllTodos = gql(/* GraphQL */ `
+  query GetAllTodos {
+    allTodos {
+      id
+      createdAt
+      updatedAt
+      title
+      content
+      completed
+      author {
+        name
+      }
+    }
+  }
+`)
+
+export function AllTodoList() {
+  const [res] = useQuery({ query: GetAllTodos })
+
+  return (
+    <div>
+      {res.data && res.data.allTodos.length < 1 && <p>No Items</p>}
+      {res.data?.allTodos.map((todo) => (
+        <div key={todo.id}>
+          <div>{todo.title}</div>
+          <p>{todo.author?.name}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/frontend/src/pages/all-todos/index.page.tsx b/apps/frontend/src/pages/all-todos/index.page.tsx
index e951a081..bc54af46 100644
--- a/apps/frontend/src/pages/all-todos/index.page.tsx
+++ b/apps/frontend/src/pages/all-todos/index.page.tsx
@@ -1,28 +1,11 @@
-import { useQuery } from 'urql'
+import { Suspense } from 'react'
 
 import { Spinner } from '~/components'
 import { DevNote } from '~/components/general/DevNote'
-import { gql } from '~/generated'
 
-const GetAllTodos = gql(/* GraphQL */ `
-  query GetAllTodos {
-    allTodos {
-      id
-      createdAt
-      updatedAt
-      title
-      content
-      completed
-      author {
-        name
-      }
-    }
-  }
-`)
+import { AllTodoList } from './AllTodoList'
 
 function AllTodos() {
-  const [res] = useQuery({ query: GetAllTodos })
-
   return (
     <div>
       <h1 tw="text-black font-bold text-3xl">Todos</h1>
@@ -36,16 +19,9 @@ function AllTodos() {
         </DevNote.P>
       </DevNote.Root>
 
-      <div>
-        {res.fetching && <Spinner global />}
-        {res.data && res.data.allTodos.length < 1 && <p>No Items</p>}
-        {res.data?.allTodos.map((todo) => (
-          <div key={todo.id}>
-            <div>{todo.title}</div>
-            <p>{todo.author?.name}</p>
-          </div>
-        ))}
-      </div>
+      <Suspense fallback={<Spinner />}>
+        <AllTodoList />
+      </Suspense>
     </div>
   )
 }
diff --git a/apps/frontend/src/pages/todos/CreateTodoModal.tsx b/apps/frontend/src/pages/todos/CreateTodoModal.tsx
index f063ad44..cb3e3068 100644
--- a/apps/frontend/src/pages/todos/CreateTodoModal.tsx
+++ b/apps/frontend/src/pages/todos/CreateTodoModal.tsx
@@ -32,9 +32,15 @@ export function CreateTodoModal() {
     formState: { errors },
   } = useForm<TodoInput>()
   const onSubmit: SubmitHandler<TodoInput> = async (data) => {
-    executeMutation({
-      todo: removeEmptyFields(data),
-    })
+    try {
+      await executeMutation({
+        todo: removeEmptyFields(data),
+      })
+      window.alert('success!')
+    } catch (error) {
+      console.log(error)
+      window.alert('Failed to create todo')
+    }
   }
 
   return (
@@ -50,11 +56,9 @@ export function CreateTodoModal() {
         {errors.title && <span tw="text-red-500">title is required</span>}
         <label htmlFor={register('content').name}>content</label>
         <TextArea {...register('content')} />
-        <DialogClose asChild>
-          <Button primary type="submit">
-            Submit
-          </Button>
-        </DialogClose>
+        <Button primary type="submit">
+          Submit
+        </Button>
       </form>
     </DialogContent>
   )
diff --git a/apps/frontend/src/pages/todos/TodoList.tsx b/apps/frontend/src/pages/todos/TodoList.tsx
new file mode 100644
index 00000000..c6ef2406
--- /dev/null
+++ b/apps/frontend/src/pages/todos/TodoList.tsx
@@ -0,0 +1,37 @@
+import { filter } from 'graphql-anywhere'
+import { useQuery } from 'urql'
+
+import { gql } from '~/generated'
+
+import { TodoItem } from './TodoItem'
+
+const GetTodos = gql(/* GraphQL */ `
+  query GetTodos {
+    todosByCurrentUser {
+      ...TodoItem_Todo
+      id
+      completed
+    }
+  }
+`)
+
+export function TodoList() {
+  const [res] = useQuery({
+    query: GetTodos,
+    requestPolicy: 'network-only', // for the sake of Suspense demo
+  })
+
+  return (
+    <div>
+      {res.data && res.data.todosByCurrentUser.length < 1 && <p>No Items</p>}
+      {res.data?.todosByCurrentUser
+        .filter(({ completed }) => !completed)
+        .map((todo) => (
+          <TodoItem
+            key={todo.id}
+            todo={filter(TodoItem.fragments.todo, todo)}
+          />
+        ))}
+    </div>
+  )
+}
diff --git a/apps/frontend/src/pages/todos/index.page.tsx b/apps/frontend/src/pages/todos/index.page.tsx
index 66cfaace..1f222528 100644
--- a/apps/frontend/src/pages/todos/index.page.tsx
+++ b/apps/frontend/src/pages/todos/index.page.tsx
@@ -1,25 +1,12 @@
-import { filter } from 'graphql-anywhere'
-import { useQuery } from 'urql'
+import { Suspense } from 'react'
 
 import { Button, Dialog, DialogTrigger, Spinner } from '~/components'
 import { DevNote } from '~/components/general/DevNote'
-import { gql } from '~/generated'
 
 import { CreateTodoModal } from './CreateTodoModal'
-import { TodoItem } from './TodoItem'
-
-const GetTodos = gql(/* GraphQL */ `
-  query GetTodos {
-    todosByCurrentUser {
-      ...TodoItem_Todo
-      id
-      completed
-    }
-  }
-`)
+import { TodoList } from './TodoList'
 
 function Todos() {
-  const [res] = useQuery({ query: GetTodos })
   return (
     <div>
       <h1 tw="text-black font-bold text-3xl">Todos</h1>
@@ -38,16 +25,9 @@ function Todos() {
         <CreateTodoModal />
       </Dialog>
       <div tw="mt-4">
-        {res.fetching && <Spinner global />}
-        {res.data && res.data.todosByCurrentUser.length < 1 && <p>No Items</p>}
-        {res.data?.todosByCurrentUser
-          .filter(({ completed }) => !completed)
-          .map((todo) => (
-            <TodoItem
-              key={todo.id}
-              todo={filter(TodoItem.fragments.todo, todo)}
-            />
-          ))}
+        <Suspense fallback={<Spinner />}>
+          <TodoList />
+        </Suspense>
       </div>
     </div>
   )
diff --git a/apps/frontend/src/pages/users/UserList.tsx b/apps/frontend/src/pages/users/UserList.tsx
index 302e97a4..a2867e1b 100644
--- a/apps/frontend/src/pages/users/UserList.tsx
+++ b/apps/frontend/src/pages/users/UserList.tsx
@@ -13,18 +13,14 @@ const GetAllUsers = gql(/* GraphQL */ `
 `)
 
 export function UserList() {
-  const [res] = useQuery({ query: GetAllUsers, requestPolicy: 'network-only' })
+  const [res] = useQuery({ query: GetAllUsers })
 
   return (
     <div tw="mt-4">
       {res.data && res.data.allUsers.length < 1 && <p>No Users</p>}
       {res.data &&
         res.data.allUsers.map((user) => (
-          <Flex
-            key={user.id}
-            // tw="flex flex-row items-center justify-between w-full py-1 px-4 my-1 rounded border bg-gray-100 text-gray-600"
-            tw="p-2 items-center border-b-2 border-gray-100"
-          >
+          <Flex key={user.id} tw="p-2 items-center border-b-2 border-gray-100">
             <Avatar size="s" name={user.name || 'NN'} />
             <p tw="ml-2">{user.name}</p>
           </Flex>
diff --git a/apps/frontend/src/pages/users/index.page.tsx b/apps/frontend/src/pages/users/index.page.tsx
index 0f9bb386..5663396e 100644
--- a/apps/frontend/src/pages/users/index.page.tsx
+++ b/apps/frontend/src/pages/users/index.page.tsx
@@ -1,20 +1,12 @@
-import { Suspense, useState } from 'react'
+import { Suspense } from 'react'
 
-import { Spinner, TextField } from '~/components'
+import { Spinner } from '~/components'
 
 import { UserList } from './UserList'
 
 function Users() {
-  const [value, setValue] = useState('')
-
   return (
     <div tw="mt-4">
-      <TextField
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        name={'foo'}
-      />
-      <div>{value}</div>
       <h1 tw="text-black font-bold text-3xl">All Users</h1>
       <Suspense fallback={<Spinner />}>
         <UserList />

From d6ea098de70939b1ee49ef06db49560fca8b5303 Mon Sep 17 00:00:00 2001
From: taneba <taneba.vla@gmail.com>
Date: Wed, 6 Apr 2022 07:50:42 +0900
Subject: [PATCH 4/6] fixed authorization check

---
 apps/backend/src/envelopPlugins.ts | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/apps/backend/src/envelopPlugins.ts b/apps/backend/src/envelopPlugins.ts
index eb88199d..0d7c3f60 100644
--- a/apps/backend/src/envelopPlugins.ts
+++ b/apps/backend/src/envelopPlugins.ts
@@ -17,8 +17,10 @@ import {
 } from '@envelop/generic-auth'
 import { makeExecutableSchema } from '@graphql-tools/schema'
 import { User } from '@prisma/client'
+import { EnumValueNode } from 'graphql'
 import { TokenExpiredError } from 'jsonwebtoken'
 
+import { Role } from './api/graphql/generated/graphql'
 import resolvers from './api/graphql/resolvers/resolvers'
 import { schema } from './api/graphql/typeDefs'
 import { createContext, GraphqlServerContext, prisma } from './context'
@@ -48,11 +50,31 @@ const resolveUserFn: ResolveUserFn<User, GraphqlServerContext> = async (
   }
 }
 
-const validateUserFn: ValidateUserFn<User> = ({ user }) => {
+const validateUserFn: ValidateUserFn<User> = ({
+  user,
+  fieldAuthDirectiveNode,
+}) => {
   if (!user) {
     throw new EnvelopError('request not authenticated', {
       code: 'NOT_AUTHENTICATED',
     })
+  } else {
+    if (!fieldAuthDirectiveNode?.arguments) {
+      return
+    }
+
+    const valueNode = fieldAuthDirectiveNode.arguments.find(
+      (arg) => arg.name.value === 'role'
+    )?.value as EnumValueNode | undefined
+
+    if (valueNode) {
+      const role = valueNode.value as Role
+      if (role !== user.role) {
+        throw new EnvelopError('request not authorized', {
+          code: 'NOT_AUTHORIZED',
+        })
+      }
+    }
   }
 }
 

From 518334e0393a098d56ffc670a9f64b5f90465750 Mon Sep 17 00:00:00 2001
From: taneba <taneba.vla@gmail.com>
Date: Wed, 6 Apr 2022 08:30:37 +0900
Subject: [PATCH 5/6] update testing

---
 apps/frontend/jest.setup.ts |  2 ++
 apps/frontend/package.json  |  2 +-
 yarn.lock                   | 18 +++++++++---------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/jest.setup.ts b/apps/frontend/jest.setup.ts
index a4877e7f..013a65e4 100644
--- a/apps/frontend/jest.setup.ts
+++ b/apps/frontend/jest.setup.ts
@@ -4,6 +4,8 @@ import '@testing-library/jest-dom/extend-expect'
 import { resetFactoryIds } from '~/mocks/factories/factory'
 import { server } from '~/mocks/server'
 
+globalThis.IS_REACT_ACT_ENVIRONMENT = true
+
 process.env = {
   ...process.env,
   NEXT_PUBLIC_GRAPHQL_END_POINT: 'http://localhost:4000/dev/graphql',
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index e57518de..160a6d8e 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -53,7 +53,7 @@
     "@graphql-typed-document-node/core": "3.1.1",
     "@next/bundle-analyzer": "12.0.10",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.3",
+    "@testing-library/react": "^13.0.0",
     "@types/jest": "27.4.1",
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.13",
diff --git a/yarn.lock b/yarn.lock
index bf260bc1..c6ba470a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2370,10 +2370,10 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@testing-library/dom@^8.0.0":
-  version "8.11.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.3.tgz#38fd63cbfe14557021e88982d931e33fb7c1a808"
-  integrity sha512-9LId28I+lx70wUiZjLvi1DB/WT2zGOxUh46glrSNMaWVx849kKAluezVzZrXJfTKKoQTmEOutLes/bHg4Bj3aA==
+"@testing-library/dom@^8.5.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
+  integrity sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -2399,13 +2399,13 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@12.1.3":
-  version "12.1.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.3.tgz#ef26c5f122661ea9b6f672b23dc6b328cadbbf26"
-  integrity sha512-oCULRXWRrBtC9m6G/WohPo1GLcLesH7T4fuKzRAKn1CWVu9BzXtqLXDDTA6KhFNNtRwLtfSMr20HFl+Qrdrvmg==
+"@testing-library/react@^13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.0.0.tgz#8cdaf4667c6c2b082eb0513731551e9db784e8bc"
+  integrity sha512-p0lYA1M7uoEmk2LnCbZLGmHJHyH59sAaZVXChTXlyhV/PRW9LoIh4mdf7tiXsO8BoNG+vN8UnFJff1hbZeXv+w==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
+    "@testing-library/dom" "^8.5.0"
     "@types/react-dom" "*"
 
 "@tootallnate/once@1":

From 82713a7259f8e48767a5ec9112ffc71bfb4a744c Mon Sep 17 00:00:00 2001
From: taneba <taneba.vla@gmail.com>
Date: Thu, 7 Apr 2022 01:29:47 +0900
Subject: [PATCH 6/6] error-boundary example

---
 apps/frontend/package.json                        |  1 +
 apps/frontend/src/pages/all-todos/AllTodoList.tsx |  6 ++++++
 apps/frontend/src/pages/all-todos/index.page.tsx  | 12 ++++++++----
 yarn.lock                                         |  7 +++++++
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 160a6d8e..3ba262a7 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -27,6 +27,7 @@
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0",
+    "react-error-boundary": "^3.1.4",
     "react-hook-form": "7.22.5",
     "spinners-react": "1.0.6",
     "styled-components": "5.3.3",
diff --git a/apps/frontend/src/pages/all-todos/AllTodoList.tsx b/apps/frontend/src/pages/all-todos/AllTodoList.tsx
index 84cebef5..6aaf4fd6 100644
--- a/apps/frontend/src/pages/all-todos/AllTodoList.tsx
+++ b/apps/frontend/src/pages/all-todos/AllTodoList.tsx
@@ -21,6 +21,12 @@ const GetAllTodos = gql(/* GraphQL */ `
 export function AllTodoList() {
   const [res] = useQuery({ query: GetAllTodos })
 
+  if (res.error) {
+    throw new Error(
+      res.error.graphQLErrors.map((error) => error.message).toString()
+    )
+  }
+
   return (
     <div>
       {res.data && res.data.allTodos.length < 1 && <p>No Items</p>}
diff --git a/apps/frontend/src/pages/all-todos/index.page.tsx b/apps/frontend/src/pages/all-todos/index.page.tsx
index bc54af46..cfef75fb 100644
--- a/apps/frontend/src/pages/all-todos/index.page.tsx
+++ b/apps/frontend/src/pages/all-todos/index.page.tsx
@@ -1,4 +1,5 @@
 import { Suspense } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 
 import { Spinner } from '~/components'
 import { DevNote } from '~/components/general/DevNote'
@@ -18,10 +19,13 @@ function AllTodos() {
           admin role user to see
         </DevNote.P>
       </DevNote.Root>
-
-      <Suspense fallback={<Spinner />}>
-        <AllTodoList />
-      </Suspense>
+      <ErrorBoundary
+        fallbackRender={(props) => <div>{JSON.stringify(props)}</div>}
+      >
+        <Suspense fallback={<Spinner />}>
+          <AllTodoList />
+        </Suspense>
+      </ErrorBoundary>
     </div>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index c6ba470a..07c0c980 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7977,6 +7977,13 @@ react-dom@18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.21.0"
 
+react-error-boundary@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-hook-form@7.22.5:
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.22.5.tgz#85a135f3c5ae02ccf73096a03fc14b45607e9baa"