Merge pull request #137 from itizawa/feature/support-swr

SWRを導入して下書き状態を更新した時にすぐに画面に反映されるようにした

apps/web/package.json

@@ -40,6 +40,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.53.0",
     "sass": "^1.78.0",
+    "swr": "^2.2.5",
     "url-join": "^5.0.0",
     "zod": "^3.23.8"
   },

apps/web/src/app/dashboards/blogs/[blogId]/articles/[articleId]/edit/page.tsx

@@ -13,15 +13,7 @@ export default async function Page({ params }: { params: { blogId: string; artic
 
   return (
     <Stack maxWidth={1260} mx='auto' py={4} px={2} gap={2}>
-      <ArticleForm
-        existingArticle={{
-          id: article.id,
-          title: article.title,
-          body: article.body,
-          status: article.status,
-        }}
-        subDomain={blog.subDomain}
-      />
+      <ArticleForm existingArticle={article} subDomain={blog.subDomain} />
     </Stack>
   );
 }

apps/web/src/components/models/article/ArticleForm/ArticleForm.tsx

@@ -11,14 +11,17 @@ import type { FC } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import urlJoin from 'url-join';
 import type { z } from 'zod';
+
 import { convertStatus } from '~/actions/article';
 import { updateDraftArticle } from '~/actions/draftArticle';
 import { updatePublishArticle } from '~/actions/publishArticle';
 import { Editor } from '~/components/uiParts/Editor';
 import { appUrls } from '~/constants/appUrls';
+import { mutateArticle, useArticle } from '~/hooks/article/useArticle/useArticle';
+
 import { generateSubDomainUrl } from '~/utils/generateSubDomainUrl';
 
-const inputSchema = ArticleSchema.pick({ title: true, body: true });
+const inputSchema = ArticleSchema;
 type InputState = z.infer<typeof inputSchema>;
 
 type Props = {
@@ -29,7 +32,19 @@ type Props = {
   };
 };
 
-export const ArticleForm: FC<Props> = ({ subDomain, existingArticle }) => {
+export const ArticleForm: FC<Props> = ({ subDomain, existingArticle: _existingArticle }) => {
+  const { data: existingArticle, isLoading } = useArticle({
+    id: _existingArticle.id,
+    fallbackData: _existingArticle,
+  });
+
+  if (isLoading) return null;
+  if (!existingArticle) return null;
+
+  return <ArticleFormCore subDomain={subDomain} existingArticle={existingArticle} />;
+};
+
+export const ArticleFormCore: FC<Props> = ({ subDomain, existingArticle }) => {
   const { enqueueSnackbar } = useSnackbar();
   const { palette } = useTheme();
 
@@ -81,6 +96,7 @@ export const ArticleForm: FC<Props> = ({ subDomain, existingArticle }) => {
             toStatus: 'draft',
           });
           enqueueSnackbar({ message: '下書きに更新しました', variant: 'success' });
+          mutateArticle({ id: existingArticle.id });
           return;
         }
         case 'draft': {
@@ -89,6 +105,7 @@ export const ArticleForm: FC<Props> = ({ subDomain, existingArticle }) => {
             toStatus: 'publish',
           });
           enqueueSnackbar({ message: '公開しました', variant: 'success' });
+          mutateArticle({ id: existingArticle.id });
           return;
         }
         default: {

apps/web/src/hooks/article/useArticle/useArticle.ts

@@ -0,0 +1,15 @@
+import type { Article } from '@repo/types';
+import useSWR, { mutate } from 'swr';
+import { getArticle } from '~/actions/article';
+
+const generateKey = (id: string) => ({ path: getArticle.name, id });
+
+export const useArticle = ({ id, fallbackData }: { id: string; fallbackData?: Article }) => {
+  return useSWR(generateKey(id), () => getArticle({ id }), {
+    fallbackData,
+  });
+};
+
+export const mutateArticle = ({ id }: { id: string }) => {
+  mutate(generateKey(id));
+};

yarn.lock

@@ -2424,7 +2424,7 @@ [email protected]:
     slice-ansi "^3.0.0"
     string-width "^4.2.0"
 
-[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==
@@ -5756,6 +5756,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"
+
 tar-stream@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
@@ -6038,7 +6046,7 @@ url-join@^5.0.0:
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-5.0.0.tgz#c2f1e5cbd95fa91082a93b58a1f42fecb4bdbcf1"
   integrity sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==
 
-use-sync-external-store@^1.2.2:
+use-sync-external-store@^1.2.0, use-sync-external-store@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==