chore: フォーム一覧取得でapiにswrを使って問い合わせるように

package.json

@@ -28,6 +28,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
+    "swr": "^2.2.5",
     "ts-pattern": "^5.0.6",
     "zod": "^3.22.3"
   },

src/app/api/forms/route.ts

@@ -1,9 +1,10 @@
 'use server';
 
-import { NextRequest, NextResponse } from 'next/server';
-import { redirectByResponse } from '../util/responseOrErrorResponse';
+import { NextResponse } from 'next/server';
 import { BACKEND_SERVER_URL } from '@/env';
 import { getCachedToken } from '@/features/user/api/mcToken';
+import { redirectByResponse } from '../util/responseOrErrorResponse';
+import type { NextRequest } from 'next/server';
 
 export async function GET(_: NextRequest) {
   const token = await getCachedToken();

src/app/forms/page.tsx

@@ -1,20 +1,24 @@
 'use client';
 
-import { getForms } from '@/features/form/api/form';
+import { redirect } from 'next/navigation';
+import useSWR from 'swr';
 import FormList from '@/features/form/components/FormList';
-import { MinimumForm } from '@/features/form/types/formSchema';
-import { useEffect, useState } from 'react';
+import type { MinimumForm } from '@/features/form/types/formSchema';
 
-export default function Home() {
-  const [forms, setForms] = useState<MinimumForm[]>([]);
+const Home = () => {
+  const fetcher = (url: string) => fetch(url).then((res) => res.json());
+  const { data: forms, isLoading } = useSWR<MinimumForm[]>(
+    'http://localhost:3000/api/forms',
+    fetcher
+  );
 
-  const fetchForms = async () => {
-    setForms(await getForms());
-  };
-
-  useEffect(() => {
-    fetchForms();
-  }, []);
+  if (!isLoading && !forms) {
+    redirect('/');
+  } else if (!forms) {
+    return null;
+  }
 
   return <FormList forms={forms} />;
-}
+};
+
+export default Home;

yarn.lock

@@ -1157,7 +1157,7 @@ cli-spinners@^2.5.0:
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.1.tgz#9c0b9dad69a6d47cbb4333c14319b060ed395a35"
   integrity sha512-jHgecW0pxkonBJdrKsqxgRX9AcG+u/5k0Q7WPDfi8AogLAdwxEkyYYNWwZ5GvVFoFx2uiY1eNcSK00fh+1+FyQ==
 
-[email protected]:
+[email protected], client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -3483,6 +3483,14 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swr@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.5.tgz#063eea0e9939f947227d5ca760cc53696f46446b"
+  integrity sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==
+  dependencies:
+    client-only "^0.0.1"
+    use-sync-external-store "^1.2.0"
+
 tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -3653,6 +3661,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"