Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

getQueryRecycler is not a function #989

Closed
kuksik opened this issue Aug 15, 2017 · 20 comments
Closed

getQueryRecycler is not a function #989

kuksik opened this issue Aug 15, 2017 · 20 comments
Assignees

Comments

@kuksik
Copy link

kuksik commented Aug 15, 2017

Using the compose function I got this error:

TypeError: this.context.getQueryRecycler is not a function
     at GraphQL.getQueryRecycler (/app/node_modules/react-apollo/graphql.js:138:37)
     at GraphQL.createQuery (/app/node_modules/react-apollo/graphql.js:213:48)
     at GraphQL.setInitialProps (/app/node_modules/react-apollo/graphql.js:204:22)
     at GraphQL.componentWillMount (/app/node_modules/react-apollo/graphql.js:70:26)
     at ReactCompositeComponentWrapper.performInitialMount (/app/node_modules/react-dom/lib/ReactCompositeComponent.js:350:14)
     at ReactCompositeComponentWrapper.mountComponent (/app/node_modules/react-dom/lib/ReactCompositeComponent.js:257:21)
     at Object.mountComponent (/app/node_modules/react-dom/lib/ReactReconciler.js:45:35)
     at ReactCompositeComponentWrapper.performInitialMount (/app/node_modules/react-dom/lib/ReactCompositeComponent.js:370:34)
     at ReactCompositeComponentWrapper.mountComponent (/app/node_modules/react-dom/lib/ReactCompositeComponent.js:257:21)
     at Object.mountComponent (/app/node_modules/react-dom/lib/ReactReconciler.js:45:35)
     at ReactCompositeComponentWrapper.performInitialMount (/app/node_modules/react-dom/lib/ReactCompositeComponent.js:370:34)
     at ReactCompositeComponentWrapper.mountComponent (/app/node_modules/react-dom/lib/ReactCompositeComponent.js:257:21)
     at Object.mountComponent (/app/node_modules/react-dom/lib/ReactReconciler.js:45:35)
     at /app/node_modules/react-dom/lib/ReactServerRendering.js:45:36
     at ReactServerRenderingTransaction.perform (/app/node_modules/react-dom/lib/Transaction.js:143:20)
     at renderToStringImpl (/app/node_modules/react-dom/lib/ReactServerRendering.js:43:24)
     at Object.renderToString (/app/node_modules/react-dom/lib/ReactServerRendering.js:73:10)
     at /app/webpack:/src/server.js:243:30
     at Generator.next (<anonymous>)
     at step (/app/server.js:1684:191)
     at /app/server.js:1684:361
     at process._tickCallback (internal/process/next_tick.js:109:7)

I can not say exactly what happened.I detected this error when deploy my project on the heroku. I think this error can be relate npm. I am tried different versions of npm and packages but nothing help(

my code:

class COMPONENT extends React.Component {
.....
}

export default compose(
  graphql(query, { name: 'query' }),
)(COMPONENT);

"react-apollo": "^1.4.6",
"apollo-client": "^1.4.2",
"graphql": "^0.9.3",

@vuquangchien
Copy link

I'm getting this error, too. I think there's some kind of "conflicting" with some other packages. In one of my project downgrade react-apollo to ^1.0.1 solves the problem. While in one other project it doesn't.

@gex
Copy link

gex commented Aug 15, 2017

the codeship builds of our project are also failing because of this error. here is the relevant part of package.json:

  "dependencies": {
    "apollo-client": "^1.9.1",
    "classnames": "^2.2.5",
    "cleave.js": "^0.9.2",
    "express": "^4.15.4",
    "express-bearer-token": "^2.1.0",
    "graphql-tag": "^2.4.2",
    "immutable": "^3.8.1",
    "jquery-param": "^0.2.0",
    "jsonwebtoken": "^7.4.2",
    "moment": "^2.18.1",
    "numeral": "^2.0.4",
    "passport": "^0.3.2",
    "passport-oauth2": "^1.3.0",
    "prop-types": "^15.5.8",
    "rc-time-picker": "^2.4.0",
    "react": "^15.6.1",
    "react-addons-create-fragment": "^15.4.2",
    "react-addons-shallow-compare": "^15.5.2",
    "react-apollo": "^1.4.14",
    "react-dates": "^12.4.0",
    "react-document-title": "^2.0.3",
    "react-dom": "^15.6.1",
    "react-paginate": "^4.1.1",
    "react-redux": "^5.0.6",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.6",
    "react-s3-uploader": "^4.0.0",
    "react-select": "^1.0.0-rc.2",
    "react-sortable-hoc": "^0.6.7",
    "react-transition-group": "^1.1.3",
    "redux": "^3.6.0",
    "redux-devtools-extension": "^2.13.0",
    "redux-immutable": "^4.0.0",
    "redux-thunk": "^2.1.0",
    "request": "^2.75.0",
    "simple-react-modal": "^0.5.1",
    "smoothscroll-polyfill": "^0.3.5",
    "store": "^2.0.12",
    "string-template": "^1.0.0",
    "uuid": "^3.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.0",
    "chai": "^3.5.0",
    "chai-immutable": "^1.6.0",
    "clean-webpack-plugin": "^0.1.16",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "enzyme": "^2.4.1",
    "enzyme-to-json": "^1.5.1",
    "eslint": "^4.4.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-react": "^7.2.1",
    "fetch-mock": "^5.12.2",
    "html-webpack-plugin": "^2.22.0",
    "ignore-styles": "^5.0.1",
    "isomorphic-fetch": "^2.2.1",
    "jest": "^20.0.4",
    "jsdom": "^11.0.0",
    "mocha": "^3.0.2",
    "mocha-clean": "^1.0.0",
    "nock": "^9.0.2",
    "npm-run-all": "^4.0.1",
    "nyc": "^10.1.2",
    "react-test-renderer": "^15.6.1",
    "redux-mock-store": "^1.2.1",
    "sinon": "^2.1.0",
    "style-loader": "^0.18.2",
    "uglifyjs-webpack-plugin": "^1.0.0-beta.2",
    "url-search-params-polyfill": "^2.0.0",
    "webpack": "^3.5.4"
  }

@pvcrea
Copy link

pvcrea commented Aug 15, 2017

At the moment having the same error as well since like monday... the weird thing is that it happened once uploaded to a staging and pre production env but on local env I dont see or have this error...only on once uploaded it....It's been a real brain headache for 2 days now not knowing where or what is going wrong...

Tried downgrading as well the versions of packages in package.json aswell on how it was before in the previous upload when everything still worked...but it seems not to be related to a package....

If anyone finds an answer that would be awesome :D I will also keep going on to see where or what I did to get this error and post my solution. PS: Error also seems to be only client side indeed

@kuksik
Copy link
Author

kuksik commented Aug 15, 2017

It seem to be something wrong with latest version. I were getting this error because in my package.json was this string "react-apollo": "^1.4.6". For deploying i am use "npm": "5.0.1". It did install latest version of react-apollo(1.4.14).
I changed my package.json to "reacr-appolo": "1.4.6" after this npm was installed exactly this version.I did not try next versions but for me 1.4.6 works ok.

@gex
Copy link

gex commented Aug 15, 2017

@pvcrea @kuksik i had no problem with 1.4.11 so i reverted to that and it works now.

another solution could be yarn or npm v5 (for example you can specify an npm version on heroku) because both of them have a lock file (it should be committed into the repository) and will use the exact versions of the packages.

@pvcrea
Copy link

pvcrea commented Aug 16, 2017

Removing the ^ infront indeed fixed it... i dont know why... ive removed the yarn.lock file on the env and put "react-apollo": "1.4.6" in package.json instead of the "react-apollo": "^1.4.6" and it works :O.... why.... i dont know :D

@lostpebble
Copy link

@pvcrea I've run into this issue as well with cloud builds of my projects. I think it's because when it sees the ^ it will then install the latest "stable" package of that module (not sure of the specifics or if it stays within a certain version range) which isn't necessarily 1.4.6 in this case - right now it will install 1.4.14...

NPM versioning is a bit confusing, I think it's best to maybe remove all the ^ ... Don't really see the advantage in it? More likely to just cause issues like this.

@pvcrea
Copy link

pvcrea commented Aug 16, 2017

Indeed tested with ^1.4.6 and it installed 1.4.14 on the env and which gave me the error again... seems somewhere from 1.4.6 there is something wrong... 1.4.6 does work...haven't tried anything in between yet so dont know which version seems to be brake it, but 1.4.6 works.

@langpavel
Copy link

langpavel commented Aug 17, 2017

I entered this issue too. It's because I'm injecting client into context manually.
This is not safe and using context directly is not supported
You can see what is new and breaking if you do this manually here: src/ApolloProvider.tsx

@hmontes
Copy link

hmontes commented Aug 17, 2017

I have the same error recently

@joshourisman
Copy link

After a little testing, it appears that 1.4.12 is the last working version (1.4.13 looks like it had a dependency issue unrelated to this).

@bbrzoska
Copy link

I can confirm that react-apollo@1.4.12 is the last working version.

@jbaxleyiii
Copy link
Contributor

@bazyli-brzoska what issues are you seeing with 1.4.14?

@jbaxleyiii
Copy link
Contributor

Does anyone have a reproduction I can take a look at?

@jbaxleyiii jbaxleyiii self-assigned this Aug 23, 2017
@bbrzoska
Copy link

bbrzoska commented Aug 23, 2017

Hi @jbaxleyiii. The same issue as described in the issue, this.context.getQueryRecycler is undefined when using 1.4.14. It works properly in 1.4.12 though.

As for reproduction, I just copied and pasted the example from the documentation and routed to my local GraphQL server (also from your example):

example.js
import React from 'react'
import gql from 'graphql-tag'
import {graphql, createNetworkInterface, ApolloProvider, ApolloClient} from 'react-apollo'

const networkInterface = createNetworkInterface({
  uri: 'http://localhost:3000/graphql',
  opts: {
    credentials: 'include',
  },
})

const client = new ApolloClient({
  networkInterface,
})

// The data prop, which is provided by the wrapper below contains,
// a `loading` key while the query is in flight and posts when it is ready
function PostList({ data: { loading, posts } }) {
  if (loading) {
    return <div>Loading</div>;
  } else {
    return (
      <ul>
        {posts.map(post =>
          <li key={post.id}>
            {post.title} by {' '}
            {post.author.firstName} {post.author.lastName} {' '}
            ({post.votes} votes)
          </li>
        )}
      </ul>
    );
  }
}

// The `graphql` wrapper executes a GraphQL query and makes the results
// available on the `data` prop of the wrapped component (PostList here)
const PostListWithQuery = graphql(gql`
  query allPosts {
    posts {
      id
      title
      votes
      author {
        id
        firstName
        lastName
      }
    }
  }
`)(PostList)

export default () => (
  <ApolloProvider client={client}>
    <PostListWithQuery/>
  </ApolloProvider>
)

@bbrzoska
Copy link

bbrzoska commented Aug 23, 2017

OK @jbaxleyiii, I understand the problem now.

I initially didn't have ApolloProvider wrapping the root component (it's not documented well, at least not in the example).

The thing is, after downgrading to 1.4.12, I got a meaningful message, saying something like:

"Please wrap your render function with <ApolloProvider>".

However, in the latest version, 1.4.14, there was no such message, just a crash on getQueryRecycler is not a function.

I've updated to 1.4.14 and the above cited code (with ApolloProvider) works.

@holman
Copy link

holman commented Aug 23, 2017

I just wanted to drop in and say that I ran into this specifically in the test environment, which made it a bit tricky to slot it inside an ApolloProvider. Definitely doable, but downgrading also solved it too, so that was easier in the interim.

@langpavel
Copy link

Linking:

@jbaxleyiii
Copy link
Contributor

I will cut a release today that makes queryRecycling optional so any manual context additions of the client / testing will still work 👍

I do recommend wrapping the root of your tree in ApolloProvider where possible though

@jbaxleyiii jbaxleyiii mentioned this issue Aug 24, 2017
1 task
@jbaxleyiii
Copy link
Contributor

This is fixed on master and will be released today!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests