Proposal: importing .graphql files should be enabled

[kjetilge]

Right now I need to eject in order to import .graphql files (using graphql-tag/loader) . I would think graphQl is some kind of core technology that should be supported out of the box ?

[pselden]

Ejected for this same reason.

[gaearon]

I’m open to supporting this, but is it Apollo-specific? Would it work for people using Relay Modern too?

[pselden]

I dont think it's apollo specific -- but I have not verified yet.

From this:

query ChannelsList {
  channels {
    id
    name
  }
}

You end up with this:

{
  "kind": "Document",
  "definitions": [
    {
      "kind": "OperationDefinition",
      "operation": "query",
      "name": {
        "kind": "Name",
        "value": "ChannelsList"
      },
      "variableDefinitions": [],
      "directives": [],
      "selectionSet": {
        "kind": "SelectionSet",
        "selections": [
          {
            "kind": "Field",
            "alias": null,
            "name": {
              "kind": "Name",
              "value": "channels"
            },
            "arguments": [],
            "directives": [],
            "selectionSet": {
              "kind": "SelectionSet",
              "selections": [
                {
                  "kind": "Field",
                  "alias": null,
                  "name": {
                    "kind": "Name",
                    "value": "id"
                  },
                  "arguments": [],
                  "directives": [],
                  "selectionSet": null
                },
                {
                  "kind": "Field",
                  "alias": null,
                  "name": {
                    "kind": "Name",
                    "value": "name"
                  },
                  "arguments": [],
                  "directives": [],
                  "selectionSet": null
                }
              ]
            }
          }
        ]
      }
    }
  ],
  "loc": {
    "start": 0,
    "end": 55,
    "source": {
      "body": "query ChannelsList {\n  channels {\n    id\n    name\n  }\n}",
      "name": "GraphQL"
    }
  }
}

[pselden]

Looks like Relay.QL is vastly different. It uses a precompiled schema and validates your graphql against it. Whereas graphql-tag/loader just spits out the document and handles imports (that also might be a graphql-tag/loader specific concept).

[notrab]

Yep, I'm having to eject too on a brand new project just to support this.

Really good if there were a way to bake this in, or even better add custom loaders somehow 🙌

[koistya]

As of Relay Modern, there must be "babel-plugin-relay" baked into the Babel config.

[notrab]

Has anyone had any further thoughts on how we best implement this?

Graphcool today announced graphql-cli and it would be awesome to submit a PR over there that CRA works out of the box with graphql-cli.

[gaearon]

Note this issue won't progress by itself. If you're interested in this please create a proof of concept, send a PR, help us understand whether it's Apollo-specific or not, etc. Thanks!

[iamclaytonray]

@gaearon - From what I have tested so far, it is Apollo-specific. Would a good alternative be to add both graphql-tag/loader and babel-plugin-relay to CRA to handle both use-cases?

[iamclaytonray]

If the above isn't a good alternative, I only see two other options:

1. Don't support it. Let users continue to eject from CRA to add this manually.

2. Someone (possibly myself) can write a Webpack Plugin to handle both Relay and Apollo. I have no idea what the implementation would look like or even if the two would play nicely together. I wish I had a better answer but I'd have to play around with it before giving anything concrete. Sorry 😞

(Or just support one. I don't see that as an ideal solution, though.)

[gaearon]

For Relay, I’d like to see if recently merged babel-plugin-macros support is enough.

For Apollo, it seems to me odd to hardcode a filetype loader to a specific library 😞 But maybe if apollo is in package.json we could do it automatically. The trick is how to make sure every ejected user doesn’t have to deal with config for this if they don’t use this.

[iamclaytonray]

I haven't seen babel-plugin-macros yet so I'll have to research it/dig through the source.

Ideally, we should have a global GraphQL plugin/loader that handles Apollo, Relay, and any other GraphQL lib/framework.

I'm not sure about a good solution to the last statement you made. For users who are not using GraphQL, it adds a bit more bloat to the node_modules but past that, it shouldn't affect the rest of the app. I'm not sure though

[iamclaytonray]

I'll note that if we come up with a good solution, I'm more than happy to submit a PR to close this issue.

[kentcdodds]

Someone could probably build a macro to support reading in .graphql files:

// some-file.js
import graphqlLoader from './graphql-loader.macro'

const query = graphqlLoader('./query.graphql')




// graphql-loader.macro.js
const {createMacro} = require('babel-plugin-macros')

module.exports = createMacro(graphqlLoaderMacro)

function graphqlLoaderMacro({references, state, babel}) {
  const {file: {opts: {filename}}} = state
  references.default.forEach(graphqlLoader => {
    const relativeQueryPath = graphqlLoader.parentPath.get('arguments')[0].node.value
    const queryPath = path.relative(filename, relativeQueryPath)
    // do the queryPath loading thing
    // replace graphqlLoader.parentPath with whatever you loaded...
  })
}

The cool thing is you could do this locally in your own project before it's even published to npm. All without having to configure anything at all. Then when someone's got a good working version they can publish it to npm and anyone can use it. It's 100% explicit what's going on and it works without any configuration necessary! 🎉