Gatsby

Gatsby генерирует статический HTML во время сборки и восстанавливает его на клиенте. Скрипты CDN должны загружаться только в браузерных API — gatsby-browser.js — правильное место для этого.

@wink/elements npm package Установите и загрузите CDN-бандл с типами TypeScript.

Установка

npm install @wink/elements

Загрузка через gatsby-browser.js

API onClientEntry запускается один раз, как только инициализируется runtime Gatsby в браузере:

import { load } from '@wink/elements';

export function onClientEntry() {
  load({ clientId: process.env.GATSBY_WINK_CLIENT_ID });
}

Переменные окружения

Gatsby передаёт в браузерный бандл только переменные, начинающиеся с префикса GATSBY_:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Использование на страницах и в компонентах

import React from 'react';

export default function HotelsPage() {
  return (
    <main>
      <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
      <wink-lookup />
    </main>
  );
}

TypeScript

Gatsby использует React, поэтому добавьте те же JSX intrinsic декларации, что и в интеграции React:

// См. /integrations/react для полного файла деклараций

gatsby-ssr.js — изменений не требуется

Вам не нужно изменять gatsby-ssr.js. Теги <wink-*> рендерятся как обычные HTML-элементы в статическом выводе, а скрипт CDN обновляет их при загрузке страницы в браузере.