После того, как вы выполнили настройку и базовую загрузку с помощью запроса в части 1 и части 2 этой серии публикаций в блоге по созданию приложения с помощью GraphQL, Angular и Apollo; Теперь вы узнаете, шаг за шагом, как отправлять мутации с помощью Angular и Apollo.
Он не сильно отличается от запросов на создание и выполняет те же шаги, которые были упомянуты во второй части этой серии, с запросами:
- запишите мутацию как константу ts с помощью функции синтаксического анализатора
gql
- используйте службу
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
добавьте в конец файла следующий оператор:
Давайте еще раз посмотрим, что происходит:
- Сначала вы создаете константу машинописного текста с именем
CREATE_LINK_MUTATION
, которая хранит мутацию. - Теперь вы определяете фактическую мутацию GraphQL. Требуется два аргумента,
URL
иdescription
, которые вам нужно будет указать при вызове мутации. - Вы также объявляете интерфейс ответа
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 - не очень красивая, но функциональная.
Теперь введите данные в поля, например:
- Описание:
The best learning resource for GraphQL
- URL:
www.howtographql.com
Затем нажмите кнопку отправить. Вы не получите никакой визуальной обратной связи в пользовательском интерфейсе, но давайте посмотрим, сработал ли запрос, проверив текущий список ссылок на Playground.
Введите graphcool playground
в Терминал и отправьте следующий запрос:
Вы увидите следующий ответ сервера:
Отлично! Мутация работает, отличная работа! 💪
Следите за обновлениями, потому что в следующей части этой серии публикаций в блоге вы узнаете, шаг за шагом, как использовать угловую маршрутизацию с GraphQL и Apollo 2.
Понравилось то, что вы прочитали? Не стесняйтесь аплодировать и делиться этой записью!
Более подробную информацию о Взломах вы можете найти на нашем сайте. Мы - компания, управляемая сообществом, которая предлагает обучение на высоком уровне по новейшим фреймворкам и технологиям, связанным с JavaScript, а также по GraphQL! Мы любим вносить свой вклад в открытый исходный код и организовывать бесплатные общественные семинары по всей Европе! Следите за ближайшими к вам мероприятиями и тренингами на https://hackages.io.
ПРИМЕЧАНИЕ. Как я уже упоминал, этот пост был впервые опубликован на HowToGraphQL, учебном сайте, охватывающем широкий спектр тем, связанных с GraphQL. На сайте вы можете найти базовое введение, расширенные темы и несколько практических руководств на разных языках программирования. Это отправная точка для знакомства с GraphQL - и он полностью с открытым исходным кодом. Вы хотите внести свой вклад в недостающее руководство по HowToGraphQL или у вас есть идеи для другого контента, который бы обогатил сайт? "Связаться"!