Relay: Missing docs for Relay Modern: <QueryRenderer> that renders a child component

[staylor]

As far as I can tell, there are zero docs and unit tests around rendering a <Component> that outputs a <Relay(ChildComponent)> as part of <QueryRenderer>'s render prop.

Example in the Relay docs (no child FragmentContainers):

<QueryRenderer
  ...
  render={({error, props}) => {
    if (error) {
      return <div>{error.message}</div>;
    } else if (props) {
      return <div>{props.page.name} is great!</div>;
    }
    return <div>Loading</div>;
  }}
/>

There are no examples of a rendered <QueryRenderer> on the Apollo post: https://dev-blog.apollodata.com/exploring-relay-modern-276f5965f827

My post has an examples, but uses ES7 decorators, which throw warnings in Flow and are possibly an anti-pattern: https://github.com/staylor/hello-world-relay-modern/blob/master/src/routes/Tools/Toolset.js

Why does this matter? The traditional cascade of a root component composing a query via a tree of children doesn't seem to always work, or maybe it is too confusing at the moment.

It's entirely possible that I am missing something obvious, but data-masking is preventing <Archive> from receiving posts here:

class Stickies extends Component {
  render() {
    return (
      <section className={styles.section}>
        <h3>Latest</h3>
        <QueryRenderer
          environment={environment}
          variables={{ total: 3 }}
          query={graphql`
            query StickiesQuery($total: Int) {
              stickies {
                results(first: $total) {
                  ...Archive_posts
                }
              }
            }
          `}
          render={({ error, props: renderProps }) => {
            if (error || !renderProps) {
              return null;
            }

            return <Archive posts={renderProps.stickies.results} infinite={false} />;
          }}
        />
      </section>
    );
  }
}

Once again, this might be user error - Docs for a example implementation that does the following would be great:

1. <Component> renders a <QueryRenderer>
2. <QueryRenderer> prop query contains a query with a spread fragment
3. <QueryRenderer> prop render composes a <Relay(ChildComponent)> and passes props from render
4. <Relay(ChildComponent)> renders with proper data

Thanks. Happy to help where I can.

[sibelius]

@staylor I have some examples of QueryRenderer that render a Component here: https://github.com/sibelius/ReactNavigationRelay/pull/5

[eugene1g]

The example looks reasonable, but depending on your specific error you may be bumping against a known issue with rc.2 https://github.com/facebook/relay/issues/1665

[jhalborg]

+1. I've found it very hard to reason about the role of QueryRenderer and fragment containers from the docs as well. I created an SO post for sparring on exactly this. I finally found the example repo Relay ToDo Modern that gave me some guidance, but that just led me to another issue which I wrote a bit about here