Давайте создадим статический веб-сайт с внешним контентом.
В этом посте я покажу вам, как с помощью GatsbyJS можно статически отображать данные из любого источника данных.

ГэтсбиJS

Если вам нравится React и вам нужен высокопроизводительный веб-сайт, соответствующий стандартам, вам следует обратить внимание на GatsbyJS.

Что он делает?

Он скомпилирует ваш код React в коллекцию статических HTML-файлов.

Почему вас это должно волновать?

1. Максимальная производительность — когда пользователь просматривает вашу сеть, ни на стороне клиента, ни на сервере не выполняется ни один код!
2. Самые быстрые изображения — прогрессивная загрузка изображений в правильном разрешении для устройства пользователя.
3. SEO – статический HTML-код удобен для Google (роботов). Медленные веб-сайты наказываются поиском Google!
4. React — продуктивная фронтенд-разработка.
5. Машинописный текст: выявите ошибки до того, как их увидят ваши пользователи (необязательно, но настоятельно рекомендуется)!
6. Контент — подключайте и используйте множество готовых источников контента или добавляйте свои собственные!

Гэтсби JS-контент

GatsbyJS представляет контент в виде дерева узлов. Узел может быть изображением или блоком текста.
Например, сообщение в блоге представляет собой набор узлов текста и изображений.

Вы можете создавать узлы вручную в файле gatsby-node.js. Но есть более простые способы.

Плагины

Узлы создаются плагинами. Какой плагин вам нужен, зависит от выбранной вами CMS.
Самый простой вариант — плагин файловой системы, который превращает файлы в узлы.
Чтобы найти подходящий для вас плагин, загляните сюда

Плагин не найден

Если у вас есть источник данных, который не поддерживается существующими плагинами, давайте создадим свой собственный.

Процесс довольно прост, единственная сложная часть — это изображения.

Загрузка узлов

Создайте файл gatsby-node.ts (или js) в корневой папке вашего проекта gatsby.

Добавьте этот код, чтобы начать. Метод sourceNodes вызывается автоматически при сборке проекта Gatsby.

import { GatsbyNode } from "gatsby"
import { createRemoteFileNode } from "gatsby-source-filesystem"

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {
}

Теперь давайте получим наши данные. Здесь я использую платформу приложений https://inuko.net, но процесс для любого источника аналогичен.

interface IPost {
    id: string;
    title: string;
    content: string;
    image_id: string;
}
const fetchPosts = async () => {
    const postQuery = {
        entity: {
            name: "cms_content",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const posts = await fetchJson("/api/fetch", postQuery) as IPost[];
    return posts;
}

И давайте также получим изображения, которые нам понадобятся.

interface IImage {
    id: string;
    name: string; // sunset.jpg
    image_url: string; // https://sample.com/54565735235464322
}
const fetchImages = async () {
    const imageQuery = {
        entity: {
            name: "cms_image",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const images = await fetchJson("/api/fetch", imageQuery) as IImage[];
    return images;
}

Теперь у нас есть список сообщений (в блоге) и список изображений (ссылок).
В этом примере у нас есть простая структура, в которой каждое сообщение имеет текстовое содержимое и идентификатор одного изображения.

Следующий шаг — преобразовать данные, полученные с нашего сервера, в данные, которые сможет использовать Гэтсби.
Данные в gatsby представлены *узлами*, поэтому давайте посмотрим, как преобразовать данные нашего сервера в узел.

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {

    const posts = await fetchPosts();
    const images = await fetchImages();
    // create an object for image by id lookup
    const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage });

    for (const post of posts) {
        // create a node from post
        const postNodeId = createNodeId(`XPost-${post.id}`)

        if (post.image_id && imageDict[post.image_id]) {
            const image = imageDict[post.image_id];
            const name = image.name;
            const url = image.image_url;
            const fileNode = await createRemoteFileNode({
                url: url,
                //store,
                cache,
                createNode,
                createNodeId,
                // !!! important !!!
                // If your image url does not have a valid image extension, this will tell the system what type of image we are adding
                ext: name.substring(name.lastIndexOf(".")),
            });

            post.mediaFile___NODE = fileNode.id

            post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs

            const nodeMeta = {
                id: postNodeId,
                parent: null,
                children: [],
                internal: {
                    type: `XPosts`,
                    mediaType: `text/json`,
                    content: JSON.stringify(post),
                    contentDigest: createContentDigest(post),
                },
            }
            createNode(Object.assign({}, post, nodeMeta))
        }
    }
}

Мы перебираем все сообщения и создаем для каждого соответствующий узел.
Если в сообщении есть изображение post.image_id, мы также создаем узел RemoteFileNode и
добавить его в пост-узел
post.mediaFile___NODE = fileNode.id

Важное примечание: gatsby автоматически создаст узлы изображений из наших файловых узлов, но ему нужен способ определить, что это изображение.
Если ваши URL-адреса содержат расширения файлов или ваш сервер ответит типом контента изображения, все готово.
Если это не так, вы можете установить явное расширение узла файла (png, jpg), чтобы инициировать создание узла изображения.
расширение: name.substring(name.lastIndexOf("."))

Узлы изображения

Возможно, вам интересно, почему мы так заморачиваемся с загрузкой изображений в виде узлов. Мы могли бы просто использовать URL-адреса изображений напрямую.
Ну, иногда изображения могут находиться, например, за аутентифицированным сервисом.
Но настоящая причина в том, что мы хотим использовать фантастический плагин изображений, который предоставляет Gatsby.
Он автоматически преобразует изображения в лучший формат и размер для любого устройства, которое будет просматривать нашу сеть.
Это означает, что изображения будут загружаться быстрее и выглядеть лучше (и получат более высокую оценку от Google :).

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

Теперь мы готовы использовать созданные нами узлы.
Есть много способов сделать это. В этом примере мы создадим несколько публикаций и отобразим их на странице функций.

Сначала нам нужно загрузить интересующие нас узлы данных. Мы будем использовать useStaticQuery.
Затем мы передадим данные нашему многоразовому компоненту под названием DivisionGrid, который будет отображать все загруженные сообщения.

const FeaturePage = (props:{}) => {
    const data = useStaticQuery(graphql`
        query featuresQueryEn {
            allXPosts(
                filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}}
                sort: {position: ASC}
                ) {
              edges {
                node {
                  id
                  content
                  title
                  mediaFile {
                    childImageSharp {
                      gatsbyImageData
                    }
                  }
                }
              }
            }
          }
    `);

    return Features} />
}

Время рендеринга!

import { Link } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";

export const SectionGrid = (props: {data: any, title: string}) => {
    const edges = props.data.allXPosts.edges as any[];

    return 

        

            {props.title}
        
        {edges.map(edge => {
            const node = edge.node;
            return 

                

                    
                

                    
{node.title}
                    
{node.content}
                
            
        })}
    
}

Этот компонент будет перебирать все узлы, полученные из нашего запроса. И он отобразит два элемента div: один для изображения публикации и один для текстового содержимого.

Это завершение

Создать красивый и эффективный веб-сайт еще никогда не было так просто.
Такие инструменты, как Gatsbyjs (и его плагины), сделают за нас большую часть тяжелой работы.
Таким образом, мы можем посвятить 100 % своего времени контенту и дизайну.

Надеюсь, вооружившись этим постом, вы сможете еще больше автоматизировать свой рабочий процесс.
Теперь вы можете разместить на своем веб-сайте каталог продукции, базу знаний или другой ценный контент.
Без копипасты и с полностью автоматизированной обработкой изображений.

Удачного взлома!