Fix fragile react queries

Author: lukaw3d

.changelog/377.trivial.md

@@ -0,0 +1 @@
+Fix fragile react queries

src/components/AppsList/index.tsx

@@ -19,16 +19,21 @@ 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 { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isFetched } = useInfiniteQuery({
-    // TODO: missing address param
-    queryKey: [...getGetRuntimeRoflAppsQueryKey(network, 'sapphire'), type],
-    queryFn: async ({ pageParam = 0 }) => {
-      const result = await GetRuntimeRoflApps(network, 'sapphire', {
+  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,

src/pages/Dashboard/Machines/index.tsx

@@ -5,7 +5,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'
 import { useInView } from 'react-intersection-observer'
 import { useAccount } from 'wagmi'
 import { useNetwork } from '../../../hooks/useNetwork'
-import { getGetRuntimeRoflAppsQueryKey, GetRuntimeRoflmarketInstances } from '../../../nexus/api'
+import { getGetRuntimeRoflmarketInstancesQueryKey, GetRuntimeRoflmarketInstances } from '../../../nexus/api'
 import { MachineCard } from '../../../components/MachineCard'
 
 const pageLimit = 9
@@ -15,15 +15,20 @@ export const Machines: FC = () => {
   const { ref, inView } = useInView()
   const network = useNetwork()
 
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isFetched } = useInfiniteQuery({
-    // TODO: wrong path and missing address param
-    queryKey: [...getGetRuntimeRoflAppsQueryKey(network, 'sapphire')],
-    queryFn: async ({ pageParam = 0 }) => {
-      const result = await GetRuntimeRoflmarketInstances(network, 'sapphire', {
+  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,

src/pages/Dashboard/index.tsx

@@ -27,9 +27,8 @@ export const Dashboard: FC = () => {
       sort_by: 'created_at_desc',
     },
     {
-      // TODO: fragile - will break if we make sort_by customizable
+      // @ts-expect-error Incorrect type demands queryKey
       query: {
-        queryKey: ['roflAppsPolling', network, address],
         refetchInterval: refetchInterval,
       },
     },
@@ -44,8 +43,8 @@ export const Dashboard: FC = () => {
       admin: address,
     },
     {
+      // @ts-expect-error Incorrect type demands queryKey
       query: {
-        queryKey: ['roflmachinePolling', network, address],
         refetchInterval: refetchInterval,
       },
     },