Сейчас я не буду вдаваться в подробности того, что именно GraphQL , но вы должны знать, что это язык запросов для ваших API, который принципиально отличается от старые добрые RESTful API. В GQL мы отправляем почтовый запрос к нашему API, а не делаем разные запросы для разных конечных точек.
Для получения разных данных мы можем просто сделать почтовый запрос к одной конечной точке для API, указав, какие данные нам нужны в запросе, который мы передаем.
https://graphql.anilist.co
Поскольку это будет очень простой учебник, я буду просто получать небольшой объем данных из API, но вы можете добавить к нему и масштабировать его, если хотите, в своем проекте.
Давайте сначала установим axios и создадим его экземпляр в нашем коде.
const axios = require("axios");
Теперь давайте приступим к построению нашего запроса, в котором мы указываем какие и сколько данных нам нужны.
А теперь давайте разберемся с этим. query - это начало нашего запроса, в котором мы должны инициализировать переменные, которые мы хотим использовать. По умолчанию API возвращает один объект результата, поэтому, если нам нужно несколько результатов, мы должны заключить наш media запрос в Page запрос. Запрос страницы также предоставляет поле pageInfo, которое предоставляет информацию о текущей странице и общем количестве результатов.
В запросе media происходит волшебство. Здесь мы можем просто передать переменную, которую мы передали в нашем parent query, чтобы получить соответствующие результаты, отфильтрованные по этой строке поиска. В моем примере я просто получаю идентификатор, заголовок, тип и жанры трех лучших аниме на основе рейтинга пользователей и поискового запроса (на момент написания), но вы можете получать разные типы данных и применять несколько типов сортировки. . Это тот тип гибкости, который GraphQL предлагает, значительно упрощая выполнение вызовов API. Вы можете ознакомиться со Справочным руководством по Anilist GraphQL здесь
Теперь мы можем передать значения переменных, которые мы инициализировали в нашем запросе, в отдельном объекте variables. Здесь я получаю только одну страницу результатов всего с 3 элементами.
Основная часть нашего кода готова. Теперь мы можем объединить все эти блоки кода с нашим вызовом api axios внутри асинхронной функции, и все будет ГОТОВО.
Вот как будут выглядеть данные результата, если я искал «шингеки».
Это… почти все. Теперь вы знаете, как получить данные о вашем любимом аниме с помощью всего нескольких строк кода. Я также использую это в своем собственном проекте: AniKo.
Если вам понравился этот урок, вы можете хлопнуть в ладоши и поделиться этим постом или даже купите мне кофе! Оценил;)
