refactor

lib/api/useApi.tsx → lib/api/useApiQuery.tsx

@@ -6,9 +6,13 @@ import useFetch from 'lib/hooks/useFetch';
 import buildUrl from './buildUrl';
 import type { RESOURCES, ResourcePayload, ResourceError } from './resources';
 
-export default function useApi<R extends keyof typeof RESOURCES>(
+interface Params<R extends keyof typeof RESOURCES> {
+  queryOptions?: Omit<UseQueryOptions<unknown, ResourceError, ResourcePayload<R>>, 'queryKey' | 'queryFn'>;
+}
+
+export default function useApiQuery<R extends keyof typeof RESOURCES>(
   resource: R,
-  queryOptions?: Omit<UseQueryOptions<unknown, ResourceError, ResourcePayload<R>>, 'queryKey' | 'queryFn'>,
+  { queryOptions }: Params<R> = {},
 ) {
   const fetch = useFetch();
 

lib/hooks/useFetchProfileInfo.tsx

-import useApi from 'lib/api/useApi';
+import useApiQuery from 'lib/api/useApiQuery';
 import * as cookies from 'lib/cookies';
 
 export default function useFetchProfileInfo() {
-  return useApi('user_info', {
+  return useApiQuery('user_info', {
+    queryOptions: {
       refetchOnMount: false,
       enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
+    },
   });
 }

ui/shared/Page/Page.tsx

 import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import useApi from 'lib/api/useApi';
+import useApiQuery from 'lib/api/useApiQuery';
 import * as cookies from 'lib/cookies';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
@@ -22,8 +22,10 @@ const Page = ({
   hideMobileHeaderOnScrollDown,
   isHomePage,
 }: Props) => {
-  useApi('csrf', {
+  useApiQuery('csrf', {
+    queryOptions: {
       enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
+    },
   });
 
   const renderErrorScreen = React.useCallback(() => {