Recurse through #import in GQL files

amcvitty commented 5 years ago

I'm trying to upgrade our app to Create React App 2.0 right now and in the process switching from graphql-tag/loader (used with some custom config in react-app-rewired)

So our syntax changes from

import QUERY from "myquery.gql"

to

import { loader } from "graphql.macro";
const QUERY = loader("myquery.graphql")

So that's fine, but I'm noticing that the #import macro also doesn't work like in graphql-loader.

If I have

myquery.gql:
#import "fields.gql"

query { 
  myobject {
    ...Fields
  }
}

fields.gql:
#import "subfields.gql"

fragment Fields on myobject {
  field1 { 
    ...SubFields
  }
} 

subfields.gql:

fragment SubFields on Field1 { 
   subfield1
   subfield2
}

The query that results is just


fragment Fields on myobject {
  field1 {
    ...SubFields
  }
}

{
  myobject {
    ...Fields
  }
}

That is - it doesn't recurse and parse the imports in the file it's imporing to do that second level of importing. We have a few objects with nested references to other objects and to avoid duplicating the same common fields in those objects we make frequent use of this.

The workaround right now is to make sure all the nested fragments are explicitly imported in the query, which is not super hard, but it gets more tricky if you want to add an import in a fragment that is used in multiple queries because you have to find and update all those queries. In short, I preferred the graphql-loader implementation.

So - is this a deliberate choice, or could this behaviour be added here?