Merge pull request #377 from oasisprotocol/lw/fix-fragile-queries

Fix fragile react queries

Author: lukaw3d

.changelog/377.trivial.md

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

src/components/AppsList/index.tsx

@@ -19,15 +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({
-    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,14 +15,20 @@ export const Machines: FC = () => {
   const { ref, inView } = useInView()
   const network = useNetwork()
 
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isFetched } = useInfiniteQuery({
-    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/MachinesDetails/index.tsx

@@ -29,6 +29,12 @@ export const MachinesDetails: FC = () => {
     'sapphire',
     provider!,
     id!,
+    {
+      // @ts-expect-error Incorrect type demands queryKey
+      query: {
+        refetchInterval: 10_000, // Most useful when waiting for net.oasis.scheduler.rak
+      },
+    },
   )
   const { data, isLoading, isFetched } = roflMachinesQuery
   const machine = data?.data

src/pages/Dashboard/index.tsx

@@ -27,8 +27,8 @@ export const Dashboard: FC = () => {
       sort_by: 'created_at_desc',
     },
     {
+      // @ts-expect-error Incorrect type demands queryKey
       query: {
-        queryKey: ['roflAppsPolling', network, address],
         refetchInterval: refetchInterval,
       },
     },
@@ -43,8 +43,8 @@ export const Dashboard: FC = () => {
       admin: address,
     },
     {
+      // @ts-expect-error Incorrect type demands queryKey
       query: {
-        queryKey: ['roflmachinePolling', network, address],
         refetchInterval: refetchInterval,
       },
     },