apollographql / react-apollo

:recycle: React integration for Apollo Client
https://www.apollographql.com/docs/react/
MIT License
6.85k stars 787 forks source link

getQueryRecycler is not a function #989

Closed kuksik closed 7 years ago

kuksik commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

I have the same error recently

joshourisman commented 7 years ago

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 commented 7 years ago

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

jbaxleyiii commented 7 years ago

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

jbaxleyiii commented 7 years ago

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

bbrzoska commented 7 years ago

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 ```jsx 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
Loading
; } else { return (
    {posts.map(post =>
  • {post.title} by {' '} {post.author.firstName} {post.author.lastName} {' '} ({post.votes} votes)
  • )}
); } } // 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 () => ( ) ```
bbrzoska commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Linking:

jbaxleyiii commented 7 years ago

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 commented 7 years ago

This is fixed on master and will be released today!