Fragments about graphql-tag

[stubailo]

Not right now, I had some ideas here: apollographql/apollo-client#994 (comment)

[jtmthf]

I've been hacking around on this and have a half-baked solution using the loader and @stubailo's idea of using a directive.

What works well is first declaring the directive in your schema. I've been using this declaration so far,

# Import a fragment from an external file
directive @import(
    # Path to import fragment from
    from: String!
  ) on FRAGMENT_SPREAD

As far as I can tell, graphql-js only provides a way to define custom directives, but not their runtime. This is fine though as @import would have no runtime implications. So far testing this on graphiql works great, and I assume it would on any other tool that reads a schema such as apollo-codegen and eslint-plugin-graphql.

Right now I have the loader set to parse the query using gql as it always has, but then visit the AST using something like this,

visit(ast, {
  Directive: {
    enter(node) {
      if (node.name.value === 'import') {
        const fromArg = node.arguments.filter(arg => arg.name.value === 'from')
        addImport(fromArg.value.value)
      }
      return node;
    }
  }
});

One thing to note is that the loader currently doesn't strip @import from the query. It doesn't really hurt or help to do so, although I'd appreciate some feedback on which approach is best.

Lastly, a require() is inserted for each import which brings the final emit to look something like,

`var fragments = ${imports.map(path => `require(${path})`)}
  
var query ${JSON.stringify(gql`${source}`)};

query.documents = query.documents.concat(fragments)

module.exports = query`

Overall not too complicated of a loader. Biggest concern of mine is if custom directives are considered taboo still, or if they are safe to implement.

[pasiba]

Good.