{"id":15630,"library":"graphql-ssg","title":"GraphQL SSG","description":"graphql-ssg (version 0.4.8) is a static site generator (SSG) that specializes in bundling HTML from data feeds, particularly those powered by GraphQL. Unlike many Node.js-based SSGs, it uniquely performs bundling within a browser environment, leveraging native ESModules, URL imports, and import maps. This design choice aligns well with Web Components architectures, allowing for direct use of browser features for content generation. The project is currently in a pre-1.0 development phase, suggesting its API might evolve, but it provides a functional CLI for initializing, watching, and building projects. Key differentiators include its browser-centric bundling, automatic generation of typed GraphQL clients (via the `Chain` helper) based on configured schemas, and secure injection of configuration and environment variables into page-generating functions, preventing secret exposure. It supports both JavaScript and TypeScript page definitions for content creation.","status":"active","version":"0.4.8","language":"javascript","source_language":"en","source_url":"https://github.com/graphql-editor/graphql-ssg","tags":["javascript","react","graphql"],"install":[{"cmd":"npm install graphql-ssg","lang":"bash","label":"npm"},{"cmd":"yarn add graphql-ssg","lang":"bash","label":"yarn"},{"cmd":"pnpm add graphql-ssg","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Used to create a typed GraphQL client. The path is relative to your page file and depends on the name of your GraphQL schema defined in `graphql-ssg.json` (e.g., `../ssg/my-pokemon-schema/index.js`). This library is ESModules-only.","wrong":"const Chain = require('graphql-ssg/Chain');","symbol":"Chain","correct":"import { Chain } from '../ssg/{schema-name}/index.js'"},{"note":"A tagged template literal function that provides HTML syntax highlighting in IDEs, but does not transform the HTML. It's provided by `graphql-ssg` itself via a generated helper file, not `lit-html`.","wrong":"const html = require('lit-html').html;","symbol":"html","correct":"import { html } from '../ssg/basic.js'"},{"note":"A tagged template literal function that processes Markdown using a `remarkable` renderer and converts it to HTML. Similar to `html`, it's provided by `graphql-ssg` via a generated helper file.","wrong":"import { md } from 'markdown-it';","symbol":"md","correct":"import { md } from '../ssg/md.js'"}],"quickstart":{"code":"// Install globally: npm i -g graphql-ssg\n// Initialize project: graphql-ssg --init .\n// Configure graphql-ssg.json with a 'pokemon' schema pointing to 'https://graphql-pokemon2.vercel.app/'\n\n// ./pages/index.ts\nimport { html } from '../ssg/basic.js';\nimport { Chain } from '../ssg/pokemon/index.js'; // Path generated based on 'pokemon' schema name\n\nexport default async () => {\n  // ssg.config is injected and only available within export default/head\n  const graphQLClient = Chain(ssg.config.graphql.pokemon.url);\n  const response = await graphQLClient.query({\n    pokemon: [{ name: 'Pikachu' }, {\n      id: true,\n      name: true,\n      number: true,\n      types: true,\n    }],\n  });\n\n  const pikachu = response.pokemon;\n\n  return html`\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Pokemon SSG</title>\n    </head>\n    <body>\n        <h1>Hello, ${pikachu?.name || 'World'}!</h1>\n        <p>Number: ${pikachu?.number}</p>\n        <p>Types: ${pikachu?.types?.join(', ') || 'N/A'}</p>\n    </body>\n    </html>\n  `;\n};\n\n// To build your site: graphql-ssg --build\n// To watch for changes: graphql-ssg","lang":"typescript","description":"This quickstart demonstrates how to install `graphql-ssg` globally, initialize a project, configure a GraphQL schema, create a TypeScript page that fetches data using the generated `Chain` client, and then build the static HTML output."},"warnings":[{"fix":"Ensure your page files (e.g., `./pages/index.ts`) contain `export default () => html` or `export default 'Hello world';`.","message":"All page files (`.js`, `.ts`) *must* include an `export default` function or string to define the page content, otherwise they will not be processed correctly by the SSG. This is the primary mechanism for content generation.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Place any logic requiring `ssg.config` or `ssg.env` directly inside the `export default` function or an `export const head` function in your page files.","message":"Configuration (`ssg.config`) and environment variables (`ssg.env`) are strictly injected and accessible *only* within `export default` and `export const head` functions of your page files. Attempting to access them outside these contexts will result in `undefined` or runtime errors, designed to prevent secret leakage.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Install globally for convenient command-line access or ensure your `package.json` scripts correctly reference the local binary (e.g., `./node_modules/.bin/graphql-ssg`).","message":"The library is primarily designed for global installation (`npm i -g graphql-ssg`) as a CLI tool. While local installation is technically possible, typical usage and commands assume global availability.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Pin `graphql-ssg` to an exact version (e.g., `0.4.8`) in your `package.json` to prevent unexpected breaking changes during updates, and review release notes carefully before upgrading.","message":"As `graphql-ssg` is in a pre-1.0 version (currently 0.4.8), its API and internal mechanics may undergo breaking changes in minor or patch releases without explicit major version increments. Users should pin exact versions for production and review changelogs for updates.","severity":"breaking","affected_versions":"<1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add an `export default` statement to your page file, which should return the HTML content or a function that returns it, e.g., `export default () => html`.","cause":"A page file (e.g., `pages/my-page.ts`) does not contain an `export default` statement.","error":"Error: No default export found in file: {path-to-file}"},{"fix":"Move the code accessing `ssg.config` or `ssg.env` directly into the `export default` or `export const head` function to leverage the injected context.","cause":"Attempting to access `ssg.config` or `ssg.env` outside of the `export default` or `export const head` functions within a page file.","error":"Cannot read properties of undefined (reading 'config')` or `ssg is not defined"},{"fix":"Verify the relative import path (`../ssg/...`) matches the expected generated helper location based on your project structure and the schema name in your `graphql-ssg.json` file.","cause":"Incorrect import path for the generated `Chain` client, `html` helper, or `md` helper, or a GraphQL schema name mismatch in `graphql-ssg.json`.","error":"ReferenceError: Chain is not defined` or `Cannot find module '../ssg/{schema-name}/index.js"}],"ecosystem":"npm"}