Apollo useQuery или client.query React не может записать значения

Question

я пытаюсь l oop по массиву объектов из отклика graphql, используя ловушку useQuery.

 const { loading, error, data } = useQuery(GET_FOLDERS);

если я консоль данных журнала, то я получаю это

, но если я должен был утешить данные журнала. Папки [0] .id Я получаю TypeError: данные не определены, я попытался создать объект с массивом тех же значений вручную, и я могу утешите это нормально, а также, если я перейду с использования useQuery на client.query({query: GET_FOLDERS}) с apolloBoost, тогда это также будет работать нормально, я просто подумал, что кто-то может указать мне правильное направление, если это не важно, мне нужно отобразить весь мой код. спасибо

Answer 1

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

Решение полагаться на состояние загрузки здесь и обращаться к свойству только тогда, когда оно действительно готово

Ex

const Comp = () = {
    const { loading, error, data } = useQuery(GET_FOLDERS);
    if(loading) {
        return <div>Loading...</div>
    }
    console.log(data.Folders[0].id )
    ...
}