DEV Community

loading...
Cover image for GraphQL Static Site Generator (SSG)
GraphQL Editor

GraphQL Static Site Generator (SSG)

Tomek Poniatowicz
Pizza fanatic, Magic the Gathering addict, GraphQL enthusiast :)
・2 min read

Since its release, GraphQL has become increasingly popular and is being used by an ever growing number of development teams. Why? It's simple, GraphQL makes it easy to describe complex data relationships and can be utilized with any programming language. The growing popularity has generated a supply of tools to harness the power of GraphQL in many aspects of modern software development. One of the exmaples is GraphQL Static Site Generator

GraphQL SSG

GraphQL Static Site Generator (GraphQL SSG) is a simple bundler for GraphQL-based website using ES Modules. What makes it unique is that it uses browser instead of Node for bundling.

How to use it

Install GraphQL SSG globally using npm i -g graphql-ssg then initilaize the new project with graphql-ssg --init. which would create graphql-ssg.json in current directory. The package.json is not required but if you need type completions feel free to add one.

Next you need to setup a congfig which will hold:

  • a valid schema url
  • IN and OUT direcrotries
{
  "url": "https://graphql-pokemon2.vercel.app/",
  "in": "./pages",
  "out": "./out",
  "websocketPort": 1414,
  "port": 8080
}

Enter fullscreen mode Exit fullscreen mode

Config file is injected. It is available only inside export default and export const head function to prevent leaking of secrets.


const graphQLClient = Chain(ssg.config.HOST, {
  headers: {
    Authorization: `Bearer ${ssg.config.TOKEN}`,
  },
});

Enter fullscreen mode Exit fullscreen mode

How it works

String returned by export default is generated by SSG phase. If you want to have your preffered syntax coloring you will need to install the right LitElement extenstion for your IDE.

import { html } from './ssg/basic.js';
export default () => {
  return html`
    <div>Hello world</div>
  `;
};
Enter fullscreen mode Exit fullscreen mode

Built-in code syntax functions

GraphQL SSG comes with generated library storing injected usefull code syntax fuctions like:

Chain

Function which is a soft of equivalent to fetch in GraphQL, where you need to provide host and/or options to receive fully autocompleted client for schema url defined in your config:


import { Chain } from './ssg/index.js';
const graphQLClient = Chain(ssg.config.host);

const response = await graphQLClient.query({ people: true });

Enter fullscreen mode Exit fullscreen mode
head
import { html } from './ssg/basic.js';
export const head = () => html`<title>Hello world!</div>`;

Enter fullscreen mode Exit fullscreen mode
html

A function that provideds a basic syntax coloring:


import { html } from './ssg/basic.js';
const ADiv = html`
  <div>Hello world</div>
`;

Enter fullscreen mode Exit fullscreen mode
md

md is a function that uses remarkable renderer to render your markdown:

import { md } from './ssg/md.js';
const MarkdownContent = md`


# H1

Some nice text

## H2

Even nicer text

`;

Enter fullscreen mode Exit fullscreen mode

Still an early Alpha version

It's an ealry Alpha version so feedback and suggestions from the community are more than welcome! If you find a bug, have a feature request, or just want to contribute to this awesome project, feel free to an open issue and don't foget to leave a star :)

GitHub logo graphql-editor / graphql-ssg

GraphQL data based Static Site Generator.

GraphQL SSG

NPM Version Build

Simple bundler for GraphQL based website using esmodules. What makes it unique? It uses browser for bundling (not node). Remember in ESModules you can use URL imports and relative imports. You can also provide importmap for other imports

Installation

Install globally

npm i -g graphql-ssg
Enter fullscreen mode Exit fullscreen mode

How to use

Init a new project. This will create graphql-ssg.json in current directory. You don't need a package.json but you can add one for type completions.

graphql-ssg --init .
Enter fullscreen mode Exit fullscreen mode

Set up config.

{
  "url": "https://graphql-pokemon2.vercel.app/",
  "in": "./pages",
  "out": "./out",
  "websocketPort": 1414,
  "port": 8080
}
Enter fullscreen mode Exit fullscreen mode

So you need to provide your schema url in and out dirs for graphql-ssg

You can also add headers if needed:

{
  "headers": ["Authorization: Bearer MyToken"]
Enter fullscreen mode Exit fullscreen mode

Speed up your GraphQL API development

GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. Try GraphQL Editor for free!

New features of GraphQL Editor gif

Discussion (0)

Forem Open with the Forem app