Export Module In Front Of Function Vs At End

I am developing an app in GatsbyJS, and exporting one of my GraphQL fragments as such: import { graphql } from 'gatsby'; export const w300Image = graphql` fragment w300Image on

Solution 1:

TL:DR: You don't need to import fragment to use it in query with Gatsby

Gatsby pulls graphql fragments & queries out of your file and execute them independently. Because of this, exporting / importing graphql fragment works a little differently.

Since all query lives in the same namespace, once you export a named fragment in any of your files, it's available 'globally', i.e you can use it in other queries & fragment without importing them explitcitly.

This is why you can use the fragment GatsbyImageSharpFluid without importing it anywhere in your code.

Update: Gatsby only looks for query inside tagged template in named export i.e export const queryName = graphql``, this explains why it breaks when you switch export style.