You can use .graphql files even if you can't use webpack

This is mainly an announcement post for people already using GraphQL, so I'm not going into detail about what GraphQL is.

'Vanilla' GraphQL:

Most people using GraphQL just use the gql template literal tag.

// use.js
import gql from 'graphql-tag'
const query = gql`query myQuery { myField }`
console.log(query)

Separate files with webpack loader:

The above can quickly litter your code though, so many people prefer to use the webpack loader offered by the graphql-tag package. This allows moving GraphQL code into its own files for more separation of concerns, syntax highlighting, etc.

// query.gql
query myQuery { myField }

// use.js
import query from './query.graphql'
console.log(query)

Other Options:

Not everyone can use webpack. A few cases where this might be true are:

• Using Next.js
• Using React Native
• Using Create-React-App before ejecting your app

I've created a couple of packages for these scenarios. For the first two cases (or any case where you have access to babel plugins but not webpack) there's babel-plugin-inline-import-graphql-ast

For the third case, I made a wrapper package around the first, react-app-rewire-inline-import-graphql-ast

If you try either of these out, let me know what you think!