Recently I've been playing around with GraphQL and Apollo. I haven't transitioned all our Gulp scripts to Webpack however (not sure we need to), so it took me a little trial and error to be able to load a GraphQL query stored in an include file using Gulp. Now that it's working, it really helps simplify development, through separation of the logic from the data management.

I'm using
 — substack/brfs: browserify fs.readFileSync() static asset inliner
 — stayradiated/gulp-brfs: Gulp plugin for substack's brfs
 — apollographql/graphql-tag: A JavaScript template literal tag that parses GraphQL queries

First I added gulp-brfs to the package.json using Yarn.

klokie at monarch in ~/Sites/enliven-article-templates on master
$ yarn add -D gulp-brfs

Then I integrated gulp-brfs into the Gulp builder task, piping the Javascript through brfs() to inline the GraphQL query:

const $ = require('gulp-load-plugins')()

function rebundle() {
  return bundler.bundle()
    .on('error', $.util.log.bind($.util, 'Browserify Error'))
    .pipe(source(destFileName))
    .pipe($.brfs()) // <-- that's the one!
    .pipe(gulp.dest(destFolder))
    .on('end', function() {
      reload()
    })
}

gulp.task('scripts', rebundle)

Then I created a static GraphQL query file app/lib/queries/queryNodeArticle.graphql, testing it out using the wonderful GraphiQL query builder.

{
  node_article(promote: true) {
    …
  }
}

Lastly, in my component:

import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

const fs = require('fs');
const path = require('path');

let queryNodeArticle = fs.readFileSync(path.join(__dirname, "app/lib/queries/queryNodeArticle.graphql"), "utf8");
queryNodeArticle = gql`${queryNodeArticle}`;

Now the query is available to the component.

Note: the GQL is now compiled at runtime. It would be nice to have that done at build time, for better performance.