В этой второй части нашей серии статей в блоге с полным набором обучающих программ вы начнете создавать клон 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 - это клиентская библиотека Apollo
  • apollo-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 и добавьте следующий контент:

Давайте попробуем понять, что происходит в этом фрагменте кода:

  1. Вы импортируете необходимые зависимости из пакетов apollo-angular, apollo-angular-link-http, apollo-cache-inmemory
  2. Мы экспортируем HttpClientModule, ApolloModule, HttpLinkModule, чтобы сделать их общедоступными, когда GraphQLModule импортируется в другой модуль. Фактически, если вы не экспортируете, он останется частным, видимым только для других компонентов, объявленных в этом модуле. Дополнительную информацию можно найти в Часто задаваемых вопросах о NgModule.
  3. Мы вводим Apollo и HttpLink, чтобы иметь возможность их настроить
  4. Мы создаем link, предоставляя URI (то есть вашу фактическую конечную точку GraphQL) методу .create экземпляра HttpLink. Вы замените заполнитель __SIMPLE_API_ENDPOINT__ своей реальной конечной точкой через некоторое время.
  5. Теперь вы создаете экземпляр 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 или у вас есть идеи для другого контента, который бы обогатил сайт? "Связаться"!