{"id":19073,"library":"babel-plugin-import-graphql","title":"babel-plugin-import-graphql","description":"A Babel plugin (v2.8.1) that enables importing .graphql and .gql files directly in JavaScript/TypeScript code, converting them into GraphQL AST objects via graphql-tag. Supports schema files with #import syntax, operation/fragment files with all import variants, and emits .d.ts declarations. Requires graphql >=0.9.6 and graphql-tag >=2.1.0 as peer dependencies. Commonly used in Apollo projects to avoid string literals and manual parsing. Active but with infrequent updates (last release January 2021).","status":"active","version":"2.8.1","language":"javascript","source_language":"en","source_url":"https://github.com/detrohutt/babel-plugin-import-graphql","tags":["javascript","babel-plugin","apollo","graphql","gql","extension","import","inline"],"install":[{"cmd":"npm install babel-plugin-import-graphql","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-import-graphql","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-import-graphql","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for processing GraphQL schemas and operations","package":"graphql","optional":false},{"reason":"Peer dependency required when using runtime option or default import mode","package":"graphql-tag","optional":true}],"imports":[{"note":"The plugin transforms .graphql imports into AST objects. Using require may not work correctly if the plugin is configured for Babel.","wrong":"const myQuery = require('./query.graphql').default","symbol":"default import from .graphql/.gql","correct":"import myQuery from './query.graphql'"},{"note":"Named exports are supported for schema files that contain multiple operations; default import returns the entire parsed document.","wrong":"import myQuery from './queries.graphql'","symbol":"named import from .graphql/.gql","correct":"import { myQuery } from './queries.graphql'"},{"note":"Namespace imports are supported since v2.8.0; each named export becomes a property of the namespace object.","wrong":"import queries from './queries.graphql'","symbol":"namespace import from .graphql/.gql","correct":"import * as queries from './queries.graphql'"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\"import-graphraphql\"]\n}\n\n// query.graphql\nquery GetUser($id: ID!) {\n  user(id: $id) {\n    id\n    name\n  }\n}\n\n// index.js\nimport getUserQuery from './query.graphql'\nimport { useQuery } from '@apollo/client'\n\nfunction UserProfile({ userId }) {\n  const { data } = useQuery(getUserQuery, { variables: { id: userId } })\n  return <div>{data?.user?.name}</div>\n}","lang":"javascript","description":"Shows basic setup: Babel plugin configuration, a GraphQL query file, and import/use in a React Apollo component."},"warnings":[{"fix":"Prepend your start script with 'rm -rf ./node_modules/.cache/babel-loader' or use --reset-cache for React Native.","message":"Cache must be manually cleared after editing .graphql files: node_modules/.cache/babel-loader must be deleted.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Replace 'babel-plugin-inline-import-graphql-ast' with 'babel-plugin-import-graphql' in package.json and Babel config; minimum version 2.4.4.","message":"Old package name 'babel-plugin-inline-import-graphql-ast' is deprecated. The current package is 'babel-plugin-import-graphraphql'.","severity":"deprecated","affected_versions":"<2.4.4"},{"fix":"Use 'rimraf' or another cross-platform command to delete node_modules/.cache/babel-loader.","message":"Windows users cannot use 'rm -rf' to clear babel cache.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Upgrade to v2.8.0 or later for Node v12+ compatibility.","message":"Removed dependence on require.resolve to fix issues with Node v12.","severity":"breaking","affected_versions":"<2.8.0"},{"fix":"Store each type in a separate file if selective imports are needed.","message":"#import syntax in schema files cannot import specific types; entire file content is imported.","severity":"gotcha","affected_versions":">=2.6.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add 'import-graphql' to Babel plugins in your webpack config (typically via .babelrc or babel.config.js).","cause":"Webpack is trying to parse .graphql file without the babel plugin active.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Install graphql-tag: npm install graphql-tag","cause":"Missing peer dependency 'graphql-tag' when using runtime option.","error":"Cannot find module 'graphql-tag'"},{"fix":"Ensure you are importing the default export from the .graphql file, not a named export unless the plugin does not support named exports for that file type.","cause":"Using an outdated version or incorrect import syntax for the GraphQL AST.","error":"TypeError: Cannot read properties of undefined (reading 'kind')"},{"fix":"Use 'plugins': ['import-graphql'] in babel.config.js or .babelrc; ensure @babel/core is installed.","cause":"Babel 7 requires @babel/core; the plugin may not be properly added to the Babel config.","error":"Babel 7: .babelrc ignores plugins?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}