Can't import getDataFromTree or renderToStringWithData

[GRardB]

Long story short: I'm making a universal React app, so I've got an Express server to render the DOM. My page loads, but it doesn't seem like this.props.data gets populated until the client-side JS takes over.

Is this intended? If so, is there a way to change it? If not, what may I be doing wrong? I can provide code if necessary, but there's a lot of it, so I'm not sure where to start.

If it matters, I'm also mocking the server with graphql-tools, so the GraphQL "API" and the SSR are happening on the same express server.

Edit: Poking around, it looks like this.props.data.loading is true on the server, so I assume that it's asynchronous and the HTML gets rendered before the response comes back. Is there a way to make it wait until it gets the data?

Edit 2: I just noticed that the docs have a section on this! But for some reason, I'm getting this error:

Unhandled promise rejection (rejection id: 1): TypeError: s.getDataFromTree is not a function

Edit 3: Same issue with renderToStringWithData:

Unhandled promise rejection (rejection id: 1): TypeError: s.renderToStringWithData is not a function

Edit 4: I think I found the issue? dist/index.js doesn't export (or define) getDataFromTree or renderToStringWithData. If I import node_modules/react-apollo/lib/index or ``node_modules/react-apollo/src/index`, it works.

I can't figure out why npm run compile:browser doesn't put the exports into dist/index.js. I'll keep digging around, but I don't know anything about Browserify or NPM packages 😰

Edit 5: I no longer think that dist/index.js has anything to do with the issue, and it seems like even if I delete that and lib/index.js, I can import everything that gets exported from the browser module. I'm truly lost about what the problem is.

[bs1180]

This threw me as well. The browser build deliberately doesn't feature the getDataFromTree or renderToStringWithData utilities because they're intended for server use only. The imports should work normally in your standard server code, and if you're transpiling that with webpack (for typescript support or something) then you can change the target value. If you definitely need the utilities in your client side code, then you can do import { getDataFromTree } from 'react-apollo/lib/index.

[GRardB]

Hey Ben,

Thanks for the response! I am indeed compiling this code with webpack, but I do have target: 'node' set. Weird.

I actually did end up doing the same import trick! I wrote a TODO to remind me to fix it later, but perhaps it's not necessarily "broken." I'll make a note to see if I can figure out why webpack isn't bundling the correct file.

[tmeasday]

Hey @GRardB, if you can figure out what the problem is, maybe post it here. It certainly sounds like webpack is using the browser field in your case, I'm not sure why though. If we can figure out when you need to use this workaround, we should document it somewhere.

Here's the PR where the change was made, out of interest: #306

[adamsoffer]

I'm also using React Apollo in my universal app with Next.js and this is an issue for me as well -> adamsoffer/next-apollo-example#2

Could we include getDataFromTree in the browser build? Are there any drawbacks to this?

[stubailo]

Maybe this could be one motivation for creating a separate react-apollo-ssr package or something. We thought browser would be a good solution but I guess it doesn't work well with Next, for example.

[adamsoffer]

Cool. Well I can use import { getDataFromTree } from 'react-apollo/lib for the time being. Not a big deal.

[adamsoffer]

@stubailo I realized I simply had to put getDataFromTree inside an isServer conditional and it worked fine with Next :)

In fact, I think my Next + React Apollo example is ready for showtime if you want to take a look 😄
https://github.com/ads1018/next-apollo-example

I'm currently using graph.cool for my example but I can use apollostack/frontpage-server if we want to showcase an "official" hello world next+apollo example on the dev.apollo homepage.

[GRardB]

I started a second project with react-apollo, and I'm not running into this problem, so I'm going to go ahead and close this. I'm not sure why it's affecting my other project, but it's not a big deal either way.