UIIN-1902: Fetch parent and child sub instances in one query (#1621)

* UIIN-1902: Fetch parent and child sub instances in one query

CHANGELOG.md

@@ -3,6 +3,8 @@
 ## [9.1.0] IN PROGRESS
 * The highlight of search results is not specific to the given search but now highlight all kinds of data in the record. Refs UIIN-1454.
 
+* Fetch parent and child sub instances in one query. Fixes UIIN-1902.
+
 ## [9.0.0](https://github.com/folio-org/ui-inventory/tree/v9.0.0) (2022-03-03)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v8.0.0...v9.0.0)
 

src/Instance/InstanceEdit/InstanceEdit.js

@@ -35,7 +35,7 @@ const InstanceEdit = ({
   stripes,
   mutator,
 }) => {
-  const { identifierTypesById, identifierTypesByName } = referenceData;
+  const { identifierTypesById, identifierTypesByName } = referenceData ?? {};
   const [httpError, setHttpError] = useState();
   const [initialValues, setInitialValues] = useState();
   const callout = useCallout();

src/hooks/useInstancesQuery.js

@@ -1,15 +1,15 @@
-import { useQueries } from 'react-query';
+import { useQuery } from 'react-query';
 
-import { useOkapiKy } from '@folio/stripes/core';
+import { useOkapiKy, useNamespace } from '@folio/stripes/core';
 
 // Fetches and returns multiple instances for given instance ids
 const useInstancesQuery = (ids = []) => {
   const ky = useOkapiKy();
+  const query = ids.map(id => `id==${id}`).join(' OR ');
+  const [queryKey] = useNamespace({ key: 'sub-instance' });
+  const queryFn = () => ky.get('inventory/instances', { searchParams: { query } }).json();
 
-  return useQueries(ids.map(id => ({
-    queryKey: ['ui-inventory', 'instances', id],
-    queryFn: () => ky.get(`inventory/instances/${id}`).json(),
-  })));
+  return useQuery([queryKey, query], queryFn, { enabled: query.length > 0 });
 };
 
 export default useInstancesQuery;

src/hooks/useInstancesQuery.test.js

@@ -37,7 +37,8 @@ describe('useInstancesQuery', () => {
 
   it('fetches instances', async () => {
     const { result, waitFor } = renderHook(() => useInstancesQuery([instance.id]), { wrapper });
-    await waitFor(() => result.current[0].isSuccess);
-    expect(result.current[0].data.id).toEqual(instance.id);
+
+    await waitFor(() => result.isSuccess);
+    expect(result.current.data.id).toEqual(instance.id);
   });
 });

src/hooks/useLoadSubInstances.js

@@ -18,18 +18,16 @@ import useInstancesQuery from './useInstancesQuery';
 const useLoadSubInstances = (instanceIds = [], subId) => {
   const instanstcesById = keyBy(instanceIds, subId);
   const [subInstances, setSubInstances] = useState([]);
-  const results = useInstancesQuery(instanceIds.map(inst => inst[subId]));
-  const allLoaded = results.reduce((acc, { isSuccess }) => (isSuccess && acc), true);
+  const { isSuccess, data: results } = useInstancesQuery(instanceIds.map(inst => inst[subId]));
+
   const instances = flow(
-    items => filter(items, ({ data }) => data),
+    items => filter(items, instance => instance),
     items => map(items, ({
-      data: {
-        id,
-        title,
-        hrid,
-        publication,
-        identifiers,
-      },
+      id,
+      title,
+      hrid,
+      publication,
+      identifiers,
     }) => ({
       ...instanstcesById[id],
       title,
@@ -38,8 +36,9 @@ const useLoadSubInstances = (instanceIds = [], subId) => {
       identifiers,
     })),
     items => sortBy(items, 'title')
-  )(results);
-  const shouldUpdateSubInstances = allLoaded && !isEqual(subInstances, instances);
+  )(results?.instances);
+
+  const shouldUpdateSubInstances = isSuccess && !isEqual(subInstances, instances);
 
   useEffect(() => {
     if (shouldUpdateSubInstances) {