Create file query key

Author: letrungduong113

src/common/queryHooks/home/index.ts

@@ -2,23 +2,26 @@ import {useMutation, useQuery} from 'react-query';
 import {HomeApi} from '../../apis';
 import queryClient from '../../helpers/queryClient';
 import {IItemHome} from '../../models';
+import {HOME_SCREEN} from '../queryKey';
 
 const useHomeFetchQuery = () =>
-  useQuery('home', () => HomeApi.fetchData(1, 30));
+  useQuery(HOME_SCREEN.HOME, () => HomeApi.fetchData(1, 30));
 const useAddQuery = () =>
   useMutation((newTodo: string) => HomeApi.createData(newTodo), {
     // When mutate is called:
     onMutate: async (newTodo: string) => {
       // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-      await queryClient.cancelQueries('home');
+      await queryClient.cancelQueries(HOME_SCREEN.HOME);
 
       // Snapshot the previous value
-      const previousTodos = queryClient.getQueryData<IItemHome[]>('home');
+      const previousTodos = queryClient.getQueryData<IItemHome[]>(
+        HOME_SCREEN.HOME,
+      );
 
       // Optimistically update to the new value
       if (previousTodos) {
         queryClient.setQueryData<IItemHome[]>(
-          'home',
+          HOME_SCREEN.HOME,
           (old: any): IItemHome[] => [...old, newTodo],
         );
       }
@@ -31,12 +34,15 @@ const useAddQuery = () =>
 const defaultMutationOptions = {
   onError: (err: unknown, variables: any, context: any) => {
     if (context?.previousTodos) {
-      queryClient.setQueryData<IItemHome[]>('home', context.previousTodos);
+      queryClient.setQueryData<IItemHome[]>(
+        HOME_SCREEN.HOME,
+        context.previousTodos,
+      );
     }
   },
   // Always refetch after error or success:
   onSettled: () => {
-    queryClient.invalidateQueries('home');
+    queryClient.invalidateQueries(HOME_SCREEN.HOME);
   },
 };
 
@@ -45,15 +51,19 @@ const useDeleteQuery = () =>
     // When mutate is called:
     onMutate: async (id: number) => {
       // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-      await queryClient.cancelQueries('home');
+      await queryClient.cancelQueries(HOME_SCREEN.HOME);
 
       // Snapshot the previous value
-      const previousTodos = queryClient.getQueryData<IItemHome[]>('home');
+      const previousTodos = queryClient.getQueryData<IItemHome[]>(
+        HOME_SCREEN.HOME,
+      );
 
       // Optimistically update to the new value
       if (previousTodos) {
-        queryClient.setQueryData<IItemHome[]>('home', (old: any): IItemHome[] =>
-          old.filter((item: IItemHome) => item.id !== id),
+        queryClient.setQueryData<IItemHome[]>(
+          HOME_SCREEN.HOME,
+          (old: any): IItemHome[] =>
+            old.filter((item: IItemHome) => item.id !== id),
         );
       }
 
@@ -63,32 +73,36 @@ const useDeleteQuery = () =>
   });
 
 const useGetDetailQuery = (todoId: number) =>
-  useQuery(['home', todoId], () => HomeApi.getDetail(todoId), {
+  useQuery([HOME_SCREEN.HOME, todoId], () => HomeApi.getDetail(todoId), {
     initialData: () =>
       queryClient
-        .getQueryData<IItemHome[]>('home')
+        .getQueryData<IItemHome[]>(HOME_SCREEN.HOME)
         ?.find((d: IItemHome) => d.id === todoId),
   });
 
 const useUpdateListItem = () =>
   useMutation((updates: IItemHome) => HomeApi.updateItem(updates), {
     // When mutate is called:
     onMutate: async (updates: IItemHome) => {
-      await queryClient.cancelQueries('home');
+      await queryClient.cancelQueries(HOME_SCREEN.HOME);
       // Snapshot the previous value
-      const previousTodos = queryClient.getQueryData<IItemHome[]>('home');
+      const previousTodos = queryClient.getQueryData<IItemHome[]>(
+        HOME_SCREEN.HOME,
+      );
 
       // Optimistically update to the new value
 
       if (previousTodos) {
-        queryClient.setQueryData<IItemHome[]>('home', (old: any): IItemHome[] =>
-          old.map((item: IItemHome) => {
-            return item.id === updates.id ? {...item, ...updates} : item;
-          }),
+        queryClient.setQueryData<IItemHome[]>(
+          HOME_SCREEN.HOME,
+          (old: any): IItemHome[] =>
+            old.map((item: IItemHome) => {
+              return item.id === updates.id ? {...item, ...updates} : item;
+            }),
         );
       }
 
-      return () => queryClient.setQueryData('home', previousTodos);
+      return () => queryClient.setQueryData(HOME_SCREEN.HOME, previousTodos);
     },
     ...defaultMutationOptions,
   });

src/common/queryHooks/index.ts

@@ -1 +1,2 @@
 export * from './home';
+export * from './queryKey';

src/common/queryHooks/queryKey.ts

@@ -0,0 +1,3 @@
+export enum HOME_SCREEN {
+  HOME = 'Home',
+}