Load your graphql documents with webpack (Apollo)

You can write queries and mutations in a .graphql file and directly import that into your JS code

One of the first things that people comment when talking about work with Graphql is about the colocation of the queries and the view component but sometimes this is more a problem than an advantage, for example, you need to reuse some query in multiple files, components or even packages, you are missing some editor highlighting or tooling support that can look the static file (static analysis). You cand read more about some of the benefits of static GraphQL queries in this blog post from the apollo folks

Well, graphql-tag give us some options to improve this situation, one is using the babel-plugin-graphql-tag that will help compiling the graphql tagged templates at build time. So you basically can write your queries inside a JS file and export as strings (tagged with the `gql` function) and then babel will take care of compile at build time and remove the `graphql-tag` dependency.

Other option is use the webpack loader provided with the package.

The webpack loader allows you to import queries/mutations from a single `. graphql` file (including import/export fragment definitions). This makes easy to store your GraphQL documents in a different “repository” than your view components, share fragments across the documents and fully support static analysis tools and editor features.

Using graphql webpack loader

To enable this features you just need to update your webpack configuration to add the corresponding loader like

Currently most of the apps written with Apollo Client are using the `gql` function to place the document inside JS template literals

module.exports = {
    module: {
        rules: [
           {
              test: /\.(graphql|gql)$/,
              loader: 'graphql-tag/loader',
              exclude: /node_modules/,
           }
        ]
    }
}

Then you just need to start moving your queries/mutation to a graphql document like:

query LoadAllComents($postId: String!) {
    id
    author
    content
    data
}

and then just import the query as any other js file

import LoadAllComments from './graphql/CommentsQueries.graphql'

Here, webpack will take care of load the `.graphql` file, parse it with the GraphQL parser and create the corresponding document.

You can also add multiple operations inside one `.graphql` file and imported them as named modules

import { LoadAllComments, OtherQuery } from './graphql/CommentsQueries.graphql'

And finally, you can also use fragments to split and reuse your code inside the queries. You just need to use the `#import` preprocessor provided by the loader.

First write the file that will contain the fragments

fragment CommentsFragment on Comment {
    id
    author
    createAt
    content
}

And then just import that into the graphql document.

#import "./fragments/CommentsFragments.graphql"
query Comments($postId: String!) {
    ...CommentsFragment
}

Other options

There is an option for those projects than don’t use webpack but still want to be able to import grapqhl documents, they can use babel-plugin-inline-import-graphql-ast

There is also a package that can be used to for those that can’t use the babel plugin: graphql-import

One step further

You can go further with this split and create a isolated package that store the shared graphql documents. This can be quickly done using yarn workspaces or lerna to create a monorepo. (You can read more here: awesome-monorepo, Why Babel is a monorepo, Go MonoRepo, Why Google use a monorepo? )

Just create a new package into your monorepo to store all the .graphql files, call it something like `@org/graphql`

Set the main entry of this package to src/index.js and inside this javascript file, just import/export the queries like:

export { AllComentsQuery, NewCommentMutation, UpdateCommentMutation } from './comments.graphql'

Now in your other packages, just add the new graphql package to the dependencies and then in the core just run

import { AllComentsQuery } from '@org/graphql'

All set!