[NO JIRA] Introduce wrappers for react-query

3 files changed, 99 insertions, 23 deletions

diff --git a/server/sonar-web/src/main/js/queries/common.ts b/server/sonar-web/src/main/js/queries/common.ts
new file mode 100644
index 00000000000..9bf450ae683
--- /dev/null
+++ b/server/sonar-web/src/main/js/queries/common.ts
@@ -0,0 +1,81 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import {
+  InfiniteData,
+  QueryKey,
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
+  UseQueryOptions,
+  UseQueryResult,
+  useInfiniteQuery,
+  useQuery,
+} from '@tanstack/react-query';
+
+export function createQueryHook<
+  T = unknown,
+  TQueryData = unknown,
+  TError = Error,
+  TData = TQueryData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  fn: (data: T) => UseQueryOptions<TQueryData, TError, TData, TQueryKey>,
+): <SelectType = TQueryData>(
+  data: T,
+  options?: Omit<
+    UseQueryOptions<TQueryData, TError, SelectType, TQueryKey>,
+    'queryKey' | 'queryFn'
+  >,
+) => UseQueryResult<SelectType, TError>;
+
+export function createQueryHook(fn: (data: any) => UseQueryOptions) {
+  return (data: any, options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>) =>
+    useQuery({ ...fn(data), ...options });
+}
+
+export function createInfiniteQueryHook<
+  T = unknown,
+  TQueryFnData = unknown,
+  TError = Error,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  fn: (
+    data: T,
+  ) => UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey, TPageParam>,
+): <SelectType = TData>(
+  data: T,
+  options?: Omit<
+    UseInfiniteQueryOptions<TQueryFnData, TError, SelectType, TQueryData, TQueryKey, TPageParam>,
+    'queryKey' | 'queryFn' | 'getNextPageParam' | 'getPreviousPageParam' | 'initialPageParam'
+  >,
+) => UseInfiniteQueryResult<SelectType, TError>;
+
+export function createInfiniteQueryHook(fn: (data: any) => UseInfiniteQueryOptions) {
+  return (
+    data: any,
+    options?: Omit<
+      UseInfiniteQueryOptions,
+      'queryKey' | 'queryFn' | 'getNextPageParam' | 'getPreviousPageParam' | 'initialPageParam'
+    >,
+  ) => useInfiniteQuery({ ...fn(data), ...options });
+}
diff --git a/server/sonar-web/src/main/js/queries/groups.ts b/server/sonar-web/src/main/js/queries/groups.ts
index e41ea23d850..5bed2cb38bf 100644
--- a/server/sonar-web/src/main/js/queries/groups.ts
+++ b/server/sonar-web/src/main/js/queries/groups.ts
@@ -17,21 +17,22 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { infiniteQueryOptions, useMutation, useQueryClient } from '@tanstack/react-query';
 import { createGroup, deleteGroup, getUsersGroups, updateGroup } from '../api/user_groups';
 import { getNextPageParam, getPreviousPageParam } from '../helpers/react-query';
+import { createInfiniteQueryHook } from './common';
 
-export function useGroupsQueries(
-  getParams: Omit<Parameters<typeof getUsersGroups>[0], 'pageSize' | 'pageIndex'>,
-) {
-  return useInfiniteQuery({
-    queryKey: ['group', 'list', getParams],
-    queryFn: ({ pageParam }) => getUsersGroups({ ...getParams, pageIndex: pageParam }),
-    getNextPageParam,
-    getPreviousPageParam,
-    initialPageParam: 1,
-  });
-}
+export const useGroupsQueries = createInfiniteQueryHook(
+  (getParams: Omit<Parameters<typeof getUsersGroups>[0], 'pageSize' | 'pageIndex'>) => {
+    return infiniteQueryOptions({
+      queryKey: ['group', 'list', getParams],
+      queryFn: ({ pageParam }) => getUsersGroups({ ...getParams, pageIndex: pageParam }),
+      getNextPageParam,
+      getPreviousPageParam,
+      initialPageParam: 1,
+    });
+  },
+);
 
 export function useCreateGroupMutation() {
   const queryClient = useQueryClient();
diff --git a/server/sonar-web/src/main/js/queries/projects.ts b/server/sonar-web/src/main/js/queries/projects.ts
index 9fe51a5ccd1..39eab402621 100644
--- a/server/sonar-web/src/main/js/queries/projects.ts
+++ b/server/sonar-web/src/main/js/queries/projects.ts
@@ -17,19 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { UseQueryOptions, useQuery } from '@tanstack/react-query';
+import { queryOptions } from '@tanstack/react-query';
 import { searchProjects } from '../api/components';
+import { createQueryHook } from './common';
 
-export function useProjectQuery<T = Awaited<ReturnType<typeof searchProjects>>>(
-  key: string,
-  options?: Omit<
-    UseQueryOptions<Awaited<ReturnType<typeof searchProjects>>, Error, T>,
-    'queryKey' | 'queryFn'
-  >,
-) {
-  return useQuery({
+export const useProjectQuery = createQueryHook((key: string) => {
+  return queryOptions({
     queryKey: ['project', key],
     queryFn: ({ queryKey: [, key] }) => searchProjects({ filter: `query=${key}` }),
-    ...options,
   });
-}
+});