Хук-запрос перезапускает пустой объект внутри useEffect, но не после него. Почему?

Question

Итак, у меня есть обработчик запросов, из которого я sh заполняю переменную состояния данными. Проблема в том, что в useEffect запрос возвращается как объект {}, но после использования useEffect правильно возвращает данные (см. Изображение). Я попытался поместить useEffect после всех определений переменных, но это вызвало ошибку визуализации ловушки. Что я здесь пропускаю и как мне решить эту проблему?

  // Single Item Query
  const { data: singledItemData, error: errorSingleItem, loading: loadingSingleItem } = useQuery(
    SINGLE_ITEM_QUERY, {
      variables: {
        id: props.id,
      }
    }
  );

  useEffect(() => {
    console.log("singledItemData in useEffect = ", singledItemData);
    if (singledItemData.item) {
      setColor(singledItemData.item.color.name);
    }
  }, []);

  // User hook variables
  if (!user) return null;
  if (user.error) return <Error error={user.error} />;

  // Single Item Query variables

  if (loadingSingleItem) return <p>Loading...</p>;
  if (!singledItemData.item) return <p>No Item Found for ID {props.id}</p>;

  console.log("Single Item Data = ", singledItemData);

Answer 1

Это происходит потому, что вы передаете пустой массив в качестве второго параметра ловушки useEffect. Это заставит крюк бегать только один раз, на горе. Если вы хотите запускать каждый раз, когда изменяется singledItemData, вам нужно передать его в массив.

  useEffect(() => {
    console.log("singledItemData in useEffect = ", singledItemData);
    if (singledItemData.item) {
      setColor(singledItemData.item.color.name);
    }
  }, [singledItemData]);

Answer 2

Когда компонент, использующий useQuery, монтируется, он запускает сетевой запрос, который является асинхронным. Однако ваш useEffect хук выполняется один раз после монтирования компонента (из-за пустого списка зависимостей). В настоящее время, скорее всего, запрос еще не завершен, поэтому данные отсутствуют. Как только запрос завершится, ваш компонент снова выполнит рендеринг (инициируемый обновлением состояния в хуке useQuery) с полученными данными. Но на этот раз ваш useEffect обратный вызов больше не будет вызываться. Добавьте singledItemData в список зависимостей, чтобы увидеть изменение, или просто console.log во внешней области видимости, чтобы увидеть изменения каждого рендера.

Так что это не ошибка, а ожидаемое поведение.