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 (