Question

2019-10-03

12212

reactjs graphql react-apollo apollo-client

我定义了以下 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>

使用这个，我收到错误 无法读取未定义的属性“firstName”

我在这里做错了什么？

Answer 1

您正在对 data 变量进行解构，但该变量尚未存在或尚未加载。您应该等到 loading = false 后再尝试访问数据。

Answer 2

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

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

Terje Laugaland

2019-10-03

Answer 3

由于您正在解构变量，因此您需要确保 data 和 data.signUpForm 为 null 或未定义。

以下是适合您情况的示例。

有三个问题可能导致 data/data.signUpForm 不是对象：

要解决您的问题：