search

denvned / isomorphic-relay

Adds server side rendering support to React Relay
BSD 2-Clause "Simplified" License
242 stars 53 forks source link

Still necessary to use injectBatchingStrategy? #23

Closed jeromecovington closed 8 years ago

jeromecovington commented 8 years ago

I am getting errors very similar to those in this issue - https://github.com/denvned/isomorphic-relay-router/issues/5#issuecomment-156822389

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?

jeromecovington commented 8 years ago

Or was this intended to remove the need to set up injectBatchingStrategy manually?

denvned commented 8 years ago

We don't need to set it manually anymore.

jeromecovington commented 8 years ago

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' } }
denvned commented 8 years ago

The full stack would be helpful.

jeromecovington commented 8 years ago

Sure, previous comment updated with the full stack trace.

jeromecovington commented 8 years ago

In addition, I am also seeing the behavior reported here https://github.com/facebook/react/issues/5383 (component is reporting _this.isMounted() on the server).

jeromecovington commented 8 years ago

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".)

denvned commented 8 years ago

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 injectPreparedData on 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.

jeromecovington commented 8 years ago

Right...I am not passing props through...I see that change in the documentation now. Let me see what I can do, thanks.

jeromecovington commented 8 years ago

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...

jeromecovington commented 8 years ago

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?

denvned commented 8 years ago

we now care about passing relayContext as well

Correct.

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?

I think, on the client you can pass Relay.Store as relayContext to make the server and the client render flows uniform.