{"id":22978,"library":"webpack-graphql-loader","title":"webpack-graphql-loader","description":"A webpack loader for .graphql files that provides schema validation, fragment imports, and supports both string and DocumentNode output. Version 1.0.2 is the latest stable release. The loader enables importing GraphQL queries, fragments, and schemas directly in JavaScript modules. It features an #import directive for composing GraphQL documents, optional minification, and integration with Apollo Client via DocumentNode output. Differentiators include built-in schema validation and unused fragment removal.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/stephen/graphql-loader","tags":["javascript","typescript"],"install":[{"cmd":"npm install webpack-graphql-loader","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-graphql-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-graphql-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for schema validation and DocumentNode creation","package":"graphql","optional":false},{"reason":"Peer dependency for TypeScript support","package":"ts-loader","optional":true}],"imports":[{"note":"Default import returns a string or DocumentNode depending on loader options","wrong":"const query = require('./query.graphql')","symbol":"default","correct":"import query from './query.graphql'"},{"note":"For TypeScript, you may want to type the imported value","wrong":"import { DocumentNode } from 'webpack-graphql-loader'","symbol":"DocumentNode","correct":"import { DocumentNode } from 'graphql'"},{"note":"Webpack configuration for the loader, not a JavaScript import","wrong":"module.exports = { module: { loaders: [{ test: /\\.graphql$/, loader: 'webpack-graphql-loader' }] } }","symbol":"loader configuration","correct":"module.exports = { module: { rules: [{ test: /\\.graphql$/, use: [{ loader: 'webpack-graphql-loader', options: { validate: true, schema: './schema.json' } }] }] } }"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nmodule.exports = {\n  entry: './src/index.js',\n  output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },\n  module: {\n    rules: [\n      {\n        test: /\\.graphql$/,\n        use: [\n          {\n            loader: 'webpack-graphql-loader',\n            options: {\n              validate: true,\n              schema: path.resolve(__dirname, 'schema.json'),\n              output: 'document',\n              minify: true\n            }\n          }\n        ]\n      }\n    ]\n  }\n};\n\n// src/query.graphql\n#import \"./fragments.graphql\"\nquery User($id: ID!) {\n  user(id: $id) {\n    ...UserFields\n  }\n}\n\n// src/fragments.graphql\nfragment UserFields on User {\n  name\n  email\n}\n\n// src/index.js\nimport query from './query.graphql';\nconsole.log(query); // DocumentNode object","lang":"javascript","description":"Configures webpack to load .graphql files with validation, minification, and DocumentNode output, including fragment imports."},"warnings":[{"fix":"Install graphql: npm install --save-dev graphql or yarn add --dev graphql","message":"The loader requires the graphql package as a peer dependency. Ensure graphql is installed in your project.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install ts-loader: npm install --save-dev ts-loader or yarn add --dev ts-loader","message":"When using TypeScript, ts-loader is a peer dependency. You must have ts-loader installed for TypeScript support.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use only within files processed by this loader; ensure other tools skip or are configured to ignore them.","message":"The loader uses #import statements within .graphql files. These are not standard GraphQL syntax and may cause issues with other tools.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use module.rules instead of module.loaders, and 'use' with an object for options.","message":"The webpack 1.x syntax using 'loaders' array is deprecated. Use 'rules' array with 'use' for webpack 2+.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run: npm install --save-dev graphql","cause":"Missing graphql peer dependency.","error":"Module not found: Error: Can't resolve 'graphql'"},{"fix":"Ensure the schema.json is accurate and the query matches the schema definitions.","cause":"The imported .graphql file contains a query that references fields not present in the schema.","error":"Validation failed: Cannot query field \"foo\" on type \"Bar\"."},{"fix":"Ensure your webpack configuration handles JavaScript or set output to 'string'.","cause":"Webpack cannot parse the output of the loader when output is 'document' because it's an object, not a string.","error":"You may need an additional loader to handle the result of these loaders."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}