Merge pull request #380 from oasisprotocol/lw/nexus-infinite

Refactor into useNexusInfiniteQuery

Author: lukaw3d

.changelog/380.trivial.md

@@ -0,0 +1 @@
+Refactor into useNexusInfiniteQuery

src/components/AppsList/index.tsx

@@ -1,11 +1,11 @@
 import { useEffect, type FC, type ReactNode } from 'react'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 import { AppCard } from '../AppCard'
-import { getGetRuntimeRoflAppsQueryKey, GetRuntimeRoflApps } from '../../nexus/api'
+import { GetRuntimeRoflApps } from '../../nexus/api'
 import { useNetwork } from '../../hooks/useNetwork'
-import { useInfiniteQuery } from '@tanstack/react-query'
 import { useInView } from 'react-intersection-observer'
 import { useAccount } from 'wagmi'
+import { useNexusInfiniteQuery } from '../../utils/useNexusInfiniteQuery'
 
 type AppsListProps = {
   emptyState: ReactNode
@@ -19,30 +19,22 @@ export const AppsList: FC<AppsListProps> = ({ emptyState, type }) => {
   // Fallback is needed to render Explore page content without wallet connection
   const network = useNetwork(type === 'dashboard' ? undefined : 'mainnet')
 
-  const appsQueryParams = (pageParam = 0) =>
-    [
-      network,
-      'sapphire',
-      {
-        limit: pageLimit,
-        offset: pageParam,
-        admin: type === 'dashboard' ? address : undefined,
-        sort_by: type === 'dashboard' ? 'created_at_desc' : undefined,
-      },
-    ] satisfies Parameters<typeof GetRuntimeRoflApps>
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isFetched } = useInfiniteQuery({
-    queryKey: ['infinite', ...getGetRuntimeRoflAppsQueryKey(...appsQueryParams())],
-    queryFn: async ({ pageParam = 0 }) => {
-      const result = await GetRuntimeRoflApps(...appsQueryParams(pageParam))
-      return result
-    },
-    initialPageParam: 0,
-    enabled: type === 'explore' || (type === 'dashboard' && isConnected),
-    getNextPageParam: (lastPage, allPages) => {
-      const totalFetched = allPages.length * pageLimit
-      return lastPage.data.rofl_apps.length < lastPage.data.total_count ? totalFetched : undefined
-    },
-  })
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isFetched } =
+    useNexusInfiniteQuery({
+      queryKeyPrefix: 'rofl_apps',
+      queryFn: GetRuntimeRoflApps,
+      resultsField: 'rofl_apps',
+      params: [
+        network,
+        'sapphire',
+        {
+          limit: pageLimit,
+          admin: type === 'dashboard' ? address : undefined,
+          sort_by: type === 'dashboard' ? 'created_at_desc' : undefined,
+        },
+      ],
+      enabled: type === 'explore' || (type === 'dashboard' && isConnected),
+    })
 
   useEffect(() => {
     if (inView && hasNextPage && !isFetchingNextPage) {

src/pages/Dashboard/Machines/index.tsx

@@ -1,12 +1,12 @@
 import { useEffect, type FC } from 'react'
 import { MachinesEmptyState } from './emptyState'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
-import { useInfiniteQuery } from '@tanstack/react-query'
 import { useInView } from 'react-intersection-observer'
 import { useAccount } from 'wagmi'
 import { useNetwork } from '../../../hooks/useNetwork'
-import { getGetRuntimeRoflmarketInstancesQueryKey, GetRuntimeRoflmarketInstances } from '../../../nexus/api'
+import { GetRuntimeRoflmarketInstances } from '../../../nexus/api'
 import { MachineCard } from '../../../components/MachineCard'
+import { useNexusInfiniteQuery } from '../../../utils/useNexusInfiniteQuery'
 
 const pageLimit = 9
 
@@ -15,29 +15,21 @@ export const Machines: FC = () => {
   const { ref, inView } = useInView()
   const network = useNetwork()
 
-  const machinesQueryParams = (pageParam = 0) =>
-    [
-      network,
-      'sapphire',
-      {
-        limit: pageLimit,
-        offset: pageParam,
-        admin: address,
-      },
-    ] satisfies Parameters<typeof GetRuntimeRoflmarketInstances>
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isFetched } = useInfiniteQuery({
-    queryKey: ['infinite', ...getGetRuntimeRoflmarketInstancesQueryKey(...machinesQueryParams())],
-    queryFn: async ({ pageParam = 0 }) => {
-      const result = await GetRuntimeRoflmarketInstances(...machinesQueryParams(pageParam))
-      return result
-    },
-    initialPageParam: 0,
-    enabled: isConnected,
-    getNextPageParam: (lastPage, allPages) => {
-      const totalFetched = allPages.length * pageLimit
-      return lastPage.data.instances.length < lastPage.data.total_count ? totalFetched : undefined
-    },
-  })
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isFetched } =
+    useNexusInfiniteQuery({
+      queryKeyPrefix: 'machines',
+      queryFn: GetRuntimeRoflmarketInstances,
+      resultsField: 'instances',
+      params: [
+        network,
+        'sapphire',
+        {
+          limit: pageLimit,
+          admin: address,
+        },
+      ],
+      enabled: isConnected,
+    })
 
   useEffect(() => {
     if (inView && hasNextPage && !isFetchingNextPage) {

src/utils/useNexusInfiniteQuery.ts

@@ -0,0 +1,44 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { AxiosResponse } from 'axios'
+import { List } from '../nexus/api'
+
+/** Strictly typed, correctly puts params in queryKey, and paginates using total_count */
+export function useNexusInfiniteQuery<
+  T extends unknown[],
+  ResultsField extends string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Params extends any[],
+>({
+  queryKeyPrefix,
+  queryFn,
+  resultsField,
+  params,
+  enabled,
+}: {
+  queryKeyPrefix: string
+  queryFn: (...params: Params) => Promise<AxiosResponse<List & { [k in ResultsField]: T }, unknown, unknown>>
+  resultsField: ResultsField
+  params: Params
+  enabled?: boolean
+}) {
+  if (!params.find(p => (p as { limit?: number } | undefined)?.limit))
+    throw new Error('Expected some param to specify page "limit"')
+  if (params.find(p => (p as { offset?: number } | undefined)?.offset))
+    throw new Error('Unexpected param "offset" - it will be added automatically')
+
+  return useInfiniteQuery({
+    queryKey: ['infinite', queryKeyPrefix, params],
+    queryFn: ({ pageParam = 0 }) => {
+      const paramsWithOffset = params.map(p =>
+        (p as { limit?: number } | undefined)?.limit ? { ...p, offset: pageParam } : p,
+      ) as Params
+      return queryFn(...paramsWithOffset)
+    },
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      const totalFetched = allPages.reduce((sum, p) => sum + p.data[resultsField].length, 0)
+      return lastPage.data[resultsField].length < lastPage.data.total_count ? totalFetched : undefined
+    },
+    enabled: enabled,
+  })
+}