graphql после запуска мутации, если я быстро вернусь на предыдущую страницу, произойдет ошибка

Question

после запуска мутации с использованием graphql, если я быстро вернусь на предыдущую страницу, произойдет ошибка: Предупреждение: не удается выполнить обновление состояния React на отключенном компоненте. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в% s.% S, функцию очистки useEffect,

Я думаю, это потому, что я быстро go перехожу на другую страницу во время мутации. Если это не так, ошибки нет. (Даже если возникает ошибка, обновление завершается успешно. Но я беспокоюсь об ошибках)

Даже если перейти на другую страницу во время мутации, я хочу продолжить обновление как есть. Как я могу продолжить обновление ?

если Если нет пути, есть ли способ Как создать задержку при мутировании

мне очень жаль. мой английский sh не хорош.

const CalendarTodo = ({
  month,
  day,
  data,`enter code here`
  isImportWhether,
  setIsImportWhether
}) => {
  const [value, setValue] = useState("");
  const monthDay = `${month + 1}월 ${day}일`;

  const [createToDoMutation] = useMutation(CREATE_TODO, {
    variables: {
      toDoId:
        data &&
        data.toDos &&
        data.toDos.filter(object => object.monthDay === monthDay)[0] &&
        data.toDos.filter(object => object.monthDay === monthDay)[0].id,
      monthDay: monthDay,
      dayToDo: value,
      importEvent: isImportWhether
    },
    update: (proxy, { data: { createToDo } }) => {
      const data = proxy.readQuery({ query: SEE_TODO_OF_ME });
      data &&
        data.toDos &&
        data.toDos.filter(object => object.monthDay === monthDay)[0] &&
        data.toDos
          .filter(object => object.monthDay === monthDay)[0]
          .dayToDo.push(createToDo);
      proxy.writeQuery({ query: SEE_TODO_OF_ME, data });
    },
    optimisticResponse: {
      createToDo: {
        __typename: "DayToDo",
        id: Math.random().toString(),
        toDoList: value,
        importEvent: isImportWhether
      }
    }
  });

  return (
    <>
  );
};

export default CalendarTodo;

Answer 1

Как вы уже догадались, причина в асинхронном запросе, который продолжает выполняться даже после демонтажа компонента из-за его перехода от него.

Есть много способов решить эту проблему. Один из них заключается в том, чтобы добавить проверку того, установлен ли компонент, из которого вы вызываете асинхронный запрос c, и обновлять его состояние только в этом случае, например:

 useEffect(() => {
    let isMounted = true;

    apollo.mutate({query, variables, update: {
        if(isMounted) {
           // update state or something
        }
    })

    return () => {
      isMounted = false;
    };
  }, []);

Таким образом, однако данные могут быть потерял. Если вы хотите убедиться, что вы получаете и сохраняете возвращаемое значение, вы должны добавить запрос к компоненту более высокого уровня, иначе контекстная навигация не будет отключена. Таким образом, вы можете инициировать вызов asyn c, но вам не нужно беспокоиться о том, чтобы уйти.