В этой второй части нашей серии статей в блоге с полным набором обучающих программ вы начнете создавать клон Hackernews с создания внешнего интерфейса с помощью angular-cli и внутреннего интерфейса с помощью Graphcool. Пропустили введение и настройку для этой серии руководств? Прочтите здесь.
Примечание. Это кросс-пост с HowToGraphQL, учебного сайта, охватывающего широкий спектр тем, связанных с GraphQL.
Создание приложения
Если вы еще этого не сделали, вам нужно установить angular-cli
с помощью npm:
Затем вы можете использовать его для начальной загрузки приложения Angular:
Это создаст новый каталог с именем hackernews-angular-apollo
, в котором есть все необходимые настройки конфигурации.
Убедитесь, что все работает, перейдя в каталог и запустив приложение:
Откроется браузер и вы перейдете к http://localhost:4200
, где запущено приложение. Если бы все прошло хорошо, вы бы увидели следующее:
Затем переместите папкуgraphcool
в каталог hackernews-angular-apollo
, чтобы управлять всем в одном месте.
Структура вашего проекта теперь должна выглядеть следующим образом:
Подготовить укладку
Это руководство посвящено концепциям GraphQL и тому, как вы можете использовать его в приложении Angular, поэтому мы хотим тратить минимум времени на вопросы стилизации. Чтобы упростить использование CSS в этом проекте, вы воспользуетесь библиотекой Tachyons, которая предоставляет некоторые классы CSS.
Откройте src/index.html
и добавьте второй тег link
прямо под двумя существующими тегами, которые втягивают тахионы:
Поскольку мы по-прежнему хотим иметь немного больше нестандартных стилей здесь и там, мы также подготовили для вас несколько стилей, которые вам нужно включить в проект.
Откройте styles.css
и замените его содержимое следующим:
Установка Apollo
ApolloClient 2.0 представил две новые функции: ссылки и кэш. Ссылки предназначены для извлечения данных и управления ими с использованием настраиваемой логики. Cache API позволяет нам хранить и обрабатывать данные любым удобным для нас способом.
Чтобы вернуть все функции Apollo Client (и его привязки Angular), нам нужно вытащить несколько пакетов:
Вот обзор только что установленных пакетов:
apollo-client
- это клиентская библиотека Apolloapollo-angular
содержит привязки для использования Apollo Client с Angular.graphql-tag
- парсер GraphQL. Каждая операция GraphQL, которую вы передаете Apollo Client, должна быть проанализирована функциейgql
.apollo-angular-link-http
аналогиченHttpLink
HttpLink
Apollo с одним отличием: он используетHttpClient
Angular.apollo-cache-inmemory
- это реализация кэша, которая поддерживает все функции Apollo Client 1.0 без зависимости отRedux
.graphql
содержит эталонную реализацию GraphQL от Facebook - Apollo Client также использует некоторые из его функций.
Вот и все; вы готовы написать код! 🚀
Настройка ApolloClient
Apollo абстрагирует всю сетевую логику нижнего уровня и предоставляет удобный интерфейс для GraphQL API. В отличие от работы с REST API, вам больше не нужно создавать свои HTTP-запросы - вместо этого вы можете просто писать запросы и мутации и отправлять их с помощью ApolloClient
.
Первое, что вам нужно сделать при использовании Apollo, - это настроить свой ApolloClient
экземпляр. Ему необходимо знать конечную точку вашего GraphQL API, чтобы иметь дело с сетевыми подключениями.
Откройте src/app/apollo.config.ts
и добавьте следующий контент:
Давайте попробуем понять, что происходит в этом фрагменте кода:
- Вы импортируете необходимые зависимости из пакетов
apollo-angular
,apollo-angular-link-http
,apollo-cache-inmemory
- Мы экспортируем
HttpClientModule
,ApolloModule
,HttpLinkModule
, чтобы сделать их общедоступными, когдаGraphQLModule
импортируется в другой модуль. Фактически, если вы не экспортируете, он останется частным, видимым только для других компонентов, объявленных в этом модуле. Дополнительную информацию можно найти в Часто задаваемых вопросах о NgModule. - Мы вводим
Apollo
иHttpLink
, чтобы иметь возможность их настроить - Мы создаем
link
, предоставляяURI
(то есть вашу фактическую конечную точку GraphQL) методу.create
экземпляраHttpLink
. Вы замените заполнитель__SIMPLE_API_ENDPOINT__
своей реальной конечной точкой через некоторое время. - Теперь вы создаете экземпляр
ApolloClient
, передаваяlink
created иInMemoryCache
экземпляр кеша.HttpLink
является заменойcreateNetworkInterface
из Apollo Client 1.0.
Наконец, мы экспортируем GraphQLModule
.
Откройте src/app/app.module.ts
и импортируйте GraphQLModule в AppModule:
Затем вам нужно заменить заполнитель для конечной точки GraphQL на вашу фактическую конечную точку. Но откуда вы берете свою конечную точку?
Есть два способа получить конечную точку. Вы можете открыть Консоль Graphcool и нажать кнопку Конечные точки в нижнем левом углу. Второй вариант - использовать CLI.
В терминале перейдите в каталог server
и используйте следующую команду, чтобы получить доступ к конечным точкам API вашей службы Graphcool:
Скопируйте конечную точку для Simple API
и вставьте ее в src/app/apollo.config.ts
, чтобы заменить текущий заполнитель __SIMPLE_API_ENDPOINT__
.
Вот и все; все готово для загрузки данных в свое приложение! 😎
›Не пропустите следующую часть этой серии учебных блогов, в которой вы узнаете, как отправлять мутации с помощью Angular и Apollo.
Понравилось то, что вы читаете? Не стесняйтесь аплодировать и делиться этой записью!
Более подробную информацию о Взломах вы можете найти на нашем сайте. Мы - компания, управляемая сообществом, которая предлагает обучение на высоком уровне по новейшим фреймворкам и технологиям, связанным с JavaScript, а также по GraphQL! Мы любим вносить свой вклад в открытый исходный код и организовывать бесплатные общественные семинары по всей Европе! Следите за ближайшими к вам мероприятиями и тренингами на https://hackages.io.
ПРИМЕЧАНИЕ. Как я уже упоминал, этот пост был впервые опубликован на HowToGraphQL, учебном сайте, охватывающем широкий спектр тем, связанных с GraphQL. На веб-сайте вы можете найти базовое введение, расширенные темы и несколько практических руководств на разных языках программирования. Это отправная точка для знакомства с GraphQL - и это полностью открытый исходный код. Вы хотите внести свой вклад в недостающее руководство по HowToGraphQL или у вас есть идеи для другого контента, который бы обогатил сайт? "Связаться"!