You can load GraphQL queries over
.graphql files using Webpack. The package
graphql-tag comes with a loader easy to setup and with some benefits:
- Do not process GraphQL ASTs on client-side
- Enable queries to be separated from logic
In the example below, we create a new file called
You can load this file adding a rule in your webpack config file:
As you can see,
.gql files will be parsed whenever imported:
You can use and include fragments in .graphql files and have webpack include those dependencies for you, similar to how you would use fragments and queries with the gql tag in plain JS.
See how we import the UserInfo fragment from another .graphql file (same way you’d import modules in JS).
And here’s an example of defining the fragment in another .graphql file.