Автор оригинала: Ondrej Polesny.
Услуги API отдыха, базы данных SQL, файлы Markdown, текстовые файлы, сервисы SOAP … Можете ли вы подумать еще один способ хранения и обмена данными и контентом? Производственные сайты обычно работают с несколькими различными услугами и способами хранения данных, так как вы можете сохранить реализацию чистыми и поддерживаемыми?
Каждый веб-сайт Node.js независимо от того, является ли это приложение одной страницы или обычный сайт, необходимо подключиться к стороннему обслуживанию или системе. По крайней мере, ему нужно получить контент от файлов Markdown или без головы CMS. Но потребность в других услугах быстро поверхностей. Во-первых, это контактная форма – вам нужно хранить свои представления. Затем это полнотекстовый поиск – вам нужно найти услугу, которая позволяет создавать индексы и поискать через них. И список продолжается и в зависимости от размера вашего проекта.
Что проблема с этим? Ну, ничего сначала. Когда вы мотивированы, чтобы закончить проект, вы создаете компонент для каждой из этих функций. Связь инкапсулирована в соответствующих компонентах, а после нескольких быстрых тестов вы счастливы все это работает. Клиент счастлив, что проект был доставлен до крайнего срока, и в качестве побочного эффекта вы также стали экспертом по контенту в качестве сервисной API, услугами подачи формы и автоматическим восстановлением индекса поиска.
У вас есть веб-сайт вверх и работает так быстро, что вам предложили! И знание проекта и его детали с вами.
Через несколько недель ваши коллеги просят выполнять некоторые изменения в проект. Клиент хочет использовать другой поставщик поиска, так как оригинал слишком дороги. Разработчики также работают над другим проектом, который нуждается в контактной форме, поэтому они думали о том же компоненте, но и храните представления в другом сервисе. Поэтому они приходят к вам спрашивать о специфике вашей реализации.
Когда вы, наконец, откажетесь от поиска своей памяти, им нужно будет сделать то же исследование, что и изначально выяснила реализацию. Уэй настолько тесно связан с функциональными возможностями, что, когда они хотят использовать компоненты, они, вероятно, в конечном итоге будут реализовывать их снова с нуля (и, возможно, скопированные биты и куски старого кода).
Так как мы можем избежать этих проблем, чтобы сохранить наш код, поддерживаемый и чистый? Посмотрите на графику выше, где разделил связь со сторонними службами и пользовательским интерфейсом. Особенности каждого внешнего обновления API реализованы в промежуточное программное обеспечение на задней панели веб-сайта. Компоненты на переднем конце все используют один способ для получения и отправки данных – GraphQL.
Так что такое Graphql и зачем использовать его для общения между передним и спиной? GraphQL – это язык запросов, протокол, который был основан именно для этой цели – для того, чтобы отделить данные, которые требуются интерфейсные потребности сайта от запросов, необходимых для их. Он похож на API для отдыха с точки зрения функциональности, поскольку он позволяет вам запросить данные. Для получения дополнительной информации проверить Главная страница GraphQL Отказ
Основное отличие в том, как вы просите данные. Допустим, новый разработчик на проекте поручено создать страницу блога. На странице должны отображаться сообщения в блоге, которые хранятся в безголовом CMS. Я использую Кентако облако , который является контентом в качестве платформы службы (CAAS), позволяющая хранить различные типы контента в четких иерархических структурах и получить содержимое через API для отдыха. Поэтому Получить Запрос данных, используя API для отдыха
Образец ответ будет: {“предметы”: [{“System”: {“ID”: “0282E86E-8C72-47F3-9D3D-2ACF93A8986B”, … “Last_Modified”: “2018-09-18T10: 38: 19.8406343 Z “},” Элементы “: {” Название “: {” Тип “:« Текст »,« Имя »:« Название »,« Значение »:« Привет из нового разработчика Евангелист »},« Содержание »: {..} …}}]}
Ответ содержит данные всех сообщений в блоге в форме JSON. Поскольку на странице отображается только список сообщений в блоге, много возвращенных данных (начиная с Content поле) являются избыточными, поскольку нам не нужно их отображать. Чтобы сохранить пропускную способность (которую вы обычно платите), разработчик должен будет использовать дополнительные Колонны , изображение, тизер
Они должны знать специфики API и, вероятно, имеют его ссылку, открытую в другом окне браузера во время создания запроса.
Получение тех же данных с graphql намного проще. Его схема изначально описывает, что способна рендеринга. Разработчик должен указать, какие данные для извлечения в графическом обозначении: запрос BlogPosts {getBlogposts {Elements {Teaser Image Image Teaser}}}
(Найти больше примеров запросов GraphQL в этом Почему graphql? Статья Шанкара Раджу.)
Теперь, когда вы решите переключить хранение контента от Zmsless CMS к файлам Markdown или базы данных SQL, реализация страницы блога не изменится. Запрос GraphQL все еще выглядит одинаково.
Как это возможно? Давайте на мгновение рассмотрим капюшон. Разделение реализации на передней части от внешних служб достигается с использованием следующих частей:
- Схема GraphQL
- Резольверы графов
- Apollo Server
Схема GraphQL очень похоже на диаграммы классов. Он указывает модели данных, как Blogpost или Formberbmission и запросы GraphQL.
Выше вы можете увидеть пример моделей данных схема простого сайта. Обратите внимание, что есть неопределенные типы, такие как SystemInfo или Актестемент Отказ Я опущел их в графике, поскольку они будут сгенерированы позже, автоматически генератор типа CMS без головы.
Запросы и мутации (вызовы, которые могут изменить и хранить данные), а затем опишите, как данные в этих моделях получаются и манипулируются, например, получать данные для Blogpost или отправка Formbordubmission. . Это похоже на диаграмму классов для среднего слоя данных сайта.
Резольветеры являются фактическими реализациями запросов, определенных выше, таких как Resolver MySQL, Resolver Centico, и другие. Они назначаются на конкретные запросы схемы и несут ответственность за обработку их. Поэтому, когда передний компонент хочет получить сообщения в блоге, используя запрос GraphQL getblogposts. , сервер выбирает и вызывает зарегистрированный Resolver для этого запроса (Centico Cloud Resolver). Resolver использует API отдыха безголового CMS для получения содержимого в JSON и предоставляет его в качестве массива объекта к компоненту.
В этом простом случае резольсоверы сопоставляются с запросами и мутациями 1: 1, но может быть подписан резолюстр, который может быть зарегистрирован как многие из них, поскольку он может обрабатывать. Resolver MySQL в настоящее время не имеет ничего общего, но позже может пригодиться при поддержке функциональности веб-сайта, и мы решили сохранить некоторые чувствительные пользовательские входы на местном уровне, используя базу данных.
Последний кусок головоломки является сервером Apollo. Это клей, который соединяет все эти части. APOLLO – это библиотека, каркас, которая соединяет схему GraphQL к HTTP-сервере в Node.js. Я лично использую Express как HTTP-сервер, но вы также можете Как подключить, редактировать или лямбда Отказ
У Apollo есть две части – сервер и клиент. Сервер работает как хост для схемы GraphQL и обрабатывает запросы GraphQL. Итак, всякий раз, когда внешний конец вызывает запрос GraphQL, Server Apollo Server смотрит на правый Resolver, ждет его для обработки данных и пропускает вдоль его ответа. Server Apollo часто используется в качестве простого преобразователя из любого сервисного интерфейса для Graphql, когда вам необходимо интегрировать с системой, которая не поддерживает GraphQL.
Client Apollo – это модуль, который подключается к передней части веб-сайта и обеспечивает выполнение запросов GraphQL.
В этой статье я объяснил, как отделить обеспокоенность, изолируйте сторонние сервисные разъемы и позволяют быстрое развитие интерфейсных компонентов с помощью GraphQL, не зная специфики всех используемых услуг.
Мой Следующая статья с Живая демонстрация Погружает больше в использование APOLLO с схемой GraphQL, показывает, как определить схему и реализуйте резольденты. Это также представляет котельной У всех этих инструментов настроены и готовы к вашему развитию.
Оригинал: “https://www.freecodecamp.org/news/how-to-make-your-website-clean-and-maintainable-with-graphql-13fe06098656/”