I’m trying to use the IonModal component and getting an error with react-query that I don’t know how to solve.
I have an IonPage that uses react-query to fetch a list. I click a button “Open Delete Modal” and then press “Delete” to delete an item from the list, which uses react-hook-form to POST to my Drupal server. I then hide the modal and invalidate the query. However, when I invalidate the query, I get this error:
TypeError: Cannot read property ‘append’ of null
HTMLElement.<anonymous>
src/components/createInlineOverlayComponent.tsx:78
75 | */
76 | this.ref.current?.addEventListener('didDismiss', (evt: any) => {
77 | const wrapper = this.wrapperRef.current!;
> 78 | this.ref.current!.append(wrapper);
| ^ 79 |
80 | this.setState({ isOpen: false });
81 |
I’ve tried invalidating the query and .then(() => setShowModal(false), but in this case, the modal does not close.
How can I safely close the modal and invalidate the query that is used to build the page?
Here’s a simplified version of the code I am using:
const DeleteSomething: React.VFC<MyProps> = ({
myPageData,
}: MyProps) => {
const [showModal, setShowModal] = useState(false);
const queryClient = useQueryClient();
const mutateCollectUnflag = useMutation(
(dataToDelete : InterfaceDataToDelete) => fetchPostWithUserAuth(
postDeleteUrl, fetchOptionsPost(dataToDelete),
), {
onSuccess: () => {
setShowModal(false);
queryClient.invalidateQueries('myQueryKey');
},
},
);
function handleClick(event: React.FormEvent) {
event.preventDefault();
setShowModal(!showModal);
}
const onSubmit = () => {
const myData = dummyObject;
mutateCollectUnflag.mutate(myData);
};
const { handleSubmit } = useForm();
return (
<>
<IonModal
isOpen={showModal}
onDidDismiss={() => setShowModal(false)}
>
<IonCard>
<onCardContent>
<form onSubmit={handleSubmit(onSubmit)}>
<IonButton
color="danger"
type="submit"
>
Delete
</IonButton>
</form>
</IonCardContent>
</IonCard>
</IonModal>
<IonButton
type="submit"
color="danger"
onClick={(event) => {
handleClick(event);
}}
>
Open delete modal
</IonButton>
</>
);
};