GraphQL с React-Apollo: невозможно прочитать свойство undefined

Question

У меня определен следующий gQL,

import gql from 'graphql-tag'

const SIGN_UP_QUERY = gql`
  query {
    signUpForm @client {
      firstName
      email
      password
    }
  }
`

, и я использую его с запросом реагирования-аполлона как таковым

<Query query={SIGN_UP_QUERY}>
    {({
      data: {
        signUpForm: { firstName }
      },
      loading
    }) => { ...... }}
</Query>

При этом я получаю ошибку Cannot read property 'firstName' of undefined

Что я здесь не так делаю?

Answer 1

Вы деструктурируете переменную data до ее появления / загрузки. Прежде чем пытаться получить доступ к данным, следует дождаться загрузки = false.

Answer 2

Поскольку вы деструктурируете переменные, вам необходимо убедиться, что data, также data.signUpForm имеют значение null ИЛИ не определены.

Вот пример для вашей ситуации.

Возможны три проблемы: data/data.signUpForm не является объектом:

1. Во время загрузки запроса данные undefined
2. После загрузки signUpForm имеет виднедоступно в кеше apollo
3. После загрузки в кэше доступна signUpForm, но она пуста

Для решения вашей проблемы:

1. Процессданные после загрузки и запроса не возвращаются ни одной ошибки
2. Убедитесь, что ваши данные доступны в кеше
3. Убедитесь, что возвращаемые данные имеют правильную структуру

Answer 3

Вы проверяете, загружены ли еще данные?

if (loading) return "data not fetched yet";
return <p>{ firstName }</p>;