client: refresh templates when mount

packages/client/src/components/template/list/index.tsx

@@ -2,7 +2,7 @@ import { List, Pagination } from '@douyinfe/semi-ui';
 import { DataRender } from 'components/data-render';
 import { Empty } from 'components/empty';
 import { IProps as ITemplateCardProps, TemplateCard, TemplateCardPlaceholder } from 'components/template/card';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 const grid = {
   gutter: 16,
@@ -29,8 +29,7 @@ export const TemplateList: React.FC<IProps> = ({
   onClosePreview,
   pageSize = 5,
 }) => {
-  const { data, loading, error } = hook();
+  const { data, loading, error, refresh } = hook();
-
   const [page, onPageChange] = useState(1);
 
   const arr = useMemo(() => {
@@ -40,6 +39,10 @@ export const TemplateList: React.FC<IProps> = ({
     return arr.slice(start, end);
   }, [data, page, pageSize]);
 
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
   return (
     <DataRender
       loading={loading}

packages/client/src/data/template.ts

@@ -22,7 +22,7 @@ export const getPublicTemplates = (
 
 export const usePublicTemplates = () => {
   const [page, setPage] = useState(1);
-  const { data, error, isLoading } = useQuery([TemplateApiDefinition.public.client(), page], () =>
+  const { data, error, isLoading, refetch } = useQuery([TemplateApiDefinition.public.client(), page], () =>
     getPublicTemplates(page)
   );
 
@@ -31,6 +31,7 @@ export const usePublicTemplates = () => {
     loading: isLoading,
     error,
     setPage,
+    refresh: refetch,
   };
 };
 
@@ -79,6 +80,7 @@ export const useOwnTemplates = () => {
     error,
     setPage,
     addTemplate,
+    refresh: mutate,
   };
 };