How to import .graphql files with webpack

Question

Trying to import this file:

subscription onNewNotification {
    notification {
        id
        content
        seen
    }
}

I get this error when running babel-node to compile the whole thing: SyntaxError: .../graphql/NotificationSubscription.graphql: Unexpected token, expected ;

This is how my webpack loaders look like:

module: {
        loaders: [
            {
                test: /\.js?$/,
                include: [
                    path.join(__dirname, 'client'),
                    path.join(__dirname, 'server/shared'),
                ],
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react-hmre'],
                },
            },
            {
                test: /\.json?$/,
                loader: 'json-loader',
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' },

            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml' },
            {
                test: /\.(graphql|gql)$/,
                exclude: /node_modules/,
                loader: 'graphql-tag/loader',
            },
        ],


    },

No idea why this is happening, I'm following the Apollo docs and I don't see anything about this on google: http://dev.apollodata.com/react/webpack.html

Answer 1

Well, I am having the same problem too. After talk with on guy on apollo slack channel we start to debug and discover what is the problem. We discover that the problem was the 'babel-register' that in some kind of way trying to compile the .graphql files even with the rule to ignore. So there are two paths you can go:

• 1. Easier to do: Instead of creating a graphql file you can just create a js file to save your queries and create them using the gql function on react-apollo package and export it as a variable.
• 2. More sofisticated: If you use webpack you can create a configuration that will compile all your server code in one bundle and run the bundle using node (no babel-node or babel-register) like it is in GitHunt-React example (https://github.com/apollographql/GitHunt-React). It's not so simple like the first one but it's more elegant.