После того, как вы выполнили настройку и базовую загрузку с помощью запроса в части 1 и части 2 этой серии публикаций в блоге по созданию приложения с помощью GraphQL, Angular и Apollo; Теперь вы узнаете, шаг за шагом, как отправлять мутации с помощью Angular и Apollo.

Он не сильно отличается от запросов на создание и выполняет те же шаги, которые были упомянуты во второй части этой серии, с запросами:

  1. запишите мутацию как константу ts с помощью функции синтаксического анализатора gql
  2. используйте службу Apollo для вызова мутации с помощью метода mutate

ПРИМЕЧАНИЕ. Это кросс-сообщение с HowToGraphQL, учебного сайта, охватывающего широкий спектр тем, связанных с GraphQL.

Подготовка компонентов Angular

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

В корневом каталоге запустите ng generate component create-link, и это создаст create-link.component.ts, create-link.component.spec.ts, create-link.component.html, create-link.component.css в папке src/app/create-link.

Затем добавьте следующий код в create-link.component.ts:

После этого добавьте в create-link.component.html следующий код:

Примечание. [(ngModel)] - это синтаксис Angular для привязки свойств description и URL к их текстовому полю. Данные передаются в обоих направлениях: от свойства к текстовому полю и от текстового поля обратно к свойству. NgModel по умолчанию недоступен. Он принадлежит к дополнительному FormsModule. Вы должны импортировать его в src/app/app.module.ts, чтобы использовать его.

Это стандартная установка для компонента Angular с двумя полями input, где пользователи могут указать URL и description из Link, которые они хотят создать. Данные, введенные в эти поля, привязываются к свойствам компонента (description и URL) и будут использоваться в createLink при отправке мутации.

Написание мутации

Но как теперь отправить мутацию?

Во-первых, вам нужно определить мутацию в вашем graphql файле и проанализировать ваш запрос с помощью gql. Вы сделаете это так же, как с запросом в части 2 этой серии обучающих блогов.

В src/app/graphql.ts добавьте в конец файла следующий оператор:

Давайте еще раз посмотрим, что происходит:

  1. Сначала вы создаете константу машинописного текста с именем CREATE_LINK_MUTATION, которая хранит мутацию.
  2. Теперь вы определяете фактическую мутацию GraphQL. Требуется два аргумента, URL и description, которые вам нужно будет указать при вызове мутации.
  3. Вы также объявляете интерфейс ответа CreateLinkMutationResponse.

Прежде чем двигаться дальше, вам нужно импортировать мутацию из файла graphql и зависимостей Apollo. Добавьте следующее в начало src/app/create-link/create-link.component.ts:

Давайте посмотрим на мутацию в действии!

Еще в CreateLinkComponent.ts, реализуйте мутацию createLink следующим образом:

Как и было обещано, все, что вам нужно сделать, это вызвать this.apollo.mutate и передать мутацию и переменные, которые представляют вводимые пользователем данные.

Идите и посмотрите, работает ли мутация. Чтобы проверить код, откройте src/app/app.component.html и измените шаблон так, чтобы он выглядел так:

Затем убедитесь, что объявлены CreateLinkComponent компоненты в app.module.ts. Текущее содержимое должно выглядеть так:

Теперь вы должны увидеть следующий экран:

Как видите, есть два поля ввода и кнопка submit - не очень красивая, но функциональная.

Теперь введите данные в поля, например:

Затем нажмите кнопку отправить. Вы не получите никакой визуальной обратной связи в пользовательском интерфейсе, но давайте посмотрим, сработал ли запрос, проверив текущий список ссылок на Playground.

Введите graphcool playground в Терминал и отправьте следующий запрос:

Вы увидите следующий ответ сервера:

Отлично! Мутация работает, отличная работа! 💪

Следите за обновлениями, потому что в следующей части этой серии публикаций в блоге вы узнаете, шаг за шагом, как использовать угловую маршрутизацию с GraphQL и Apollo 2.

Понравилось то, что вы прочитали? Не стесняйтесь аплодировать и делиться этой записью!

Более подробную информацию о Взломах вы можете найти на нашем сайте. Мы - компания, управляемая сообществом, которая предлагает обучение на высоком уровне по новейшим фреймворкам и технологиям, связанным с JavaScript, а также по GraphQL! Мы любим вносить свой вклад в открытый исходный код и организовывать бесплатные общественные семинары по всей Европе! Следите за ближайшими к вам мероприятиями и тренингами на https://hackages.io.

ПРИМЕЧАНИЕ. Как я уже упоминал, этот пост был впервые опубликован на HowToGraphQL, учебном сайте, охватывающем широкий спектр тем, связанных с GraphQL. На сайте вы можете найти базовое введение, расширенные темы и несколько практических руководств на разных языках программирования. Это отправная точка для знакомства с GraphQL - и он полностью с открытым исходным кодом. Вы хотите внести свой вклад в недостающее руководство по HowToGraphQL или у вас есть идеи для другого контента, который бы обогатил сайт? "Связаться"!