[Перевод] Руководство по GraphQL для фронтенд-разработчиков

сервер Программа перевода самородков GraphQL React.js
[Перевод] Руководство по GraphQL для фронтенд-разработчиков

Каким бы сложным или простым ни было ваше приложение, вы всегда будете получать данные с удаленного сервера. На внешнем интерфейсе это означает создание REST-подключения к конечной точке, перевод и кэширование ответов сервера, а также повторный рендеринг пользовательского интерфейса. В течение многих лет REST был нормой для API, но в прошлом году новая технология API под названием GraphQL стала популярной благодаря большому опыту разработки и приему описательных данных.

В этой статье мы рассмотрим серию примеров, чтобы проиллюстрировать, как GraphQL может помочь вам решить проблему извлечения удаленных данных. Если вы новичок в GraphQL, не бойтесь! Я перечислю некоторые учебные ресурсы, которые помогут вам изучить GraphQL с помощью стека Apollo, чтобы вы могли освоить его на шаг впереди других.

GraphQL 101

Прежде чем мы сможем понять, почему GraphQL может упростить жизнь фронтенд-инженерам, нам нужно выяснить, что это такое. Когда мы говорим о GraphQL, мы имеем в виду либо сам язык, либо богатую экосистему инструментов, связанных с ним. По своей сути GraphQL — это типизированный язык запросов, разработанный Facebook, который позволяет вам выражать свои потребности в данных в описательной форме. Формат результатов вашего запроса должен соответствовать оператору запроса. В следующем примере мы ожидаем получитьcurrencyа такжеratesобъект недвижимости, гдеratesсодержит сноваcurrencyа такжеrateМассив объектов ключей.

{
  rates(currency: "USD") {
    currency
    rates {
      currency
      rate
    }
  }
}

Когда мы говорим о GraphQL в самом широком смысле, мы в основном имеем в виду экосистему инструментов, которые помогают внедрять GraphQL в приложения. На бэкэнде вы бы использовалиСервер Аполлонадля создания сервера GraphQL — конечной точки, которая анализирует запросы GraphQL и возвращает данные. Как сервер узнает, какие данные возвращать? вам нужно использоватьИнструменты GraphQLчтобы создать словарь (ваш план данных) и карту декомпозиции (ряд функций для извлечения данных из конечной точки REST, базы данных или чего-то еще).

Но на самом деле это проще, чем кажется — с помощью Apollo Launchpad (консоли сервера GraphQL) вы можете создать работающий сервер GraphQL в браузере, написав не более 60 строк кода! 😮 Мы ссылались на этоПанель запуска, которую я создал, который содержит Coinbase API, упомянутый в статье.

вы будете использоватьКлиент АполлонаПодключите свой собственный сервер GraphQL и приложение, это гибкий и быстрый клиент, который извлекает, кэширует и обновляет данные для вас. Поскольку клиент Apollo не связан с визуальным слоем, вы можете написать его на React, Angular, Vue или даже на простом JavaScript. Помимо кросс-фреймворка, Apollo еще и кроссплатформенный, он поддерживает React Native и Ionic.

Попробуйте! 🚀

Теперь, когда вы понимаете, что такое GraphQL на самом деле, давайте начнем с нескольких примеров применения Apollo в вашей работе с интерфейсом. Я уверен, что со временем вы это поймете — архитектура на основе GraphQL с использованием Apollo поможет вам быстрее доставлять данные.

1. Добавьте новые требования к данным без добавления новых конечных точек

Мы все были в такой ситуации: потратили несколько часов на создание идеального компонента пользовательского интерфейса, а затем вдруг требования к продукту изменились. Вы внезапно понимаете, что для получения данных, необходимых для реализации нового требования, вам придется реализовать сложную каскадную модель получения запросов API или, что еще хуже, новую конечную точку REST. Затем ваше задание блокируется, и вы должны попросить серверную часть добавить еще одну новую конечную точку для этого компонента.

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

В строках 22-26 нашего словаря мы определяемExchangeRateТипы. В этих полях перечислены все ресурсы, которые могут быть запрошены в нашем приложении.

type ExchangeRate {
  currency: String
  rate: String
  name: String
}

В REST мы ограничены тем, что могут предоставить источники данных. если ваш/exchange-ratesКонечная точка не содержит имени, вам необходимо подключить новую конечную точку, например./currencyчтобы получить данные или создать их, если они не существуют.

С GraphQL мы можем проверить словарь и узнать, что поле имени можно запрашивать. Попробуйте добавить поле имени в правую панель панели запуска и запустить.

{
  rates(currency: "USD") {
    currency
    rates {
      currency
      rate
      name
    }
  }
}

Теперь удалите поле имени и повторите запрос. Видите изменение в формате результатов вашего запроса?

当你改变了你的查询的叙述方式，数据也随之改变。

Ваш сервер GraphQL всегда будет добросовестно возвращать запрашиваемые вами данные, не более того. Это очень отличается от REST — в REST вы должны фильтровать и преобразовывать данные в то, что нужно вашим компонентам пользовательского интерфейса. Это не только экономит время, но также снижает нагрузку на сеть и память ЦП, необходимые для загрузки и анализа данных.

2. Сожмите шаблон управления состоянием

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

Давайте посмотрим на этот примерПример песочницы приложения ReactКак Apollo Client устранил этот скучный процесс. Проверитьlist.jsи перетащите полосу прокрутки вниз.

export default graphql(ExchangeRateQuery, {
  props: ({ data }) => {
    if (data.loading) {
      return { loading: data.loading };
    }
    if (data.error) {
      return { error: data.error };
    }
    return {
      loading: false,
      rates: data.rates.rates
    };
  }
})(ExchangeRateList);

В этом примереReact Apollo, интеграция React для клиента Apollo, которая связывает наш запрос обменного курса с компонентом ExchangeRateList. Как только клиент Apollo обрабатывает этот запрос, он автоматически отслеживает статус загрузки и ошибки и помещает его вdataперейти к опоре. Когда клиент Apollo получает результат, он обновляется на основе результата запроса.dataprop, а затем обновите пользовательский интерфейс, указав обменный курс, который необходимо использовать при рендеринге.

Клиент Apollo автоматически выполняет форматирование и кэширование данных за вас. Попробуйте нажать на другую валюту на правой панели, чтобы увидеть обновление данных. Теперь снова выберите валюту и посмотрите, как сразу появляются данные? Это кеш Аполлона в действии. Вы можете получить их в клиенте Apollo бесплатно, без дополнительной настройки. 😍 открытьindex.jsДавайте посмотрим на наш код для инициализации клиента Apollo.

3. Быстрая отладка с помощью Apollo DevTools и GraphiQL

Похоже, что Apollo Client проделал для вас большую работу! Как мы можем заглянуть внутрь, чтобы понять, как это работает? Благодаря проверкам хранилища и полной видимости процесса запроса и преобразования Apollo DevTools может не только ответить на эти вопросы, но и сделать отладку менее скучной или даже более увлекательной! 🎉 Это доступно в виде плагина для Chrome и Firefox, и вскоре он также будет работать с React Native.

Если вы хотите попробовать, следуйте предыдущему примеру в своем любимом браузере.Установите инструменты разработчика Аполлоназатем перейдите кour CodeSandbox. Вам нужно нажать «Скачать» в верхней панели навигации, разархивировать файл, запуститьnpm installпотомnpm startчтобы запустить пример локально. После того, как вы откроете панель инструментов разработчика вашего браузера, вы должны увидеть вкладку под названием Apollo.

Во-первых, давайте проверим Storage Inspector. Эта вкладка отражает состояние кэша клиента Apollo, что упрощает определение правильности хранения ваших данных на стороне клиента.

存储检查器

Apollo DevTools также позволяет тестировать запросы и изменения в GraphiQL, интерактивном редакторе запросов и браузере документации. На самом деле мы уже использовали GraphiQL в нашем первом примере при попытке добавить поле. Для удобства просмотра GraphiQL будет выполнять автозаполнение при вводе запроса в редактор и автоматически создавать документацию на основе системы типов GraphQL. Это чрезвычайно полезно для расширения словарей без каких-либо затрат на обслуживание для разработчиков.

Apollo Devtools

попробовать вмоя панель запускаВыполните запрос в GraphiQL на правой панели! Наведите указатель мыши на поле в редакторе запросов и щелкните всплывающую подсказку, чтобы открыть браузер документации. Если ваш запрос успешно выполняется в GraphiQL, вы можете быть на 100 % уверены, что запрос будет успешно выполняться и в вашем приложении.

Обновите свои навыки GraphQL

Отлично, вы видели это здесь! 👏 Надеюсь, вам понравились примеры, и вы начали понимать, как использовать GraphQL во внешнем интерфейсе.

Хотите узнать больше? 🌮 Включите «Продолжайте изучать GraphQL» в своих новогодних обещаниях на 2018 год! Потому что я надеюсь, что в новом году он станет более популярным. Вот примеры приложений, которые научат вас применять недавно изученные концепции:

Продолжайте использовать GraphQL (не забудьте подписаться на нас в Twitter@apollographql)! 🚀

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории