带有React-Apollo的GraphQL：无法读取未定义的属性

Question

我定义了以下gQL，

import gql from 'graphql-tag'

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

我将它与类似的react-apollo查询一起使用

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

与此同时，我遇到了一个错误Cannot read property 'firstName' of undefined

我在这里做错什么了？

Answer 1

您是否检查数据是否已加载？

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

Answer 2

您要在data变量存在/加载之前对其进行解构。您应该等到loading = false才能尝试访问数据。

Answer 3

由于您正在分解变量，因此需要确保data以及data.signUpForm为空或未定义。

这里是您的情况的example。

有三个问题可以使data/data.signUpForm不是对象：

1. 在加载查询时，数据为undefined
2. 加载后，signUpForm在阿波罗缓存中不可用
3. 加载后，signUpForm在缓存中可用，但为空

要解决您的问题，

1. 加载和查询后的过程数据未返回任何错误
2. 确保您的数据在缓存中可用
3. 确保您返回的数据具有正确的结构