Refactor useOAuthGrantsQuery to use infinite list

apps/studio/data/oauth-apps/oauth-apps-grants-query.ts

@@ -1,9 +1,9 @@
-import { useQuery } from '@tanstack/react-query'
+import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'
 
 import { oauthAppsKeys } from './keys'
 import { getMockOAuthOwnGrants, USE_MOCKS } from './mocks'
 import type { ListOwnGrantsResponse } from './types'
-import type { ResponseError, UseCustomQueryOptions } from '@/types'
+import type { ResponseError, UseCustomInfiniteQueryOptions } from '@/types'
 
 export type OAuthGrantsVariables = {
   cursor?: string
@@ -27,11 +27,19 @@ export const useOAuthGrantsQuery = <TData = OAuthGrantsData>(
   {
     enabled = true,
     ...options
-  }: UseCustomQueryOptions<OAuthGrantsData, OAuthGrantsError, TData> = {}
+  }: UseCustomInfiniteQueryOptions<
+    OAuthGrantsData,
+    OAuthGrantsError,
+    InfiniteData<TData>,
+    readonly unknown[],
+    string | undefined
+  > = {}
 ) =>
-  useQuery<OAuthGrantsData, OAuthGrantsError, TData>({
+  useInfiniteQuery({
     queryKey: oauthAppsKeys.grants(cursor),
-    queryFn: () => getOAuthGrants({ cursor }),
+    queryFn: ({ pageParam }) => getOAuthGrants({ cursor: pageParam }),
+    initialPageParam: cursor,
+    getNextPageParam: (lastPage) => lastPage.pagination.next_cursor,
     enabled: enabled && USE_MOCKS,
     ...options,
   })