load query stored in GraphQL include file using Gulp
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.