Browse Source

♻️ refactor(contacts): 迁移React Query API至v4语法

- 将useQuery的数组参数形式重构为对象参数形式
- 将useMutation的数组参数形式重构为对象参数形式
- 统一queryKey和queryFn的命名方式,提高代码一致性
- 保持原有功能逻辑不变,提升代码可维护性
yourname 9 months ago
parent
commit
56ae50439b
1 changed files with 30 additions and 36 deletions
  1. 30 36
      src/client/admin/pages/Contacts.tsx

+ 30 - 36
src/client/admin/pages/Contacts.tsx

@@ -22,19 +22,17 @@ const Contacts: React.FC = () => {
   const queryClient = useQueryClient();
   
   // 获取客户列表
-  const { data: clientsData } = useQuery(
-    ['clientsForContacts'],
-    async () => {
+  const { data: clientsData } = useQuery({
+    queryKey: ['clientsForContacts'],
+    queryFn: async () => {
       const response = await clientClient.$get({ query: { page: 1, pageSize: 1000 } });
       if (response.status !== 200) throw new Error('Failed to fetch clients');
       return response.json() as Promise<InferResponseType<typeof clientClient.$get, 200>>;
     },
-    {
-      onSuccess: (result) => {
-        setClients(result.data);
-      },
-    }
-  );
+    onSuccess: (result) => {
+      setClients(result.data);
+    },
+  });
   
   // 获取联系人列表数据
   const fetchContacts = async ({ page, pageSize }: { page: number; pageSize: number }): Promise<LinkmanListResponse> => {
@@ -50,10 +48,10 @@ const Contacts: React.FC = () => {
     total: 0,
   });
   
-  const { data, isLoading: loading, refetch } = useQuery(
-    ['contacts', pagination.current, pagination.pageSize, searchText],
-    () => fetchContacts({ page: pagination.current, pageSize: pagination.pageSize })
-  );
+  const { data, isLoading: loading, refetch } = useQuery({
+    queryKey: ['contacts', pagination.current, pagination.pageSize, searchText],
+    queryFn: () => fetchContacts({ page: pagination.current, pageSize: pagination.pageSize })
+  });
 
   // 直接使用data处理数据
   const dataSource = data?.data || [];
@@ -106,23 +104,21 @@ const Contacts: React.FC = () => {
   };
   
   // 创建联系人记录
-  const createContact = useMutation(
-    async (data: any) => {
+  const createContact = useMutation({
+    mutationFn: async (data: any) => {
       const response = await linkmanClient.$post({ json: data });
       if (!response.ok) throw new Error('Failed to create contact');
       return response.json();
     },
-    {
-      onSuccess: () => {
-        message.success('联系人记录创建成功');
-        queryClient.invalidateQueries({ queryKey: ['contacts'] });
-        setModalVisible(false);
-      },
-      onError: () => {
-        message.error('操作失败,请重试');
-      }
+    onSuccess: () => {
+      message.success('联系人记录创建成功');
+      queryClient.invalidateQueries({ queryKey: ['contacts'] });
+      setModalVisible(false);
+    },
+    onError: () => {
+      message.error('操作失败,请重试');
     }
-  );
+  });
   
   // 更新联系人记录
   const updateContact = useMutation({
@@ -142,22 +138,20 @@ const Contacts: React.FC = () => {
   });
   
   // 删除联系人记录
-  const deleteContact = useMutation(
-    async (id: string) => {
+  const deleteContact = useMutation({
+    mutationFn: async (id: string) => {
       const response = await linkmanClient[':id'].$delete({ param: { id } });
       if (!response.ok) throw new Error('Failed to delete contact');
       return response.json();
     },
-    {
-      onSuccess: () => {
-        message.success('联系人记录删除成功');
-        queryClient.invalidateQueries({ queryKey: ['contacts'] });
-      },
-      onError: () => {
-        message.error('删除失败,请重试');
-      }
+    onSuccess: () => {
+      message.success('联系人记录删除成功');
+      queryClient.invalidateQueries({ queryKey: ['contacts'] });
+    },
+    onError: () => {
+      message.error('删除失败,请重试');
     }
-  );
+  });
   
   // 提交表单
   const handleSubmit = async () => {