React-apollo: Can't find field <field> on object (ROOT_QUERY) undefined

Created on 17 Apr 2018 · 5Comments · Source: apollographql/react-apollo

Error: Network error: Can't find field profile({"email":"[email protected]"}) on object (ROOT_QUERY) undefined.

I get the above error when calling the below query from my React app. When I was looking around for solutions, I came across a few similar cases, but each involved reading from the store, which I don't do.

const ProfileWithData = graphql(GET_PROFILE, {
  options: props => ({ variables: { email: props.email } })
})(Profile);

export const GET_PROFILE = gql`
  query getProfile($email: String!) {
    profile(email: $email) {
      email
      timestamp
      (... etc)
    }
  }
`;

Interestingly, the error only occurs when the page is first loaded. If another part of the page is loaded (either before the query or after), the query succeeds when it's loaded again. I use React Router for navigation, and no page refreshes take place in between the query failing and passing. Refreshing the page with the query causes it to fail again, even after it has succeeded and loaded once.

Intended outcome:
Query will succeed and retrieve data.

Actual outcome:
Query fails and Apollo throws above error. Full error below.

How to reproduce the issue:
Unsure. Error occurred when first setting up frontend for AWS AppSync GraphQL API.

index.js:2178 Error: Network error: Can't find field profile({"email":"[email protected]"}) on object (ROOT_QUERY) undefined.
    at new ApolloError (ApolloError.js:34)
    at ObservableQuery../node_modules/aws-appsync/node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.currentResult (ObservableQuery.js:87)
    at Query._this.getQueryResult (react-apollo.browser.umd.js:319)
    at Query../node_modules/react-apollo/react-apollo.browser.umd.js.Query.render (react-apollo.browser.umd.js:421)
    at finishClassComponent (react-dom.development.js:8307)
    at updateClassComponent (react-dom.development.js:8275)
    at beginWork (react-dom.development.js:8896)
    at performUnitOfWork (react-dom.development.js:11708)
    at workLoop (react-dom.development.js:11731)
    at renderRoot (react-dom.development.js:11762)
    at performWorkOnRoot (react-dom.development.js:12318)
    at performWork (react-dom.development.js:12239)
    at performSyncWork (react-dom.development.js:12216)
    at requestWork (react-dom.development.js:12116)
    at scheduleWorkImpl (react-dom.development.js:11991)
    at scheduleWork (react-dom.development.js:11951)
    at Object.enqueueForceUpdate (react-dom.development.js:6628)
    at Query../node_modules/react/cjs/react.development.js.Component.forceUpdate (react.development.js:260)
    at Query._this.updateCurrentData (react-apollo.browser.umd.js:314)
    at Object.error (react-apollo.browser.umd.js:302)
    at notifySubscription (Observable.js:130)
    at onNotify (Observable.js:161)
    at SubscriptionObserver.error (Observable.js:220)
    at ObservableQuery.js:326
    at Array.forEach (<anonymous>)
    at Object.error (ObservableQuery.js:326)
    at QueryManager.js:280
    at QueryManager.js:654
    at Array.forEach (<anonymous>)
    at QueryManager.js:653
    at Map.forEach (<anonymous>)
    at QueryManager../node_modules/aws-appsync/node_modules/apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (QueryManager.js:648)
    at QueryManager.js:222

Version

blocking

Source

dmawrey

Most helpful comment

Fixed(?) by disabling offline support in Apollo Client config:

{
  url: config.graphqlEndpoint,
  region: config.region,
  auth: {
    type: config.authenticationType,
    credentials: () => Auth.currentCredentials()
  },
  disableOffline: true
};

Note this is the config for the AWSAppSyncClient wrapper for Apollo Client, not the native ApolloClient.

dmawrey on 17 Apr 2018

👍17 ❤8 🎉4

All 5 comments

Fixed(?) by disabling offline support in Apollo Client config:

{
  url: config.graphqlEndpoint,
  region: config.region,
  auth: {
    type: config.authenticationType,
    credentials: () => Auth.currentCredentials()
  },
  disableOffline: true
};

Note this is the config for the AWSAppSyncClient wrapper for Apollo Client, not the native ApolloClient.

dmawrey on 17 Apr 2018

👍17 ❤8 🎉4

Hi @dmawrey
I wonder if you use AWSAppSyncClient watchQuery or query?
I tried both and got the same error.
I haven't set disableOffline: true yet.

Did you set up similar like the example aws provided in ChatQL example
https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular/blob/master/src/app/chat-app/appsync.service.ts

Jun711 on 21 Apr 2018

I use the graphql function from the React Apollo library, so I don't use the client for query/watchQuery directly. My client setup is similar to the example, but I'm using AWS_IAM as my auth type.

dmawrey on 23 Apr 2018

Setting disableOffline to true fixed my issue. Thanks @dmawrey