Gatsby: Why not make StaticQuery use Render Props?

[deadcoder0904]

Currently its using render prop (no pun intended 🙈) so why not just use render props? I think its more intuitive & unless there is a reason not to use it :)

Current Version

<StaticQuery
    query={graphql`
      query HeaderQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <header>
        <h1>{data.site.siteMetadata.title}</h1>
      </header>
    )}
  />

Render Props version

<StaticQuery
    query={graphql`
      query HeaderQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
  >
   {data => (
      <header>
        <h1>{data.site.siteMetadata.title}</h1>
      </header>
   )}
</StaticQuery>

Or does it already exist❓

[LekoArts]

It's alreay a render prop. Your version is just another way of doing it:
https://reactjs.org/docs/render-props.html#using-props-other-than-render

[mathieudutour]

Hum props.render !== props.children so I don't think it's a "render prop" per say (a bit confusing since a render prop is actually `props.children)

[LekoArts]

Nope. Read the official docs and have a look at the first example: https://reactjs.org/docs/render-props.html

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

[mathieudutour]

Yes sure, but the most common pattern is to use the children prop: https://reactjs.org/docs/render-props.html#using-props-other-than-render

See Downshift, react-motion, etc.

Edit: I just realised that we are saying the same thing, sorry haha. But I do agree with @deadcoder0904 that using the children props is more intuitive

[deadcoder0904]

That's what I thought too. I never read the docs or anything on Render Prop that's why I always wondered. But I think we should be able to do it like what I proposed because I think more people prefer that (just a guess) as it makes code easily readable for me at least :)

[williamtstanley]

Wouldn't be hard to allow both methods. If this.props.render exists use that otherwise call the children.

[KyleAMathews]

Yeah, adding support for both would be easy. It's a wild controversy which is "best" so agree why not support both since it's one line of code.