update react-query and fix typings

Author: alan2207

package.json

@@ -30,7 +30,7 @@
     "react-error-boundary": "^3.1.3",
     "react-helmet-async": "^1.1.2",
     "react-hook-form": "^7.7.1",
-    "react-query": "^3.18.1",
+    "react-query": "^3.34.15",
     "react-query-auth": "^1.0.0",
     "react-router-dom": "^6.0.0-beta.0",
     "react-scripts": "4.0.3",

src/features/comments/api/getComments.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { axios } from '@/lib/axios';
-import { QueryConfig } from '@/lib/react-query';
+import { ExtractFnReturnType, QueryConfig } from '@/lib/react-query';
 
 import { Comment } from '../types';
 
@@ -13,15 +13,17 @@ export const getComments = ({ discussionId }: { discussionId: string }): Promise
   });
 };
 
+type QueryFnType = typeof getComments;
+
 type UseCommentsOptions = {
   discussionId: string;
-  config?: QueryConfig<typeof getComments>;
+  config?: QueryConfig<QueryFnType>;
 };
 
 export const useComments = ({ discussionId, config }: UseCommentsOptions) => {
-  return useQuery({
-    ...config,
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
     queryKey: ['comments', discussionId],
     queryFn: () => getComments({ discussionId }),
+    ...config,
   });
 };

src/features/discussions/api/getDiscussion.ts

@@ -1,20 +1,23 @@
 import { useQuery } from 'react-query';
 
 import { axios } from '@/lib/axios';
-import { QueryConfig } from '@/lib/react-query';
+import { ExtractFnReturnType, QueryConfig } from '@/lib/react-query';
 
 import { Discussion } from '../types';
 
 export const getDiscussion = ({ discussionId }: { discussionId: string }): Promise<Discussion> => {
   return axios.get(`/discussions/${discussionId}`);
 };
+
+type QueryFnType = typeof getDiscussion;
+
 type UseDiscussionOptions = {
   discussionId: string;
-  config?: QueryConfig<typeof getDiscussion>;
+  config?: QueryConfig<QueryFnType>;
 };
 
 export const useDiscussion = ({ discussionId, config }: UseDiscussionOptions) => {
-  return useQuery({
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['discussion', discussionId],
     queryFn: () => getDiscussion({ discussionId }),

src/features/discussions/api/getDiscussions.ts

@@ -1,20 +1,22 @@
 import { useQuery } from 'react-query';
 
 import { axios } from '@/lib/axios';
-import { QueryConfig } from '@/lib/react-query';
+import { ExtractFnReturnType, QueryConfig } from '@/lib/react-query';
 
 import { Discussion } from '../types';
 
 export const getDiscussions = (): Promise<Discussion[]> => {
   return axios.get('/discussions');
 };
 
+type QueryFnType = typeof getDiscussions;
+
 type UseDiscussionsOptions = {
-  config?: QueryConfig<typeof getDiscussions>;
+  config?: QueryConfig<QueryFnType>;
 };
 
 export const useDiscussions = ({ config }: UseDiscussionsOptions = {}) => {
-  return useQuery({
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['discussions'],
     queryFn: () => getDiscussions(),

src/features/teams/api/getMyTeam.ts

@@ -1,20 +1,22 @@
 import { useQuery } from 'react-query';
 
 import { axios } from '@/lib/axios';
-import { QueryConfig } from '@/lib/react-query';
+import { ExtractFnReturnType, QueryConfig } from '@/lib/react-query';
 
 import { Team } from '../types';
 
 export const getMyTeam = (): Promise<Team> => {
   return axios.get('/team');
 };
 
+type QueryFnType = typeof getMyTeam;
+
 type UseMyTeamOptions = {
-  config?: QueryConfig<typeof getMyTeam>;
+  config?: QueryConfig<QueryFnType>;
 };
 
 export const useMyTeam = ({ config }: UseMyTeamOptions = {}) => {
-  return useQuery({
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['my-teams'],
     queryFn: () => getMyTeam(),

src/features/teams/api/getTeams.ts

@@ -1,20 +1,22 @@
 import { useQuery } from 'react-query';
 
 import { axios } from '@/lib/axios';
-import { QueryConfig } from '@/lib/react-query';
+import { ExtractFnReturnType, QueryConfig } from '@/lib/react-query';
 
 import { Team } from '../types';
 
 export const getTeams = (): Promise<Team[]> => {
   return axios.get('/teams');
 };
 
+type QueryFnType = typeof getTeams;
+
 type UseTeamsOptions = {
-  config?: QueryConfig<typeof getTeams>;
+  config?: QueryConfig<QueryFnType>;
 };
 
 export const useTeams = ({ config = {} }: UseTeamsOptions = {}) => {
-  return useQuery({
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['teams'],
     queryFn: () => getTeams(),

src/features/users/api/getUsers.ts

@@ -1,20 +1,22 @@
 import { useQuery } from 'react-query';
 
 import { axios } from '@/lib/axios';
-import { QueryConfig } from '@/lib/react-query';
+import { ExtractFnReturnType, QueryConfig } from '@/lib/react-query';
 
 import { User } from '../types';
 
 export const getUsers = (): Promise<User[]> => {
   return axios.get(`/users`);
 };
 
+type QueryFnType = typeof getUsers;
+
 type UseUsersOptions = {
-  config?: QueryConfig<typeof getUsers>;
+  config?: QueryConfig<QueryFnType>;
 };
 
 export const useUsers = ({ config }: UseUsersOptions = {}) => {
-  return useQuery({
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['users'],
     queryFn: () => getUsers(),

src/lib/react-query.ts

@@ -12,12 +12,17 @@ const queryConfig: DefaultOptions = {
 
 export const queryClient = new QueryClient({ defaultOptions: queryConfig });
 
-export type QueryConfig<FetcherFnType extends (...args: any) => any> = UseQueryOptions<
-  PromiseValue<ReturnType<FetcherFnType>>
+export type ExtractFnReturnType<FnType extends (...args: any) => any> = PromiseValue<
+  ReturnType<FnType>
 >;
 
-export type MutationConfig<FetcherFnType extends (...args: any) => any> = UseMutationOptions<
-  PromiseValue<ReturnType<FetcherFnType>>,
+export type QueryConfig<QueryFnType extends (...args: any) => any> = Omit<
+  UseQueryOptions<ExtractFnReturnType<QueryFnType>>,
+  'queryKey' | 'queryFn'
+>;
+
+export type MutationConfig<MutationFnType extends (...args: any) => any> = UseMutationOptions<
+  ExtractFnReturnType<MutationFnType>,
   AxiosError,
-  Parameters<FetcherFnType>[0]
+  Parameters<MutationFnType>[0]
 >;

yarn.lock

@@ -13760,10 +13760,10 @@ react-query-auth@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-query-auth/-/react-query-auth-1.0.0.tgz#d8bd5fbf88d24c2c86cc406c1ddb6c854372ce8c"
   integrity sha512-SnxqQzCg0C4CUAWGddqaSTvi2PPbYH1yAT8kC8+b6vYY58lKmsTcVxvcpDIW91BSOgzP6aILUJlvORGRdgsEbg==
 
-react-query@^3.18.1:
-  version "3.18.1"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.18.1.tgz#893b5475a7b4add099e007105317446f7a2cd310"
-  integrity sha512-17lv3pQxU9n+cB5acUv0/cxNTjo9q8G+RsedC6Ax4V9D8xEM7Q5xf9xAbCPdEhDrrnzPjTls9fQEABKRSi7OJA==
+react-query@^3.34.15:
+  version "3.34.15"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.34.15.tgz#9e143b7d0aa39c515102a35120d5518ad91b10f6"
+  integrity sha512-dOhGLB5RT3p+wWj0rVdAompSg+R9t6oMRk+JhU8DP0tpJM2UyIv3r4Kk0zUkHSxT+QG34hFdrgdqxVWxgeNq4g==
   dependencies:
     "@babel/runtime" "^7.5.5"
     broadcast-channel "^3.4.1"