Still necessary to use injectBatchingStrategy?
jeromecovington opened this issue · 12 comments
I am getting errors very similar to those in this issue - denvned/isomorphic-relay-router#5 (comment)
I have taken all of the upgrades for isomorphic-relay and saw that the usage of injectBatchingStrategy was removed from the README. Is it perhaps still required for some cases?
Or was this intended to remove the need to set up injectBatchingStrategy manually?
We don't need to set it manually anymore.
And yet...I am still hitting issues very similar to the one reported at isomorphic-relay-router mentioned in the description, above.
2016-02-22T18:04:31.443312+00:00 ip-10-91-33-137 example: {"event":"response","id":"1456164267531:ip-10-91-33-137:11006:iky8zjs3:10090","instance":"http://0.0.0.0:8081","labels":[],"method":"get","path":"/fashion-shows/example","query":{},"responseTime":3911,"statusCode":200,"pid":11006,"userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36","requestIp":"127.0.0.1","time":"2016-02-22T18:04:31.442Z","name":"@example/example-server","hostname":"ip-10-91-33-137","env":"staging"}
2016-02-22T18:04:31.688736+00:00 ip-10-91-33-137 example: {"event":"response","id":"1456164271659:ip-10-91-33-137:11006:iky8zjs3:10091","instance":"http://0.0.0.0:8081","labels":[],"method":"get","path":"/css/app.css","query":{},"responseTime":29,"statusCode":200,"pid":11006,"userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36","requestIp":"127.0.0.1","time":"2016-02-22T18:04:31.688Z","name":"@example/example-server","hostname":"ip-10-91-33-137","env":"staging"}
2016-02-22T18:04:31.848182+00:00 ip-10-91-33-137 example: {"event":"response","id":"1456164271803:ip-10-91-33-137:11505:iky9b3hj:10070","instance":"http://0.0.0.0:8081","labels":[],"method":"get","path":"/css/app.css.map","query":{},"responseTime":44,"statusCode":200,"pid":11505,"userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36","requestIp":"127.0.0.1","time":"2016-02-22T18:04:31.847Z","name":"@example/example-server","hostname":"ip-10-91-33-137","env":"staging"}
2016-02-22T18:04:32.809595+00:00 ip-10-91-33-137 example: {"event":"response","id":"1456164272631:ip-10-91-33-137:11006:iky8zjs3:10092","instance":"http://0.0.0.0:8081","labels":[],"method":"get","path":"/graphql","query":{"query":"query BreakerRoute{root{...F2}} fragment F0 on PromotedContent{title,photosTout{title,url,id},url,exampleID,channel{slug,url,id}} fragment F1 on Video{id,title,photosTout{title,url,id}} fragment F2 on Root{_allBreakersHB4X7:allBreakers(termSlug:\"example\",taxSlug:\"example-season\") @include(if:true){feed{breakerType,ctaTitle,ctaURL,seasonSlug,title,promotedItem{__typename,...F0,...F1}}}}","variables":"{}"},"responseTime":178,"statusCode":200,"pid":11006,"userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36","requestIp":"127.0.0.1","time":"2016-02-22T18:04:32.809Z","name":"@example/example-server","hostname":"ip-10-91-33-137","env":"staging"}
2016-02-22T18:04:34.103894+00:00 ip-10-91-33-137 example: Warning: React can't find the root component node for data-reactid value `.z3cjb881z4.0.0.1.3.0:$0.3`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.
2016-02-22T18:04:34.104241+00:00 ip-10-91-33-137 example: Warning: React can't find the root component node for data-reactid value `.z3cjb881z4.0.0.1.3.0:$0.3.$1.0.0.1`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.
2016-02-22T18:04:34.107694+00:00 ip-10-91-33-137 example: /example/runtime/example/nodejs/releases/current/node_modules/fbjs/lib/resolveImmediate.js:27
2016-02-22T18:04:34.107849+00:00 ip-10-91-33-137 example: throw error;
2016-02-22T18:04:34.107976+00:00 ip-10-91-33-137 example: ^
2016-02-22T18:04:34.108099+00:00 ip-10-91-33-137 example: TypeError: Cannot read property 'firstChild' of undefined
2016-02-22T18:04:34.108221+00:00 ip-10-91-33-137 example: at Object.ReactMount.findComponentRoot (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactMount.js:715:39)
2016-02-22T18:04:34.108342+00:00 ip-10-91-33-137 example: at Object.ReactMount.findReactNodeByID (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactMount.js:679:23)
2016-02-22T18:04:34.108467+00:00 ip-10-91-33-137 example: at Object.getNode (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactMount.js:162:32)
2016-02-22T18:04:34.108594+00:00 ip-10-91-33-137 example: at Object.ReactDOMIDOperations.dangerouslyReplaceNodeWithMarkupByID (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactDOMIDOperations.js:70:27)
2016-02-22T18:04:34.108717+00:00 ip-10-91-33-137 example: at Object.wrapper [as replaceNodeWithMarkupByID] (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactPerf.js:66:21)
2016-02-22T18:04:34.108855+00:00 ip-10-91-33-137 example: at ReactCompositeComponentMixin._replaceNodeWithMarkupByID (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactCompositeComponent.js:579:31)
2016-02-22T18:04:34.108977+00:00 ip-10-91-33-137 example: at ReactCompositeComponentMixin._updateRenderedComponent (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactCompositeComponent.js:571:12)
2016-02-22T18:04:34.109098+00:00 ip-10-91-33-137 example: at ReactCompositeComponentMixin._performComponentUpdate (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactCompositeComponent.js:544:10)
2016-02-22T18:04:34.109220+00:00 ip-10-91-33-137 example: at ReactCompositeComponentMixin.updateComponent (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactCompositeComponent.js:473:12)
2016-02-22T18:04:34.109343+00:00 ip-10-91-33-137 example: at wrapper [as updateComponent] (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactPerf.js:66:21)
2016-02-22T18:04:34.109464+00:00 ip-10-91-33-137 example: at ReactCompositeComponentMixin.receiveComponent (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactCompositeComponent.js:405:10)
2016-02-22T18:04:34.109584+00:00 ip-10-91-33-137 example: at Object.ReactReconciler.receiveComponent (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactReconciler.js:87:22)
2016-02-22T18:04:34.109712+00:00 ip-10-91-33-137 example: at ReactCompositeComponentMixin._updateRenderedComponent (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactCompositeComponent.js:562:23)
2016-02-22T18:04:34.109860+00:00 ip-10-91-33-137 example: at ReactCompositeComponentMixin._performComponentUpdate (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactCompositeComponent.js:544:10)
2016-02-22T18:04:34.109984+00:00 ip-10-91-33-137 example: at ReactCompositeComponentMixin.updateComponent (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactCompositeComponent.js:473:12)
2016-02-22T18:04:34.110109+00:00 ip-10-91-33-137 example: at wrapper [as updateComponent] (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactPerf.js:66:21)
2016-02-22T18:04:34.110229+00:00 ip-10-91-33-137 example: at ReactCompositeComponentMixin.performUpdateIfNecessary (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactCompositeComponent.js:421:12)
2016-02-22T18:04:34.110351+00:00 ip-10-91-33-137 example: at Object.ReactReconciler.performUpdateIfNecessary (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactReconciler.js:102:22)
2016-02-22T18:04:34.110472+00:00 ip-10-91-33-137 example: at runBatchedUpdates (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactUpdates.js:129:21)
2016-02-22T18:04:34.110592+00:00 ip-10-91-33-137 example: at ReactReconcileTransaction.Mixin.perform (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/Transaction.js:136:20)
2016-02-22T18:04:34.110710+00:00 ip-10-91-33-137 example: at ReactUpdatesFlushTransaction.Mixin.perform (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/Transaction.js:136:20)
2016-02-22T18:04:34.110857+00:00 ip-10-91-33-137 example: at ReactUpdatesFlushTransaction.assign.perform (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactUpdates.js:86:38)
2016-02-22T18:04:34.110977+00:00 ip-10-91-33-137 example: at Object.flushBatchedUpdates (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactUpdates.js:147:19)
2016-02-22T18:04:34.111096+00:00 ip-10-91-33-137 example: at Object.wrapper [as flushBatchedUpdates] (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactPerf.js:66:21)
2016-02-22T18:04:34.111216+00:00 ip-10-91-33-137 example: at ReactDefaultBatchingStrategyTransaction.Mixin.closeAll (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/Transaction.js:202:25)
2016-02-22T18:04:34.111344+00:00 ip-10-91-33-137 example: at ReactDefaultBatchingStrategyTransaction.Mixin.perform (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/Transaction.js:149:16)
2016-02-22T18:04:34.111463+00:00 ip-10-91-33-137 example: at Object.ReactDefaultBatchingStrategy.batchedUpdates (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactDefaultBatchingStrategy.js:62:19)
2016-02-22T18:04:34.111592+00:00 ip-10-91-33-137 example: at Object.enqueueUpdate (/example/runtime/example/nodejs/releases/current/node_modules/react/lib/ReactUpdates.js:176:22)
2016-02-22T18:04:34.126347+00:00 ip-10-91-33-137 example: { worker: 2,
2016-02-22T18:04:34.126496+00:00 ip-10-91-33-137 example: eventType: 'EXIT',
2016-02-22T18:04:34.126621+00:00 ip-10-91-33-137 example: extendedInformation:
2016-02-22T18:04:34.126744+00:00 ip-10-91-33-137 example: { code: 1,
2016-02-22T18:04:34.126894+00:00 ip-10-91-33-137 example: signal: null,
2016-02-22T18:04:34.127018+00:00 ip-10-91-33-137 example: cloisterMessage: 'Relevant error message likely above this log entry. See https://nodejs.org/api/process.html#process_exit_codes for details on exit code: 1' } }
The full stack would be helpful.
Sure, previous comment updated with the full stack trace.
In addition, I am also seeing the behavior reported here facebook/react#5383 (component is reporting _this.isMounted() on the server).
Any idea why I am forced to injectPreparedData on the server now, as well, to get the component to render there? I just realized I am doing this in componentWillMount on both the server and the client...I would like to avoid that. (Prior to taking the isomorphic-relay update, I was able to only injectPreparedData in the client and was getting server side rendering without this "hack".)
And yet...I am still hitting issues very similar to the one reported at isomorphic-relay-router mentioned in the description, above.
Some of your React components update after the render on the server. Check that your code do not call setState or forceUpdate on the server.
Any idea why I am forced to
injectPreparedDataon the server now, as well, to get the component to render there?
Most probably you do not pass the props returned by IsomorphicRelay.prepareData to IsomorphicRelay.RootContainer.
Right...I am not passing props through...I see that change in the documentation now. Let me see what I can do, thanks.
Ah...now I remember why I chose not to pass props. I am preparing the data in my controller and passing it via a payload to a load page handler in my fluxible setup. When I try to pass the props as well, I unfortunately encounter: Converting circular structure to JSON error, because unfortunately everything is being passed through JSON.stringify()...as far as I am concerned you can close this. I think I've tracked down why I haven't been able to use your latest version in my existing setup. As I refactor towards some better patterns I may have further questions which I will post here. Thanks...
Is the only reason for needing to pass along props (in the updated code) a result of this commit - i.e. we now care about passing relayContext as well, whereas before we only cared about the Component and route and so could just provide those in the render flow separate from any server prepareData concerns?
we now care about passing
relayContextas well
Correct.
before we only cared about the
Componentandrouteand so could just provide those in the render flow separate from any serverprepareDataconcerns?
I think, on the client you can pass Relay.Store as relayContext to make the server and the client render flows uniform.