refactor(react-api-client): fix react query key object hashing for us…

…eAllCommandsAsPreSerializedList (#15188)

React query does not properly handle objects passed in useQuery's
queryKey array argument that contain keys with `undefined` values. Here,
in `useAllCommandsAsPreSerializedList`, I map undefined values to null
so that they are properly cached and do not trigger a refetch when the
host object does not change.

react-api-client/src/runs/useAllCommandsAsPreSerializedList.ts

@@ -1,3 +1,4 @@
+import mapValues from 'lodash/mapValues'
 import { UseQueryResult, useQuery } from 'react-query'
 import { getCommandsAsPreSerializedList } from '@opentrons/api-client'
 import { useHost } from '../api'
@@ -28,18 +29,10 @@ export function useAllCommandsAsPreSerializedList<TError = Error>(
     enabled: host !== null && runId != null && options.enabled !== false,
   }
   const { cursor, pageLength } = nullCheckedParams
-  // reduce hostKey into a new object to make nullish values play nicely with react-query key hash
-  const hostKey =
-    host != null
-      ? Object.entries(host).reduce<Object>((acc, current) => {
-          const [key, val] = current
-          if (val != null) {
-            return { ...acc, [key]: val }
-          } else {
-            return { ...acc, [key]: 'no value' }
-          }
-        }, {})
-      : {}
+
+  // map undefined values to null to agree with react query caching
+  // TODO (nd: 05/15/2024) create sanitizer for react query key objects
+  const hostKey = mapValues(host, v => (v !== undefined ? v : null))
 
   const query = useQuery<CommandsData, TError>(
     [