React-apollo: 🐛 Can't find field <field> on object (ROOT_QUERY) undefined [on readQuery in mutation update]

[speedtreammanga]

Intended outcome:
I'm trying to write to the Apollo store returned data from my login mutation on update.

Very simple query, which takes in no variables/parameters:

export const MeQuery = gql`
  query me {
    me {
      id
      name
      email
    }
  }
`

Here's my login mutation:

export const LoginMutation = gql`
  mutation login($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      token
      beeKeeper {
        id
        name
        email
      }
    }
  }
`

I have this mutation running on a button onClick event

import React from 'react'
import { graphql } from 'react-apollo'
import { LoginMutation, MeQuery } from './login.queries'

class LoginContainer extends React.PureComponent {
 // ...
  handleLogin = async () => {
    const { email, password } = this.state
    const res = await this.props.loginMutation({
      variables: { email, password },
      update: (store, { data: { login } }) => {
        const data = store.readQuery({ query: MeQuery })
      },
    })
  }
 // ...
}

export default graphql(LoginMutation, {
  name: 'loginMutation',
})(LoginContainer)

Actual outcome:
Apollo throws this error: Can't find field me on object (ROOT_QUERY) undefined. for this line of code:

const data = store.readQuery({ query: MeQuery })

The flow goes like this, login mutation => store.readQuery => update store.

However, this is the first time I'm trying to fetch data from the store (by doing store.readQuery), so I'm guessing the ROOT_QUERY is not defined and then I'm trying to readQuery of an undefined store.

How to reproduce the issue:
none

Version

• apollo-client@apollo-client-preset@^1.0.8
• react-apollo@^2.0.4

Thanks!

[gatzjames]

Hi! Reading from the store is not guaranteed to return a result - if the query you try to read is not on the cache it will throw an error -
You should wrap the readQuery / readFragment in a try catch to make sure your app doesn't break in such cases!

[speedtreammanga]

All right, I see.
Thank you James

On Mon, Mar 12, 2018 at 5:06 AM, James Gatz [e-mail]
wrote:

Hi! Reading from the store is not guaranteed to return a result - if the
query you try to read is not on the cache it will throw an error -
You should wrap the readQuery / readFragment in a try catch to make sure
your app doesn't break in such cases!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/react-apollo/issues/1776#issuecomment-372237940,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJx4zZ4UjQ3MJ8DkrZhF2jEM6RnWVpmzks5tdjqogaJpZM4SlsWR
.

[kimobrian]

But if you wrap the operation in a try...catch clause, how the UI update if it's depending on the cache. I made a mutation and navigated to a page that has a query to fetch all the data connected to the component and the new record was not there. The try...catch suppresses the error but what happens to UI's requiring that data immediately.

Using Apollo Dev Tools, the error doesn't make sense to me. I already have a cache with existing data and it has fetchAllBooks as you can see. What does it mean when it says fetchAllBooks is not there.

[mjasnikovs]

try...catch is not proper solution to handle such issue.
I think in such situation readQuery should return null or instance of Error object.

[n1ru4l]

@mjasnikovs null is not possible, since it is a valid graphql return type.

[mjasnikovs]

@n1ru4l Yes, i know it. In context of readQuery it can't return plain null. You have to pass query, or maybe i am wrong...

It will return:

{someQueryObject: null}

not

null

[n1ru4l]

@mjasnikovs What about readFragment? Possible also an edge case... I do not see why try/catch is not a proper solution..

[mjasnikovs]

@n1ru4l Why would you design read statements, to trow exceptions by default?

This would be much cleaner and more readable solution. In my opinion.

const state = cache.readQuery({query})

if (state instanceof Error) {
  return // (handle Error)
}
return // (handle cache)

or

// Returned when cache is empty
const defaults = {iAmEmpty: 'someData'}
const state = cache.readQuery({query, defaults})

[cheetahcoding]

Create a default state in your store with the desired query object

[myhendry]

I have the same issue "Can't find field ... on object (ROOT_QUERY) { .. }

@JulianCurrie, how do you create a default state? Sorry for my ignorance. I only know how to create a default state for client using Apollo Link State. Tq

[myhendry]

The solution is to pass variables into your update function

the github link below will help

https://github.com/apollographql/apollo-client/issues/2051#issuecomment-341696989

[buggy-implementation]

@myhendry dead link (404)

[n1ru4l]

@GAS2 https://github.com/apollographql/apollo-client/issues/2051#issuecomment-341696989

[norbertkeri]

Ran into this as well. If I try to readQuery on a query that was not executed before, I get the error message mentioned above. Is it expected that every readQuery call is wrapped in a try/catch? The docs don't mention anything about this.

EDIT
This is actually mentioned in the readQuery docs but not in the mutation docs.

Could this be improved? Wrapping every readQuery into a try catch is very cumbersome.

[rosskevin]

This is an api of apollo-client, not react-apollo. If you would like the behavior changed of readQuery, perhaps file an issue in apollo-client and state the case. In the case stated, react-apollo is not intervening and you are using apollo-client directly.

[rjiovan]

Hi, I am also experiencing this issue. I see a lot good information on how to handle the error but did anyone find a solution to the error @speedtreammanga had:

Can't find field me on object (ROOT_QUERY) undefined

[dandv]

@rosjio99: https://github.com/apollographql/apollo-client/issues/1701#issuecomment-416851092