Блог

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

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

#javascript #arrays #reactjs #apollo

#javascript #массивы #reactjs #apollo

Вопрос:

Я запрашиваю некоторые данные из серверной части. Я определил запрос на серверной части, 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.
Однако, когда я обращаюсь к массиву, он становится неправильным.

В react,

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

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

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

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

Комментарии:

1. Было бы полезно просмотреть остальную часть кода вашего компонента и то, как вы на самом деле используете результат запроса.

Ответ №1:

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

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

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

Метки: ,