20.05.2021 в 15:01

Генератор статических сайтов GraphQL (SSG)

С момента своего выпуска GraphQL становится все более популярным и используется все большим числом команд разработчиков. Почему? Это просто, GraphQL позволяет легко описывать сложные отношения данных и может использоваться с любым языком программирования. Растущая популярность привела к появлению ряда инструментов, позволяющих использовать возможности GraphQL во многих аспектах разработки современного программного обеспечения. Один из примеров - GraphQL Static Site Generator.

GraphQL SSG

Генератор статических сайтов GraphQL (GraphQL SSG) - это простой сборщик для веб-сайтов на основе GraphQL с использованием модулей ES. Что делает его уникальным, так это то, что он использует браузер вместо Node для объединения.

Как это использовать

Установите GraphQL SSG глобально, используя npm i -g graphql-ssg затем инициализируйте новый проект graphql-ssg --init ., в корне которого будет создан graphql-ssg.json. package.json является не обязательным, но если вам нужно дополнить текст, вы можете добавить его.

Затем вам нужно настроить конфигурацию, которая будет содержать:

действительный URL схемы
IN и OUT директории

graphql-ssg.json

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

Файл конфигурации введен. Он доступен только внутри функции export default и export const head, чтобы предотвратить утечку секретов.

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

Как это работает

Строка, возвращаемая пользователем export default, генерируется фазой SSG. Если вы хотите иметь желаемую расцветку синтаксиса, вам необходимо установить правильное расширение LitElement для вашей IDE.

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

Встроенные функции синтаксиса кода

GraphQL SSG поставляется со сгенерированной библиотекой, в которой хранятся введенные полезные функции синтаксиса кода, такие как:

Chain

Функция, которая является программным эквивалентом GraphQL fetch, где вам необходимо предоставить хост и/или параметры для получения полностью автозаполненного клиента для схемы, url определенной в вашем config:

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

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

head

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

html

Функция, обеспечивающая базовую окраску синтаксиса:

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

md

md - это функция, которая использует замечательный рендерер для рендеринга вашего markdown:

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


# H1

Some nice text

## H2

Even nicer text

`;

Все еще ранняя альфа-версия

Это еще альфа-версия, поэтому отзывы и предложения от сообщества более чем приветствуются! Если вы обнаружили ошибку, у вас есть запрос на добавление функции или вы просто хотите внести свой вклад в этот потрясающий проект, не стесняйтесь открывать проблему и не забудьте оставить звезду :)

Источник:

Forem logo

#NodeJS #GraphQL

432

Войти на сайт