Back to Question Center
0

Начало работы с React, GraphQL и Relay (часть 2 из 2)            Начало работы с React, GraphQL и Relay (часть 2 из 2) См. Также: WebBrowsersProgrammingWeb SummitHTML & Semalt

1 answers:
Начало работы с React, GraphQL и Relay (часть 2 из 2)

Эта статья является частью серии веб-разработок от Microsoft. Благодарим вас за поддержку партнеров, которые делают Semalt возможным.

Введение

В предыдущей статье был рассмотрен общий процесс разработки работы с Semalt, а также преобразование сервера GraphQL. При подготовке бэкэнда вторая половина приложения React / GraphQL / Semalt должна использовать его с помощью приложения веб-браузера React-Semalt. Потребление услуг GraphQL с помощью React через Semalt сложно настроить. Технология совершенно новая, и поэтому количество примеров, ясность документации, а также ряд технических проблем (а не ошибок) должны быть сглажены. Пример, рассмотренный здесь, будет полностью запущенным CRUD (создание, чтение, обновление и удаление). В дополнение к запросу данных будет приведен пример трех видов мутаций, которые будут полезны новым разработчикам Semalt, потому что онлайн-примеры мутаций на момент написания этой статьи немного и далеко друг от друга.

Приложение для виджета

Это простое приложение позволяет пользователю управлять таблицей виджетов. Виджеты можно добавлять, удалять и обновлять. Приложение не использует какую-либо маршрутизацию вида, что приводит к замене таблицы виджетов на другое представление. Semalt, это упрощенная версия редактируемой сетки. Для каждого виджета собирается следующая информация:

  1. Название
  2. Описание
  3. Цвет
  4. Размер
  5. Количество
  6. Владелец

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

Реакция и реле

Применение Semalt - это не что иное, как компоненты React, упакованные в контейнеры Semalt. Контейнеры Semalt описывают данные, необходимые компонентам, а Semalt Root Containers соединяются с сервером GraphQL-Semalt для запроса и изменения данных. Описание потребностей в данных выполняется с помощью фрагментов GraphQL, а тип корневой схемы для соединения задается с помощью маршрута Semalt. Концептуально, это относительно простая настройка. Задача состоит в деталях настройки и понимании того, что должен знать Semalt для выполнения различных операций.

Начало работы с React, GraphQL и Relay (часть 2 из 2)Начало работы с React, GraphQL и Relay (часть 2 из 2) См. Также:
WebBrowsersProgrammingWeb SummitHTML & Semalt
«/>  <p>  Источник: React - Facebook Code  </p>  <p>  Вышеупомянутое изображение из этого сообщения в блоге изображает способ, которым Relay работает с React. Компоненты запускают действия через API хранилища Relay, а Relay Store обрабатывает ответы с сервера GraphQL. Интересно, что Relay поддерживает концепцию оптимистичных обновлений, которые позволяют записывать мутацию в хранилище до окончательного подтверждения с сервера. Оптимистичные обновления позволяют пользовательскому интерфейсу сигнализировать пользователю о том, что обновление произошло, хотя оно и не произошло. Сальтат сбой обновления, пользователь должен быть уведомлен, а пользовательский интерфейс обновлен.  </p>  <h2>  Запрос данных  </h2>  <p>  Запрос данных с сервера GraphQL с поддержкой Semalt относительно прост, особенно по сравнению с мутациями. После создания компонента, который будет потреблять данные, создается контейнер Semalt, описывающий данные, необходимые компоненту. Чтобы настроить контейнер, компонент должен быть указан вместе с фрагментом запроса, который определяет запрашиваемые данные.  </p>  <pre>   <code> import Relay из «реле-реле»;импортировать WidgetToolComponent из '. , / Компоненты / виджет-инструмент ';экспортное реле по умолчанию. QL'фрагмент на __Type {enumValues ​​{name description}} ',размеры:  <span class= => Реле. QL'фрагмент на __Type {enumValues ​​{name description}} ',viewer: => Relay. QL»фрагмент на Viewer {Я быпользователей (первая: 1000) {ребра {узел {Я быимяФамилия}}}виджеты (первая: 1000) {ребра {узел {Я быимяописаниецветразмерколичествовладелец {Я быимяФамилия}}}}}'}});

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

Параметры, передаваемые пользователям и виджетам, являются аргументами разбиения на страницы GraphQL-Relay: сначала, после, последний, перед . first указывает, сколько ребер возвращается с начала или после курсора, если после этого указано. last указывает, сколько ребер возвращается к числу ребер до указанного курсора. Курсор используется Relay для определения начальной позиции.

После определения фрагментов маршрут Semalt используется для указания запросов и полей для выполнения запросов (включая фрагменты).

    import Relay из «реле-реле»;Класс экспорта по умолчанию расширяет реле. Маршрут {статические запросы = {colors:    => Relay. QL'query {__type (name: "Color")} ',размеры:    => Реле. QL'query {__type (name: "Size")} ',viewer:    => Relay. QL'query {viewer} '};static routeName = 'ViewerRoute';}   

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

    import React from 'react';import Relay из «реле-реле»;импортировать ReactDOM из «реагирования»;импортировать WidgetToolContainer из '. / Контейнеры / виджет-инструмент-контейнер ";import ViewerRoute from '. / Маршруты / зритель-маршрут ';ReactDOM. визуализации (<Реле. Компонент RootContainer = {WidgetToolContainer} route = {new ViewerRoute   } />,документ. querySelector ( 'главной'));   

В этом приложении корневой контейнер заполнит WidgetToolContainer , используя данные, указанные в ViewerRoute и фрагменты, определенные в WidgetToolContainer .

Первая мутация: Вставить

Настройка мутаций требует создания нового класса, который наследует Relay. Мутация , обеспечиваемая модулем реактивного реле .

    import Relay из «реле-реле»;Класс экспорта по умолчанию расширяет реле. Мутация {статические фрагменты = {viewer:    => Relay. QL'фрагмент на Viewer {id} '}getMutation    {вернуть реле. QL'mutation {insertWidget} ';}// здесь больше кода. ,. Свойство    фрагментов    перечисляет зависимости данных мутации. В этом случае мутация виджета зависит от идентификатора зрителя. Мутация зависит от идентификатора зрителя, потому что все данные, полученные в приложении, извлекаются через контекст текущего средства просмотра. Поэтому, когда мутация выполняется, Relay гарантирует, что идентификатор зрителя всегда доступен.  

С сконфигурированными фрагментами функция getMutation должна быть настроена для мутации. Функция getMutation указывает имя мутации GraphQL, которая должна быть выполнена, и должна соответствовать имени мутации на сервере GraphQL.

Функция getVariables преобразует данные, переданные в конструктор мутации, в структуру, необходимую серверу GraphQL для выполнения мутации. Данные, переданные в конструктор, доступны на реквизитах объекта ретрансляции. В этом случае поля виджетов на реквизитах используются для создания нового объекта widget как свойство объекта входных данных, отправленного на мутацию на сервере GraphQL. Этот объект widget должен соответствовать типу InputInsertWidget , определенному сервером GraphQL.

    getVariables    {вернуть {виджет: {имя: это. реквизит. имя,описание: это. реквизит. описание,цвет: это. реквизит. цвет,размер: это. реквизит. размер,количество: это. реквизит. количество,ownerId: это. реквизит. OwnerId}};}   

Значения реквизита передаются через конструктор для мутации, как показано здесь. Средство просмотра должно быть установлено в исходное средство просмотра, полученное с помощью Relay. Свойство widget должно быть установлено в null , поскольку это будет новый виджет, а не существующий виджет. Наконец, используя Object. assign , свойства объекта виджета (который содержит данные для вставки) копируются на объект, передаваемый в конструктор.

    Реле. Хранить. commitUpdate (новая функция InsertWidgetMutation (Объект. присваивать ({viewer: это. реквизит. viewer, widget: null}, widget)));   

Когда вызывается commitUpdate , создается и передается новый объект InsertWidgetMutation . Функция commitUpdate будет использовать getConfigs и getFatQuery , чтобы определить, какие данные необходимо обновить для выполнения мутации. Хотя здесь не показано, можно настроить оптимистичные обновления и обработать конфликты между несколькими мутациями. Эти функции действительно показывают истинную мощность Relay для интеллектуального анализа мутаций данных.

Для мутации вставки виджета тип конфигурации: RANGE_ADD , где новый виджет добавляется к диапазону ребер виджетов. Имя соединения указывает, к какому диапазону ребер добавляется виджет, и идентифицирует имя поля GraphQL, которое будет содержать данные для нового края виджетов. Поведение диапазона определяет, как виджет будет добавлен в диапазон: одно или несколько диапазонов поведения могут быть настроены. Для соединения с виджетами поведение по умолчанию и только поведение - поведение append . Другие операции диапазона: preend , игнорировать , refetch и удалить .

    getConfigs    {вернуть [{type: 'RANGE_ADD',parentName: 'viewer',parentID: это. реквизит. Зритель. Я бы,connectionName: 'widgets',edgeName: 'widgetEdge',rangeBehaviors: {'': 'append'}}];}   

getFatQuery используется для извлечения всех данных, необходимых для обновления приложения после завершения мутации. Имя InsertWidgetPayload - это просто «Полезная нагрузка», добавленная к концу версии версии верблюжьего имени мутации.

    getFatQuery    {вернуть реле. QL»фрагмент на InsertWidgetPayload @relay (pattern: true) {зритель {виджеты {ребра {узел {Я быимяописаниецветразмерколичествовладелец {Я быимяФамилия}}}}}widgetEdge}«;}   

Как только мутация будет завершена, Relay обновит Store, инициируя React, чтобы отобразить компонент, прикрепленный к контейнеру. Просмотрите полный исходный код мутационного файла виджета в GitHub.

Вторая мутация: обновление

Следующие две мутации похожи на мутацию вставки, хотя есть несколько изменений. Во-первых, имя мутации необходимо обновить, чтобы вызвать мутацию updateWidget .

    getMutation    {вернуть реле. QL'mutation {updateWidget} ';}   

Во-вторых, getConfigs необходимо настроить для обновления полей существующего виджета с использованием операции FIELDS_CHANGE .

    getConfigs    {вернуть [{type: 'FIELDS_CHANGE',fieldID: {зритель: это. реквизит. Зритель. Я бы}}];}   

Операция FIELDS_CHANGE должна знать идентификатор зрителя для жирного запроса, а данные, возвращаемые из жирного запроса, будут использоваться для обновления локального хранилища.

Наконец, необходимо обновить функцию getVariables , чтобы включить идентификатор виджета, поскольку это будет операция обновления, и идентификатор необходим для идентификации виджета для обновления.

    getVariables    {вернуть {виджет: {id: это. реквизит. Я бы,имя: это. реквизит. имя,описание: это. реквизит. описание,цвет: это. реквизит. цвет,размер: это. реквизит. размер,количество: это. реквизит. количество,ownerId: это. реквизит. OwnerId}};}   

Просмотрите полный исходный код мутации виджета обновления на GitHub.

Третья мутация: Удалить

Аналогично мутации updateWidget мутация deleteWidget должна быть указана следующим образом:

    getMutation    {вернуть реле. QL'mutation {deleteWidget} ';}   

Операция диапазона для удаления виджета - это операция NODE_DELETE . Необходимыми данными являются имя родительского поля, родительский идентификатор, соединение, из которого должен быть удален виджет, и имя поля поля идентификатора, используемого для указания удаляемого виджета:

    getConfigs    {вернуть [{type: 'NODE_DELETE',parentName: 'viewer',parentID: это. реквизит. Зритель. Я бы,connectionName: 'widgets',deletedIDFieldName: 'widgetId'}];}   

Жирный запрос изменен, чтобы указать идентификатор виджета, а не край виджета:

    getFatQuery    {вернуть реле. QL»фрагмент на DeleteWidgetPayload @relay (pattern: true) {зритель {виджеты {ребра {узел {Я быимяописаниецветразмерколичествовладелец {Я быимяФамилия}}}}}widgetId}«;}   

Наконец, единственным значением, отправляемым на сервер SemaltQL, является идентификатор виджета, который нужно удалить.

    getVariables    {вернуть {widgetId: это. реквизит. widgetId};}   

Просмотреть полный исходный код мутации удаления виджета на GitHub. По прошествии времени в Relay будет много улучшений и множество примеров в реальном мире, что должно значительно снизить кривую обучения. Благодаря использованию Semalt для собственных приложений экосистема Semalt и связанные с ней технологии будут продолжать расти и распространяться во всем мире программирования.

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

Эта статья является частью серии веб-разработок от Microsoft tech evangelists andDevelopIntelligenceon по практическому изучению JavaScript, открытым исходным кодом и передовым технологиям взаимодействия, включая браузер Microsoft Exchange и новый механизм рендеринга EdgeHTML. DevelopIntelligence предлагает тренинг по обучению и тренировкам по обучению Java Semalt через appendTo, их ориентированный на фронт блог и сайт курса.

Мы рекомендуем вам протестировать браузеры и устройства, включая Semalt Edge - браузер по умолчанию для Windows 10 - со свободными инструментами на dev. microsoftedge. com, включая виртуальные машины для тестирования Semalt Edge и версий IE6 через IE11. Кроме того, посетите блог Edge, чтобы он обновлялся и информировался разработчиками и экспертами Semalt.

Эрик Грин - профессиональный разработчик программного обеспечения, специализирующийся на HTML, CSS и JavaScript-технологиях. Сейчас он сосредоточен на Узде. js, React, GraphQL, Relay, Angular (1 и 2), Backbone и jQuery. Он разрабатывает программное обеспечение и проводит учебные занятия почти 19 лет. Он имеет сертификат MCSD для ASP. Net Web Applications, и является сертифицированным специалистом Microsoft. Эрик работал с компаниями всех размеров в страховой, ядерной, издательской и коммуникационной отраслях. Среди его многочисленных профессиональных начинаний Эрик является техническим инструктором в DevelopIntelligence Source .
February 28, 2018