React-apollo: getDataFromTree resolves before <Query> wrapped with React.forwardRef finish fetching data

[braska]

Intended outcome:
I have following code:

import React, { Component } from 'react';
import { Query } from 'react-apollo';
import infoQuery from './queries/info.graphql';

const Info = React.forwardRef((props, ref) => (
  <div ref={ref}>
    <Query query={infoQuery}>
      {({ data, loading, error }) => {
        if (loading) {
          return 'Loading...';
        }

        if (error) {
          return 'Error :(';
        }

        return 'Returned info: ' + data.info;
      }}
    </Query>
  </div>
));

export default class App from Component {
  infoRef = React.createRef();

  render() {
    return (
      <Info ref={infoRef} />
    );
  }
}

Actual outcome:
If I try to server render this App component I can't see any mentions of Returned info: ... in HTML response. I see only Loading....

It looks like getDataFromTree resolves Promise before Query actually finishes.

How to reproduce the issue:
I don't know any public platform where I can place SSR example (like codesandbox but for SSR), but you can copy-paste code from above.

Version

• [email protected]
• [email protected]

[seb-saletes]

Probably similar to this issue: https://github.com/apollographql/apollo-client/issues/3955

[braska]

@seb-saletes Yes, I think so. But I think this repo (react-apollo) is better place for this issue, because this problem related only to React.

[fubhy]

This also happens when wrapping a Query component in a Context Consumer (using the new Context API).

[gregmartyn]

@fubhy did you see https://github.com/apollographql/react-apollo/pull/2304?

[fubhy]

@gregmartyn Yep, but that's a different issue. If you look at the tests that were written for this PR, none of them actually have a Query component nested within a Context.Consumer.

[gregmartyn]

Ah right I see a Provider > Query > Consumer but no Provider > Consumer > Query

[benjamn]

This issue will be fixed by #2533, I believe.

[janek26]

This issue will be fixed by #2533, I believe.

Did a short test, and it seems to work now, great work :+1:
Unfortunately I'm currently unavailable to write some tests, or did your PR already contain tests for the Provider > Consumer > Query scenario?

[braska]

Looks like all works fine. Thanks!

[hwillson]

Fixed by https://github.com/apollographql/react-apollo/pull/2533.