client.writeQuery: Can't perform a React state update on an unmounted component.

[vikei]

I have custom hook that use useApolloClient

Hook

import { gql, useApolloClient, useQuery } from "@apollo/client"
import { useCallback } from "react"

export const modalQuery = gql`
  query GetModal {
    modal @client {
      name
      props
    }
  }
`

const useModal = () => {
  const client = useApolloClient()
  const { data } = useQuery(modalQuery)

  const open = useCallback(
    ({ name, props = {} }: { name: string; props?: any }) => {
      // Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
      client.writeQuery({
        query: modalQuery,
        data: { modal: { name, props } },
      })
    },
    [client]
  )

  const close = useCallback(() => {
    client.writeQuery({
      query: modalQuery,
      data: { modal: null },
    })
  }, [client])

  return {
    modal: data?.modal,
    close,
    open,
  }
}

export default useModal

I use this hook in two components on different routes.
I use open function to write data to cache in first component it shows modal and close modal(write to cache)

Then I go to second route, and first component unmount, and when I use open it shows warning on first component that I display in useModal code chunk

First Component

import { Box, Button } from "@material-ui/core"
import React from "react"
import { useModal, useProjectsQuery } from "../../app"
import ProjectsList from "../components/projects-list"

const ProjectsView = () => {
  const { data } = useProjectsQuery()
  const { open } = useModal()

  return (
    <Box>
      <Button
        variant="contained"
        size="small"
        color="primary"
        onClick={() => open({ name: "project-form" })}
      >
        Create Project
      </Button>
      <ProjectsList projects={data?.projects} />
    </Box>
  )
}

export default ProjectsView

Second Component

import { Box, Button } from "@material-ui/core"
import React from "react"
import { BoardQuery, useModal } from "../../../app"
import Columns from "./columns"

type Props = {
  boardId: number
  board: BoardQuery["board"]
}

const Board = ({ board, boardId }: Props) => {
  const { open } = useModal()

  return (
    <Box>
      <header>
        <h1>Board: {board?.name}</h1>
        <Button
          variant="contained"
          color="primary"
          onClick={() => {
            open({ props: { boardId }, name: "column-form" })
          }}
        >
          Create Column
        </Button>
      </header>
      <Columns boardId={boardId} />
    </Box>
  )
}

export default Board

Modal Component

import { Modal as MuModal } from "@material-ui/core"
import React from "react"
import { useModal } from "../../lib"
import { modalMap } from "./constants"
import { Container } from "./styles"

const Modal = () => {
  const { modal, close } = useModal()
  const ModalComponent = modalMap[modal?.name]

  return (
    <MuModal open={Boolean(ModalComponent)} onClose={() => close()}>
      <Container>
        {ModalComponent && (
          <ModalComponent
            {...modal?.props}
            onClose={() => {
              close()
              if (modal?.props?.onClose) modal?.props?.onClose()
            }}
          />
        )}
      </Container>
    </MuModal>
  )
}

export default Modal

As I understand useApolloClient don't unsubscribe on unmount. How I can fix it ?

Version: "@apollo/client": "^3.0.0-beta.43"

[hwillson]

This doesn't sound like a bug with Apollo Client - would you mind moving this discussion over to Spectrum? Thanks!

[csandanov]

Were you able to resolve this issue? I have the same problem