Проблема в обработке массива, полученного с помощью graphql-apollo-hooks

Question

Я запрашиваю некоторые данные из бэкэнда. Я определил Query для внутреннего интерфейса, MY_QUERY для внешнего интерфейса и запросил useQuery () с graphql-apollo-hooks.

type Query {
  multiA(input: [String]): [typeA]
}

const MY_QUERY= gql`
  query myQuery($input: [String!]) {
    multiA(input: $input) {
      fieldA
      fieldB
    }
  }
`;

const { data, error, loading } = useQuery(MY_QUERY, {
  skip: material === undefined,
  variables: { input: ['inputA', 'inputB'] },
});

Из graphiql я определил запрос и проверил, что мои выходные данные будут примерно такими:

{
  "data": {
    "typeA": [ 
      {
        "fieldA": "!@#$",
        "fieldB": "#$#%",
      },
      {
        "fieldA": "!@#$",
        "fieldB": "#$#%",
      },
      {
        "fieldA": "!@#$",
        "fieldB": "#$#%",
      }
    ]
  }
}

Я проверил данные по console.log (data.typeA), и это было то же самое с graphiql. Однако, когда я обращаюсь к массиву, он ошибается.

В реакции,

console.log(data.typeA)    // result coincidence with graphiql
console.log(data.typeA[0]) // TypeError: Cannot read property '0' of undefined

В консоли Chrome я сохранил результат data.typeA в качестве глобальной переменной, а затем получил доступ к массиву. Это работает, как я ожидал.

Почему я не могу получить доступ к массиву в реакции, тогда как я могу получить доступ к массиву в консоли Chrome?

Любая ваша помощь будет оценена. Спасибо.

Answer 1

Проблема была в порядке исполнения. Я пытался получить доступ к массиву до загрузки моих данных. После того, как я переместил следующий код перед доступом к массиву,

if(loading) return !@#
if(error) return !@#

Теперь все работает нормально. Спасибо за вашу помощь и извините за мою плохую грамматику: (