Сбой Query GraphQL при работе «Если» Работает над «Иначе если»

Question

Я пытаюсь получить доступ к запросу со своей страницы реакции внешнего интерфейса. Когда я вызываю запрос, это

import React from "react";
import { useQuery } from "@apollo/react-hooks";

import { getBookQuery } from "../queries/queries";

export const BookDetails = (props) => {
  const { loading, error, data } = useQuery(getBookQuery, {
    skip: !props.bookId,
    variables: { id: props.bookId },
  });
  let content;
  if (loading) content = <p>Loading Detail...</p>;
  if (error) {
    content = <p>Error...</p>;
  } 
  if (!props.bookId) {
    content = <p>No book selected yet</p>;
  } else {
    console.log(data.book);
    const book = data;
  }
  return (
    <div id="hook-details">
    </div>
  );

Когда я запускаю этот код, я вижу ошибку TypeError: Невозможно прочитать свойство 'book' из неопределенного

Чтобы исправить эту ошибку Я изменил приведенный выше код, чтобы использовать другие операторы if вместо просто if, но я не понимаю, почему это исправляет ошибку. Даже когда я добавляю лог-операторы в каждый блок if, один и тот же код, кажется, вызывается одновременно

Рабочий код:

import React from "react";
import { useQuery } from "@apollo/react-hooks";

import { getBookQuery } from "../queries/queries";

export const BookDetails = (props) => {
  const { loading, error, data } = useQuery(getBookQuery, {
    skip: !props.bookId,
    variables: { id: props.bookId },
  });
  let content;
  if (loading) content = <p>Loading Detail...</p>;
  else if (error) {
    content = <p>Error...</p>;
  }
  else if (!props.bookId) {
    content = <p>No book selected yet</p>;
  } else {
    console.log(data.book);
    const book = data;
  }

  return (
    <div id="hook-details">
    </div>
  );
};

Спасибо.

Answer 1

1-й случай

... когда ваш компонент получает bookId prop, работает следующий код:

if (loading) content = <p>Loading Detail...</p>;

и

} else {
  console.log(data.book);
  const book = data;
}

data не определено при запуске появляется ошибка.

2-й случай

... в цепочке if else исключает последний фрагмент (console.log(data.book)) до загрузки данных - загрузка ИЛИ доступ к данным, без обоих ( И )

Когда loading получает false, тогда data содержит book, он может быть в безопасности.

---

PS. Безопаснее использовать «ранний возврат»:

if( !props.bookId ) return <NoBookSelectedMessage /> // or null to show nothing
if( loading ) return <Loading/>
if( error ) return <Error />
// 'data' must be defined here

Answer 2

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

Подобно следующему - передав data в массив зависимостей:

useEffect(() => {
   if (data) {
      // your actions here
      console.log(data.book);
   }
}, [data]);

Рекомендуем прочитать: Использование Effect Hook

Надеюсь, это поможет!