relay: [compat] Uncaught TypeError: Cannot read property '__classic_node__' of undefined

I keep getting this error every time I try to use createRefetchContainer

import {
  createRefetchContainer,
  graphql,
} from 'react-relay/compat';

and attempt to refetch:

    const refetchVariables = fragmentVariables => ({
      count: fragmentVariables.count + 50,
    });
    this.props.relay.refetch(refetchVariables, null);

stack trace:

Uncaught TypeError: Cannot read property '__classic_node__' of undefined
    at getClassicNode (app.js:70847)
    at getClassicOperation (app.js:70865)
    at Object.Container._this._refetch [as refetch] (app.js:109331)
    at AfterSales._loadMore (app.js:123423)
    at onClick (app.js:123488)
    at Object.ReactErrorUtils.invokeGuardedCallback (app.js:67236)
    at executeDispatch (app.js:66763)
    at Object.executeDispatchesInOrder (app.js:66786)
    at executeDispatchesAndRelease (app.js:51349)
    at executeDispatchesAndReleaseTopLevel (app.js:51360)

that’s even if I don’t pass any queries in the router (I am using import useRelay from 'react-router-relay'; :

  <Route path="after-sales" admin>
    <IndexRoute
      component={AfterSalesPage}
      admin
    />
  </Route>

and just render QueryRenderer in the root component (i.e. AfterSalesPage).

Anything inside AfterSalesPage component is react-relay/compat (none of the react-relay/classic)

@leebyron ?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 17 (4 by maintainers)

Most upvoted comments

@dilizarov I just resolved my issue today after going back and looking at it. Turns out that I was actually just missing the third argument for createRefetchContainer.

Here is a simplified version of my setup. I have a route config file, like this.

...
const DesignQueries = graphql.experimental`
  query routes_Design_Query($startDate: YearMonthInput, $endDate: YearMonthInput) {
    account {
      ...Design_user @arguments(startDate: $startDate, endDate: $endDate)
    }
  }
`
...
<Route path="/designs" Component={Design} query={DesignQueries} />
...

And the react component with the refetch

...
export default createRefetchContainer(
  Design,
  {
    user: graphql.experimental`
      fragment Design_user on User 
        @argumentDefinitions(
          startDate: { type: "YearMonthInput" },
          endDate: { type: "YearMonthInput" }
        )
      {
        designData(startDate: $startDate, endDate: $endDate) {
           getDesigns
           getTitles
        }
      }
    `
  },
  graphql.experimental`
    query Design_refetch_Query($startDate: YearMonthInput, $endDate: YearMonthInput) {
      user {
        ...Design_user @arguments(startDate: $startDate, endDate: $endDate)
      }
    }
  `,
)

I then call this.props.relay.refetch onClick and update state during ComponentWillReceiveProps

kbbqiu on Oct 3, 2017

Having a similar issue and may be related. Getting Uncaught (in promise) TypeError: Cannot read property 'modern' of undefined when using createRefetchContainer and this.props.relay.refetch.

.babelrc

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": [
    ["relay", {"compat": true, "schema": "cached-schema.json"}]
  ]
}

kbbqiu on Sep 22, 2017

I’m sorry this issue has sat here for so long. In an attempt to clean up our issue queue we’re closing some aging or unclear-action issues.

This definitely sounds like a build problem. I’ve filed a note to improve this error message so that it’s more clear that this is related to the built artifacts with suggestions on how to fix.

If you have more to share, please feel free to reopen it with an update.

leebyron on Sep 11, 2017