GraphQL - одна из самых интересных новых технологий, появившихся за последние годы. Это отличный инструмент для разработчиков, позволяющий управлять необходимыми данными из API. Основная идея GraphQL:
`Получение того, что вам нужно, ни больше, ни меньше`
Эта концепция может помочь свести к минимуму полезные нагрузки вашего API и помочь разработчикам запрашивать данные, которые им могут понадобиться в приложении, а не управляться сервером.
Теперь предположим, что мы пишем веб-приложение, которое извлекает данные из конечной точки GraphQL и использует их для визуализации веб-страницы. Какое решение приходит на ум в первую очередь?
npm i <popular-graphql-client-library> ?
Теперь, прежде чем вы начнете раздувать папку node_modules, подумайте о своем варианте использования. Вы действительно хотите платить библиотечный сбор? Особенно, если вы можете решить свою проблему вообще без каких-либо внешних зависимостей?
Хотя существуют допустимые случаи использования таких библиотек, как Apollo или Relay, они не обязательно должны быть подходящим решением для взаимодействия с GraphQL API. Написание легкого клиента GraphQL можно упростить, используя ванильные функции JavaScript, такие как выборка, обещания и строковые шаблоны. В некоторых примерных сценариях может быть создание тонкого клиента с минимальными зависимостями или создание прототипа решения.
Давайте создадим простую форму, которая может взаимодействовать с GraphQL API и искать книги по названиям. Мы будем использовать только HTML5, CSS3 и ES6 JavaScript.
Во-первых, у меня есть сервер GraphQL, работающий на localhost:3000, который возвращает список из пяти книг.
У меня простая HTML-страница с несколькими стилями
Теперь в нашем script.jsfile мы выберем нашу форму и добавим прослушиватель событий.
const bookContainer = document.querySelector("#book-container");
const form = document.querySelector("#book-search");
const loadBooks = (ev) => {
ev.preventDefault();
}
form.addEventListener("submit", loadBooks)
Функция loadBooks вызовет GraphQL API, используя встроенную выборку. Но перед этим давайте добавим функцию для построения запроса.
const getBooksQuery = keyword => `{ allBooks(filter: { q:"${keyword}"}) { author title url } }`;
Наша функция построителя запросов возвращает строку, которая будет искать названия книг по ключевым словам и возвращать список совпадений. Мы достигаем этого с помощью фильтра в запросе. Поскольку нас интересует только информация об авторе, название книги и URL-адрес для отображения списка книг, мы запрашиваем только эти поля с нашего сервера GraphQL. Таким образом GraphQL помогает нам получать только те данные, которые нам нужны.
Мы конкретизируем вызов сервера в обработчике отправки.
Сначала мы получаем значение ключевого слова поиска из формы ввода и создаем объект options для отправки запроса POST. Мы передаем ключевое слово нашей функции построителя запросов и получаем строку запроса, которую необходимо передать обратно в GraphQL API. Мы добавляем renderBooks метод, который покажет список книг в виде простых карточек.
Вот как это выглядит полностью.
Конечный результат:
Вот некоторые другие варианты использования, которые можно обработать:
- Использование фрагментов - у нас могут быть функции, возвращающие строки как фрагменты, и просто добавлять их в основной запрос по мере необходимости.
- Множественные запросы - каждый запрос можно записать как отдельную функцию.
Вот и все. Теперь вы можете взаимодействовать с сервером GraphQL и сохранять свой клиентский код как можно более минимальным с нулевыми зависимостями. Стройте потрясающие вещи!
