Gatsby: GraphQL Query inside a component

[peXed]

Hello!

I'm trying to query something inside a normal component (I want to get some imagesharp queries).

I found a (closed) issue (https://github.com/gatsbyjs/gatsby/issues/553) about this and there was an upcoming requireGraphQL function mentioned, but it is not yet implemented, am I right?

Is there another, new way to get a query done inside a component, which is not a layout or page?
I want to avoid pushing the query results down via a prop on the component.

Thanks!

[jquense]

There isn't a way to have a query, but you can expose fragments and compose them in your query. like how Post is defined then composed in the page

[peXed]

Thanks for the fast reply.

Hmm, but here the result from the query gets send over to the post component via a prop.
Is there no way to access the data, without adding it to to component? Otherwise you need to set the prop on all the components.

I guess I could use context, but this is not super clean.

[jquense]

you have to pass the data down to the component via props yes. I'd argue that is neater and easier to understand, but I can see why you may want to avoid it. In any case though there isn't much else we could do Gatsby doesn't render sub components, there isn't any way to really know what query result goes with which instance of any given component.

[darrylyoung]

I know this is closed but for anyone landing here with the same question, it's now possible (and extremely easy) with StaticQuery in Gatsby v2. See here.

[MattMcFarland]

sadly, StaticQuery doesnt work if you are setting environment variables to siteMetadata - so if I want to show if a user is logged in or not, and I am trying to access the auth endpoint from siteMetadata in my Layout component (or header, etc) - I can't because StaticQuery only works on a functional component. But I want that info before the component mounts, and I dont want it in a render function..