Блог

Я создаю приложение, используя react hooks и apollo client 3

попытка обновить состояние по useQuery завершении

вот код

 const GET_POST_BY_ID_QUERY = gql`
  query getPostById($postId: ID!) {
    getPostById(postId: $postId) {
      id
      title
      body
    }
  }
`;
  

 const [{ title, body }, setPost] = useState({ title: '', body: '' });

useQuery(GET_POST_BY_ID_QUERY, {
    variables: { postId: route?.params?.postId },
    skip: !route.params,
    onCompleted: data => {
      console.log('data', data.getPostById);
      setPost(data.getPostById);
    },
    onError: err => {
      console.log(err);
    }
  });
  

он продолжает выдавать мне эту ошибку

 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 %s.%s, a useEffect cleanup function
  

Я вообще не использую useEffect на этом экране.

Что может быть не так?

React предупреждает вас, что вы пытаетесь обновить переменную с отслеживанием состояния, которой больше нет. Вероятно, происходит то, что ваш компонент отключается после начала выполнения вашего запроса, но до его фактического завершения. Вы можете решить эту проблему, добавив if(mounted) инструкцию внутри вашего onCompleted обработчика, чтобы проверить, все ли еще существует компонент, прежде чем пытаться обновить его состояние.

Тем не менее, я предлагаю вам отказаться onCompleted от onError обратных вызовов and и выбрать переменные use, возвращаемые useQuery перехватчиком. Ваш код будет выглядеть следующим образом:

 const { data, loading, error } = useQuery(GET_POST_BY_ID_QUERY, {
    variables: { postId: route?.params?.postId },
    skip: !route.params
})

if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;

return (
  <div>
    <p>{data.getPostById.title}</p>
    <p>{data.getPostById.body}</p>
  </div>
)
  

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