test: modify sample code

src/components/Playground.jsx

@@ -254,9 +254,22 @@ export default function Playground() {
     })
   }
 
-  const [getFetcherCallFlag, setGetFetcherCallFlag] = useState(false)
+  const [callFlag, setCallFlag] = useState(false)
-  const { data: tutoData, error, isLoading } = useSWR('http://localhost:8080/api/tutorial', getFetcher)
+  // const { data: tutoData, error, isLoadin g } = useSWR('http://localhost:8080/api/tutorial', getFetcher)
-  const { trigger, isMutating } = useSWRMutation('http://localhost:8080/api/tutorial', postFetcher)
+  const { data: tutoData, error, isLoading } = useSWR(callFlag ? 'http://localhost:8080/api/tutorial' : null, getFetcher)
+  const { trigger, isMutating: postIsMutating } = useSWRMutation('http://localhost:8080/api/tutorial', postFetcher)
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (error) {
+    return <div>Error...</div>
+  }
+
+  useEffect(() => {
+    trigger({ id: 3, name: 'seulda kim', email: 'seulda.kim@interplug.co.kr' })
+  }, [tutoData])
 
   return (
     <>
@@ -571,7 +584,12 @@ export default function Playground() {
             ))}
         </div>
         <div className="my-2">
-          <Button onClick={() => trigger({ id: 3, name: 'seulda kim', email: 'seulda.kim@interplug.co.kr' })}>insert data</Button>
+          <Button onClick={() => setCallFlag(true)}>getFetcher call</Button>
+        </div>
+        <div className="my-2">
+          <Button disabled={isMutating} onClick={() => trigger({ id: 3, name: 'seulda kim', email: 'seulda.kim@interplug.co.kr' })}>
+            insert data
+          </Button>
         </div>
       </div>
     </>