Admin UI: minor cleanup to useList

.changeset/odd-rocks-guess.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Minor cleanup to useList.

packages/app-admin-ui/client/components/DeleteItems.js

@@ -8,11 +8,10 @@ import { useList } from '../providers/List';
 
 const DeleteItems = () => {
   const [deleteModalIsVisible, setDeleteModal] = useState(false);
-  const { list, query, selectedItems, setSelectedItems } = useList();
+  const { list, selectedItems, setSelectedItems } = useList();
 
   const handleDelete = () => {
     setDeleteModal(false);
-    query.refetch();
     setSelectedItems([]);
   };
 

packages/app-admin-ui/client/components/UpdateItems.js

@@ -10,11 +10,10 @@ import { UpdateManyItemsModal } from '../../components';
 
 const UpdateItems = () => {
   const [updateModalIsVisible, setUpdateModal] = useState(false);
-  const { list, query, selectedItems } = useList();
+  const { list, selectedItems } = useList();
 
   const handleUpdate = () => {
     setUpdateModal(false);
-    query.refetch();
   };
 
   if (!(ENABLE_DEV_FEATURES && list.access.update)) return null;

packages/app-admin-ui/client/pages/List/index.js

@@ -34,9 +34,9 @@ import { useUIHooks } from '../../providers/Hooks';
 import CreateItem from './CreateItem';
 
 export function ListLayout(props) {
-  const { items, itemCount, queryErrors, query } = props;
+  const { items, itemCount, queryErrors } = props;
 
-  const { list, selectedItems, setSelectedItems } = useList();
+  const { list, loading, selectedItems, setSelectedItems } = useList();
   const {
     urlState: { currentPage, fields, pageSize, search },
   } = useListUrlState(list);
@@ -73,7 +73,7 @@ export function ListLayout(props) {
                       .filter(field => field.path !== '_label_')
                       .map(field => () => field.initCellView())
                   );
-                  return <Search list={list} isLoading={query.loading} />;
+                  return <Search list={list} isLoading={loading} />;
                 }}
               </Render>
             </Suspense>
@@ -140,7 +140,7 @@ export function ListLayout(props) {
                             .filter(field => field.path !== '_label_')
                             .map(field => () => field.initCellView())
                         );
-                        return <Pagination isLoading={query.loading} />;
+                        return <Pagination isLoading={loading} />;
                       }}
                     </Render>
                   </Suspense>
@@ -200,14 +200,14 @@ const ListPage = props => {
   const {
     list,
     listData: { items, itemCount },
+    error,
     queryErrorsParsed,
-    query,
   } = useList();
 
   const history = useHistory();
   const location = useLocation();
 
-  const hasErrorWithNoData = query.error && (!query.data || !items || !Object.keys(items).length);
+  const hasErrorWithNoData = error && (!items || !Object.keys(items).length);
 
   // Mount with Persisted Search
   // ------------------------------
@@ -247,12 +247,12 @@ const ListPage = props => {
     // If there was an error returned by GraphQL, use that message instead
     // FIXME: convert this to an optional chaining operator at some point
     if (
-      query.error.networkError &&
-      query.error.networkError.result &&
-      query.error.networkError.result.errors &&
-      query.error.networkError.result.errors[0]
+      error.networkError &&
+      error.networkError.result &&
+      error.networkError.result.errors &&
+      error.networkError.result.errors[0]
     ) {
-      message = query.error.networkError.result.errors[0].message || message;
+      message = error.networkError.result.errors[0].message || message;
     }
 
     // Special case for when trying to access a non-existent list or a
@@ -273,13 +273,7 @@ const ListPage = props => {
   return (
     <Fragment>
       <DocTitle title={list.plural} />
-      <ListLayout
-        {...props}
-        items={items}
-        itemCount={itemCount}
-        query={query}
-        queryErrors={queryErrorsParsed}
-      />
+      <ListLayout {...props} items={items} itemCount={itemCount} queryErrors={queryErrorsParsed} />
     </Fragment>
   );
 };

packages/app-admin-ui/client/providers/List.js

@@ -34,7 +34,15 @@ export const ListProvider = ({ children, list, skipQuery = false }) => {
     urlState: { currentPage, fields, filters, pageSize, search, sortBy },
   } = useListUrlState(list);
 
-  const query = useQuery(list.getListQuery(fields), {
+  const { listQueryName, listQueryMetaName } = list.gqlNames;
+
+  // Organize the data for easier use.
+  // TODO: consider doing this at the query level with an alias
+  const {
+    loading,
+    error,
+    data: { [listQueryName]: items, [listQueryMetaName]: { count } = {} } = {},
+  } = useQuery(list.getListQuery(fields), {
     fetchPolicy: 'cache-and-network',
     errorPolicy: 'all',
     skip: skipQuery,
@@ -47,22 +55,16 @@ export const ListProvider = ({ children, list, skipQuery = false }) => {
     },
   });
 
-  const { listQueryName, listQueryMetaName } = list.gqlNames;
-
-  // Organize the data for easier use.
-  // TODO: consider doing this at the query level with an alias
-  const {
-    error,
-    data: { [listQueryName]: items, [listQueryMetaName]: { count } = {} } = {},
-  } = query;
   const [selectedItems, setSelectedItems] = useListSelect(items);
+
   return (
     <ListContext.Provider
       value={{
         list,
         listData: { items, itemCount: count },
+        loading,
+        error,
         queryErrorsParsed: deconstructErrorsToDataShape(error)[listQueryName],
-        query,
         isCreateItemModalOpen: isOpen,
         openCreateItemModal,
         closeCreateItemModal,