Почему при обновлении страницы с примером Hasura и Next Js она вызывает ошибку свойства destructure?

Question

Я только начинаю с Хасуры, а затем JS. Я следовал примеру из https://hackernoon.com/how-to-integrate-next-js-and-hasura-4a964424db6d, чтобы познакомиться с тем, как это работает. После того, как я собрал все это, он работает впервые, отображая все данные (без обновлений). Когда я обновляю sh страницу, я получаю TypeError: Cannot destructure property 'author' of 'undefined' or 'null'. Однако, после того как я удалю data: {author: authors},, скомпилирую и снова добавлю в код, он снова начнет работать. После того, как я переосмыслил sh, снова появляется TypeError. Код ссылается на следующие строки в index.js:

  return (
    <Query
      query={query}
      fetchPolicy={"cache-and-network"}
    >
      {({ loading, data: { author: authors }, error }) => { 
      //<-- The line above is where the error happens after I refresh the page
        return (
          <div>
            <h1>My Authors </h1>
            <div>
              {authors &&
                authors.map((a, i) => (
                  <div key={i}>
                    <h2>{a.name}</h2>
                  </div>
                ))}
            </div>
          </div>
        );
      }}
    </Query>
  );
};

Проблема в том, что у меня нет отдаленного представления о том, почему он будет делать это только после того, как я обновлю sh. Я попытался просмотреть Документы Хасуры и не нашел ничего полезного. Любые идеи будут высоко оценены?

Если это поможет, я запускаю Hasura на Docker на localhost. Конечная точка еще не защищена.