{"id":20071,"library":"graphql-let","title":"graphql-let","description":"A webpack loader, Babel plugin, Babel macro, and CLI tool that wraps GraphQL Code Generator to provide zero-config, typed GraphQL imports with HMR support. Current stable version is 0.18.6, released periodically. It automatically generates TypeScript types and runtime hooks from .graphql files or inline gql tags, integrating seamlessly with webpack, Next.js, and Create React App. Key differentiators include minimal configuration, built-in HMR, and support for multiple entry points (loader, macro, plugin). Requires peer dependencies: @graphql-codegen/cli, @graphql-codegen/import-types-preset, @graphql-codegen/typescript, graphql, and TypeScript.","status":"active","version":"0.18.6","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/piglovesyou/graphql-let","tags":["javascript","graphql","generator","codegen","webpack","webpack-loader","babel","babel-plugin-macros"],"install":[{"cmd":"npm install graphql-let","lang":"bash","label":"npm"},{"cmd":"yarn add graphql-let","lang":"bash","label":"yarn"},{"cmd":"pnpm add graphql-let","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core code generation engine","package":"@graphql-codegen/cli","optional":false},{"reason":"Required for import types preset","package":"@graphql-codegen/import-types-preset","optional":false},{"reason":"TypeScript codegen plugin","package":"@graphql-codegen/typescript","optional":false},{"reason":"Runtime dependency for GraphQL operations","package":"graphql","optional":false},{"reason":"TypeScript compiler for type generation","package":"typescript","optional":false}],"imports":[{"note":"For webpack, use 'graphql-let/loader' as a loader, not a module import.","wrong":"import gql from 'graphql-let'","symbol":"default (webpack loader)","correct":"// In webpack config: { test: /\\.graphql$/, loader: 'graphql-let/loader' }"},{"note":"The macro entrypoint is separate: 'graphql-let/macro'. Using 'graphql-let' directly is incorrect.","wrong":"import { gql } from 'graphql-let'","symbol":"gql, load","correct":"import { gql, load } from 'graphql-let/macro'"},{"note":"For Babel plugin, import the named export 'gql' from the main package.","wrong":"import gql from 'graphql-let'","symbol":"gql (Babel plugin)","correct":"import { gql } from 'graphql-let'"}],"quickstart":{"code":"// .graphql-let.yml\nschema: 'schema.graphql'\ndocuments: 'src/**/*.graphql'\nplugins:\n  - '@graphql-codegen/typescript'\n  - '@graphql-codegen/typescript-operations'\n  - '@graphql-codegen/typescript-react-apollo'\n\n// src/query.graphql\nquery GetUser($id: ID!) {\n  user(id: $id) {\n    name\n    email\n  }\n}\n\n// src/App.tsx\nimport React from 'react';\nimport { useGetUserQuery } from './query.graphql';\n\nconst App: React.FC = () => {\n  const { data, loading, error } = useGetUserQuery({ variables: { id: '1' } });\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error.message}</div>;\n  return <div>{data?.user.name}</div>;\n};\n\nexport default App;","lang":"typescript","description":"Configures graphql-let with a YAML config, defines a GraphQL query, and uses the generated React hook in a component."},"warnings":[{"fix":"Regenerate with v0.18+ and adjust import paths to use the shared types.","message":"In v0.18.0, generated types were moved to a shared directory `graphql-let/__generated__/__types__`. Existing projects must update imports and regenerate.","severity":"breaking","affected_versions":">=0.16.0 <0.18.0"},{"fix":"Use `import { gql, load } from 'graphql-let/macro'` instead.","message":"The `gql` function from the main package is deprecated in favor of `graphql-let/macro` for babel-plugin-macros support.","severity":"deprecated","affected_versions":">=0.17.0"},{"fix":"Install all peer dependencies: `npm install --save-dev @graphql-codegen/cli @graphql-codegen/import-types-preset @graphql-codegen/typescript`.","message":"graphql-let requires both `@graphql-codegen/cli` and its presets as peer dependencies; missing them causes cryptic errors during code generation.","severity":"gotcha","affected_versions":">=0.16.0"},{"fix":"Create `.graphql-let.yml` in the project root or pass `configFile: './path/to/.graphql-let.yml'` in the loader options.","message":"The `.graphql-let.yml` config file must be in the project root or specified via `configFile` in webpack loader options; otherwise graphql-let silently fails.","severity":"gotcha","affected_versions":">=0.16.0"},{"fix":"Use `{ test: /\\.graphql$/, loader: 'graphql-let/loader' }` in webpack config.","message":"Using `require('graphql-let/loader')` in CommonJS is deprecated; use ES import or webpack loader string.","severity":"deprecated","affected_versions":">=0.18.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npx graphql-let` to generate the necessary TypeScript files.","cause":"Generated files are missing; graphql-let requires running its CLI to generate types.","error":"You need to run graphql codegen first. Run `npx graphql-let`"},{"fix":"Install the missing peer dependency: `npm install --save-dev @graphql-codegen/cli`.","cause":"Missing peer dependency @graphql-codegen/cli.","error":"Cannot find module '@graphql-codegen/cli'"},{"fix":"Ensure `schema` and `documents` paths in `.graphql-let.yml` are correct and files exist.","cause":"GraphQL schema or documents not found or malformed.","error":"TypeError: Cannot read properties of undefined (reading 'kind')"},{"fix":"Install graphql-let: `npm install --save-dev graphql-let`, and use the loader string `'graphql-let/loader'`.","cause":"graphql-let is not installed or the loader path is incorrect.","error":"Module not found: Error: Can't resolve 'graphql-let/loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}