diff --git a/.changeset/odd-rocks-guess.md b/.changeset/odd-rocks-guess.md
new file mode 100644
index 00000000000..30a627a178d
--- /dev/null
+++ b/.changeset/odd-rocks-guess.md
@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Minor cleanup to useList.
diff --git a/packages/app-admin-ui/client/components/DeleteItems.js b/packages/app-admin-ui/client/components/DeleteItems.js
index 2768da65fc1..4c51eba1313 100644
--- a/packages/app-admin-ui/client/components/DeleteItems.js
+++ b/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([]);
};
diff --git a/packages/app-admin-ui/client/components/UpdateItems.js b/packages/app-admin-ui/client/components/UpdateItems.js
index e547e65521a..4c539078334 100644
--- a/packages/app-admin-ui/client/components/UpdateItems.js
+++ b/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;
diff --git a/packages/app-admin-ui/client/pages/List/index.js b/packages/app-admin-ui/client/pages/List/index.js
index 9531ed4f912..1328ebae327 100644
--- a/packages/app-admin-ui/client/pages/List/index.js
+++ b/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 ;
+ return ;
}}
@@ -140,7 +140,7 @@ export function ListLayout(props) {
.filter(field => field.path !== '_label_')
.map(field => () => field.initCellView())
);
- return ;
+ return ;
}}
@@ -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 (
-
+
);
};
diff --git a/packages/app-admin-ui/client/providers/List.js b/packages/app-admin-ui/client/providers/List.js
index c95ff6517ee..6fe267e1019 100644
--- a/packages/app-admin-ui/client/providers/List.js
+++ b/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 (