How to use the @webiny/app/hooks/useDataList.useDataList function in @webiny/app

export const CrudProvider = ({ children, ...props }: Props) => {
    const { showSnackbar } = useSnackbar();
    const { showDialog } = useDialog();
    const { location, history } = useReactRouter();

    const list = useDataList({
        name: "dataList", // TODO: ???
        query: get(props, "list.query", props.list),
        variables: get(props, "list.variables"),
        // "useDataList" will know how to handle no-handler-provided situations.
        getData: get(props, "list.getData"),
        getMeta: get(props, "list.getMeta"),
        getError: get(props, "list.getError")
    });

    const [mutationInProgress, setMutationInProgress] = useState(false);
    const [invalidFields, setInvalidFields] = useState({});

    const urlSearchParams = new URLSearchParams(location.search);
    const id = urlSearchParams.get("id");
    
    const [createMutation] = useMutation(

const useCrud = ({ list, form, location, history  }) => {
    const { showSnackbar } = useSnackbar();
    const { showDialog } = useDialog();
    const dataList = useDataList({
        name: "dataList",
        query: list.get.query,
        variables: list.get.variables,
        response: list.get.response
    });

    const [mutationInProgress, setMutationInProgress] = useState(false);
    const [invalidFields, setInvalidFields] = useState({});

    const urlSearchParams = new URLSearchParams(location.search);
    const id = urlSearchParams.get("id");

    const [deleteRecord] = useMutation(list.delete.mutation);
    const [createRecord] = useMutation(form.save.create);
    const [updateRecord] = useMutation(form.save.update);

export const useAutocomplete = (props: Object): Function => {
    const useDataListProps = props.query ? props : { query: props };

    const dataList = useDataList({ useRouter: false, ...useDataListProps });

    return {
        options: dataList.data || [],
        onInput: debounce(query => {
            if (!query) {
                return;
            }

            let search = props.search || query;
            if (typeof search === "function") {
                search = search(query);
            }

            dataList.setSearch(search);
        }, 250)
    };

function Forms() {
    const [newFormDialogOpened, openNewFormDialog] = React.useState(false);

    const dataList = useDataList({
        query: LIST_FORMS,
        variables: {
            sort: { savedOn: -1 }
        }
    });

    return (
        <>
             openNewFormDialog(false)}
                formsDataList={dataList}
            />

const Pages = props => {
    const [creatingPage, setCreatingPage] = useState(false);
    const [showCategoriesDialog, setCategoriesDialog] = useState(false);
    const client = useApolloClient();
    const { showSnackbar } = useSnackbar();
    const { history } = useReactRouter();

    const dataList = useDataList({
        query: LIST_PAGES,
        variables: {
            sort: { savedOn: -1 }
        }
    });

    const openDialog = useCallback(() => setCategoriesDialog(true), []);
    const closeDialog = useCallback(() => setCategoriesDialog(false), []);

    const createPageMutation = useHandler(props, () => async category => {
        try {
            setCreatingPage(true);
            const res = await client.mutate({
                mutation: CREATE_PAGE,
                variables: { category },
                refetchQueries: ["PbListPages"],