У 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
вы передаете два аргумента:
- GET_USER_ARTICLES = ›Это GraphQL, который вы написали ранее. Его цель - указать, что должен возвращать API.
- {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. Ты сможешь:
- создавать, редактировать и удалять статьи
- получить ответы на свои статьи
- создавать, читать, редактировать и удалять ответы