Modals + react-query: TypeError: Cannot read property 'append' of null

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>
    </>
  );
};

1 post - 1 participant

Read full topic