У Hashnode есть API, который можно использовать как угодно. Используя API, вы можете получать, создавать, редактировать и удалять статьи. Кроме того, вы можете управлять ответами и реакциями.

В результате вы можете использовать API для отображения статей вашего блога в других местах, например, в вашем личном портфолио.

Предварительные условия

Есть кое-что, с чем вам следует ознакомиться, прежде чем продолжить. В статье показано, как использовать Hashnode API, но не рассказывается о базовых технологиях.

Чтобы следовать руководству и реализовать приложение, вы должны иметь базовые знания о:

  • JavaScript
  • GraphQL
  • HTTP-запросы

Кроме того, у вас должна быть учетная запись Hashnode. Без лишних слов, давайте сразу же приступим!

Начните работу с Hashnode API

Вы можете посетить площадку API и ознакомиться с доступной документацией и схемой. Если вы не знакомы с GraphQL, docs определяет запросы и изменения, которые вы можете выполнять с данными. С другой стороны, schema - это описание данных. То есть он указывает, какие поля вы можете выбрать, какой объект они возвращают и так далее.

Прежде чем двигаться дальше, я советую вам попробовать и немного поиграть с ним.

Рисунок 1

На рисунке 1 выше вы можете увидеть простой запрос, извлекающий все избранные истории с первой страницы. Запрос такой:

{
  storiesFeed(type: FEATURED, page: 0){
    title
    brief
    slug
  }
}

Однако вы также можете вытащить статьи конкретного пользователя. Возьмем для примера моего пользователя и блог. Вы можете получить все мои статьи с первой страницы с помощью следующего запроса:

{
  user(username: "catalinpit") {
    publication {
      posts(page: 0) {
        title
        brief
        slug
      }
    }
  }
}

Примечание: хотя в обоих запросах я выбрал только title, brief и slug, вы можете выбрать больше полей. Как упоминалось ранее, проверьте документы и схему, чтобы узнать, какие запросы / изменения вы можете выполнять и какие поля доступны.

Аутентификация - токен персонального доступа Hashnode

Некоторые запросы и мутации требуют аутентификации, которая основана на токенах личного доступа. Вы можете получить свой PAT (токен персонального доступа) в настройках разработчика.

фигура 2

Вы можете получить новый PAT, нажав кнопку с надписью Generate New Token. Получив токен, вы можете использовать его с HTTP-заголовком Authorization, где токен является значением.

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

Получите свои статьи

Давайте создадим приложение Vanilla JavaScript, которое вы будете использовать для получения статей о Hashnode. Первый шаг - создать два файла. Создайте файл с именем index.html и еще один с именем app.js.

После создания файлов откройте HTML-файл index.html и напишите следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hashnode API Example</title>
</head>
<body>
    <script type="text/javascript" id="articles" src="app.js"></script>
</body>
</html>

Файл HTML не слишком сложен. Вы устанавливаете заголовок веб-страницы и связываете файл JavaScript.

Функция выборки

Вы проделаете всю работу в файле JavaScript. Откройте файл app.js и напишите следующий код:

async function gql(query, variables={}) {
    const data = await fetch('https://api.hashnode.com/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            query,
            variables
        })
    });

    return data.json();
}

Вы используете вышеуказанный метод - gql - для получения данных из Hashnode API.

Как видите, он использует метод выборки для отправки POST-запросов к https://api.hashnode.com/. В запросах POST вы также передаете запрос и дополнительные переменные. Примером дополнительной переменной может быть номер страницы.

Запрос GraphQL

Вы можете использовать запросы GraphQL прямо в функции gql сверху. Однако при написании сложных запросов может возникнуть путаница. Кроме того, вы не можете повторно использовать функцию, если используете запросы прямо в функции gql.

const GET_USER_ARTICLES = `
    query GetUserArticles($page: Int!) {
        user(username: "<your_Hashnode_username>") {
            publication {
                posts(page: $page) {
                    title
                    brief
                    slug
                }
            }
        }
    }
`;

Таким образом, вы можете хранить свои запросы GraphQL в константе, как показано во фрагменте кода выше. Вы сохраняете каждый запрос в своей константе. Кроме того, запрос принимает переменную page, чтобы вы могли получать статьи с определенной страницы.

Получить данные

На этом этапе вы загружаете свои статьи с первой страницы. При вызове функции gql вы передаете два аргумента:

  1. GET_USER_ARTICLES = ›Это GraphQL, который вы написали ранее. Его цель - указать, что должен возвращать API.
  2. {page: 0} = ›Страница, с которой нужно получить статьи.
gql(GET_USER_ARTICLES, { page: 0 })
    .then(result => {
        const articles = result.data.user.publication.posts;
        let container = document.createElement('div');

        articles.forEach(article => {
            let title = document.createElement('h2');
            title.innerText = article.title;

            let brief = document.createElement('p');
            brief.innerText = article.brief;

            let link = document.createElement('a');
            link.innerText = 'Read more...';
            link.href = `https://catalins.tech/${article.slug}`;

            container.appendChild(title);
            container.appendChild(brief);
            container.appendChild(link);
        })

        document.querySelector('.app').appendChild(container);
});

А как насчет result.data.user.publication.posts из третьей строки? Давайте посмотрим на рисунок 1 ниже.

Рисунок 1

Если вы посмотрите на рисунок 1, вы увидите, что функция gql возвращает объект с именем «данные». Объект «данные» возвращает объект «пользователь». «Пользователь» возвращает объект «публикация». И, наконец, «публикация» возвращает массив «posts». Таким образом, со строкой result.data.user.publication.posts вы получаете доступ только к статьям своего блога.

После этого вы сохраняете массив в константе с именем articles. Когда у вас есть массив сообщений, вы используете метод forEach для циклического перебора каждой статьи из массива. Для каждой статьи вы создаете заголовок, абзац и ссылку. Затем вы добавляете элементы в контейнер div.

Следующим шагом будет отображение данных на вашей странице.

Данные дисплея

Внизу файла app.js напишите следующий код:

document.getElementById('articles').parentNode.innerHTML = `
<div class="app">
    <h1 class="app-heading">Catalin Pit's Articles</h1>
</div>`;

С помощью следующего кода вы создаете div, который будет содержать ваше приложение. Внутри этого div вы создаете заголовок, и все готово.

Если вы сейчас посетите свою HTML-страницу, вы должны увидеть следующее:

фигура 2

Примечание. Ваша веб-страница может отличаться, потому что вы (должны были) использовать свое имя пользователя. У вас должны быть разные статьи и заголовок.

Вывод

Таким образом, вы можете отображать статьи из своего блога Hashnode с помощью API.

В этой статье вы можете увидеть базовый пример получения ваших статей. Однако вы можете сделать гораздо больше с помощью API. Ты сможешь:

  • создавать, редактировать и удалять статьи
  • получить ответы на свои статьи
  • создавать, читать, редактировать и удалять ответы