GraphQL with React-Apollo: Cannot read property of undefined

Question

I have the following gQL defined,

import gql from 'graphql-tag'

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

and i use it with react-apollo query as such


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

With this i am getting an error Cannot read property 'firstName' of undefined

What is it that i am doing wrong here?

Current answers have some good ideas. Please post the code where you're actually using the data so we can be sure. You of course will want to make sure the data is being returned from your API successfully to begin with as well. — Chris B.
– Chris B., Commented Oct 3, 2019 at 13:23

Calvin · Accepted Answer · 2019-10-03 13:16:42Z

6

You're de-structuring the data variable before it exists/has loaded. You should wait until loading = false before trying to access the data.

answered Oct 3, 2019 at 13:16

Calvin

8,7377 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris B. Over a year ago

I think the problem is moreso in trying to access it than simply destructuring it. From what I understand, the destructuring he's doing could work successfully, but I'm not 100% certain.

Calvin Over a year ago

De-structuring is a form of access. If the nested property doesn't exist, de-structuring an object will throw an error, the exact error he posted.

Chris B. Over a year ago

I'm able to destructure data before it's returned using the useQuery hook, however I do receive an error by trying to use it before it's loaded. Maybe it works differently in a Query component. I admit it may not be the best idea, and I need to placate TypeScript to do so, but, for example, this works: const { loading, error, data: {findAll}} = useQuery<any>(GET_FILERS);. Nothing built-in to JS throws an error.

Terje Laugaland · Accepted Answer · 2019-10-03 13:08:29Z

3

Do you check if data has loaded yet?

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

answered Oct 3, 2019 at 13:08

Terje Laugaland

1961 silver badge6 bronze badges

Comments

Long Nguyen Duc · Accepted Answer · 2019-10-03 15:40:47Z

1

Since you are destructuring variables, you need to make sure that data, also data.signUpForm are null OR undefined.

Here is an example for your situation.

There are three problems can make data/data.signUpForm is not an object:

While loading the query, the data is undefined
After loading, the signUpForm is not available in the apollo cache
After loading, the signUpForm is available in the cache, but it's null

To resolve your problem:

Process data after loading and query is not returned any error
Make sure your data is available on the cache
Make sure your returned data have a correct structure

edited Oct 3, 2019 at 15:40

answered Oct 3, 2019 at 15:23

Long Nguyen Duc

1,3451 gold badge10 silver badges13 bronze badges

Collectives™ on Stack Overflow

GraphQL with React-Apollo: Cannot read property of undefined

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related