graphql-tag/loader with webpack hot load

[developerworks]

   
    ERROR in ./src/components/role/projects.graphql
    Module parse failed: /Users/hezhiqiang/webpack2/src/components/role/projects.graphql Unexpected token (1:6)
    You may need an appropriate loader to handle this file type.
    | query RoleIndex {
    |   roles {
    |     id
     @ ./src/components/role/RoleIndex.js 21:0-49
     @ ./src/App.js
     @ ./src/index.js
     @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/index

Compile time no errors, but when modify a module that include the .graphql file, the error raised.

Webpack version: 2.4.1

[developerworks]

webpack loader config

{
  test: /\.graphql$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'graphql-tag/loader'
    },
  ]
},

[jnwng]

just to confirm - what version of graphql-tag are you using?

[derailed]

+1 Same issue. Using graphql-tag@2.1.0

[Gregoirevda]

Same for me

[wealth]

you probably missed adding .gql to extensions in webpack config:

	resolve: {
		extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.gql', '.graphql'],
		modules: [
			path.resolve(__dirname),
			'node_modules',
		],
	},

			{
				test: /\.(graphql|gql)$/,
				exclude: /node_modules/,
				loader: ['graphql-tag/loader'],
			},

works with "graphql-tag": "^2.4.2"

[Gregoirevda]

I had a problem with create-react-app and react-app-rewired: This enables a webpack config change in the create-react-app cli so Webpack can load .graphql files.
This way I can use create-react-app and .graphql files.

The solution was:

function rewireGraphQL(config) {
  //Exclude .graphql files from the file-loader
  config.module.rules
    .find(conf => conf.loader && conf.loader.includes('file-loader'))
    .exclude.push(/\.(graphql|gql)/);

  //Add loader for graphQL files
  config.module.rules.push({
    test: /\.(graphql|gql)$/,
    use: ['graphql-tag/loader']
  });

  return config;
}

module.exports = function override(config, env) {
  rewireGraphQL(config, env);
  return config;
};

[tb]

For usage with latest create-react-app / react-app-rewired check
tkvw/react-app-rewire-graphql-tag#1

[mihaiserban]

Any progress on this?
with the above webpack configurations i can't get webpack to recompile .js with modified .gql files.

[DevanB]

I too have encountered similar issues recently, and can't figure out how to get it working.

I get an error like:

Uncaught Error: Argument of /static/media/sendMagicLink.b104ee3d.graphql passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document

It seems the GraphQL document is being processed because it has a hash added, but maybe isn't being turned into a function?

[rikoz]

I'm currently facing same issues, please what's the solution to this?

[cdvalur]

I am also facing same issue. i have tried all ways described above but not able to resolve it.
Any one found solution?

[redblue9771]

  config.module.rules
    .find((item) => item.oneOf)
    .oneOf.unshift({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      use: ["graphql-tag/loader"],
    });

This is my solution～