Автор оригинала: FreeCodeCamp Community Member.
Sacha Greif.
Если ты похож на меня, вы, вероятно, пройдете через три этапа, услышав о новой технологии:
1. Увольнение
2. Интерес
3. паника
Трюк для поддержания вашего здравомыслия в этих быстрое время состоит в том, чтобы выучить новые вещи прямо между этапами два и три, после того, как ваш интерес будет волшебным, но пока вы все еще опережаете кривую.
Вот почему сейчас – это идеальное время, чтобы узнать, что именно эта графика, о которой вы продолжаете слушать на самом деле.
Основы
В двух словах GraphQL является Синтаксис, который описывает, как запросить данные и обычно используется для загрузки данных с сервера на клиента. GraphQL имеет три основных характеристики:
- Он позволяет клиенту указать именно какие им потребности данных.
- Это облегчает совокупные данные из нескольких источников.
- Он использует систему типа для описания данных.
Так как начнутся GraphQL? Как это выглядит на практике? И как вы начинаете использовать это? Читай дальше что бы узнать!
Проблема
GraphQL получил свое начало у большого старого Facebook, но даже более простые приложения могут часто ударить в ограничения традиционных API.
Например, представьте, что вам нужно отобразить список Сообщения и под каждым постом списком Любит , включая имена пользователей и аватары. Достаточно легко, вы настраиваете свой Сообщения API, чтобы включить Любит Массив, содержащий объекты пользователя:
Но теперь пришло время работать над вашим мобильным приложением, и оказывается загрузка всех, что дополнительные данные замедляют вещи. Так ты сейчас нужен Два конечные точки, один с Любит и один без них.
Теперь добавьте еще один фактор на смесь: оказывается, что пока Сообщения хранятся в базе данных MySQL, Любит С другой стороны, жить в магазине Redis! Чем вы сейчас занимаетесь?!
Экстраполяция этого сценария, к чему-либо многочисленным источникам данных и клиентам API Facebook могут управлять, и вы можете себе представить, и вы можете представить, почему старинные старинные старинные API для отдыха начинали показывать свои пределы.
Решение
Решение Facebook придумала, очень просто очень просто: вместо того, чтобы иметь несколько «тупых» конечных точек, иметь одну «умную» конечную точку, которая может принимать сложные запросы, а затем массируйте вывод данных в любую форму, которую клиент требует.
Практически говоря, слой GraphQL живет между клиентом и одним или несколькими источниками данных, получая клиентские запросы и получать необходимые данные в соответствии с вашими инструкциями. Смущенный? Это время метафора!
Старая модель отдыха понравилась заказа пиццей, а затем доставка продуктов поставляется, а затем призвать сухой уборщик, чтобы получить вашу одежду. Три магазина, три телефонных звонка.
Graphql С другой стороны, похоже на личный помощник: после того, как вы дали им адреса на все три места, вы можете просто спросить, что вы хотите («Получить мне мою химчистку, большую пиццу и две дюжины яиц» ) и жди их вернуться.
Другими словами, Graphql устанавливает стандартный язык для разговора с этим магическим личным помощником.
На практике API GraphQL организован около трех основных строительных блоков: Схема , Запросы и Резольверы Отказ
Запрашивает
Просьба, которую вы заставляете своему личному помощнику GraphQL, это Запрос и выглядит что-то подобное:
query { stuff}Мы объявляем новый запрос, используя Запрос Ключевое слово, а затем просить поля имени вещи Отказ Великая вещь о запросах GraphQL заключается в том, что они поддерживают вложенные поля, поэтому мы можем пойти один уровень глубже:
query { stuff { eggs shirt pizza }}Как видите, клиент, создающий запрос, не должен заботиться, откуда приходит «магазин». Просто попросите того, что вам нужно, и позвольте серверу GraphQL позаботиться о остальных.
Стоит отметить, что поля запросов также могут указать на Массивы Отказ Например, вот общий рисунок при запросе для списка сообщений:
query { posts { # this is an array title body author { # we can go deeper! name avatarUrl profileUrl } }}Поля запросов также поддерживают Аргументы Отказ Если я хочу отобразить определенный пост, я могу добавить ID Аргумент для пост поле:
query { post(id: "123foo"){ title body author{ name avatarUrl profileUrl } }}Наконец, если я хочу сделать это ID Динамический аргумент, я могу определить Переменная а затем повторно используйте его внутри запроса (обратите внимание, что мы также Намного Запрос здесь):
query getMyPost($id: String) { post(id: $id){ title body author{ name avatarUrl profileUrl } }}Хороший способ поставить все это на практике – использовать Github’s Graphql API Explorer Отказ Например, дайте следующее запрос попробуйте:
query { repository(owner: "graphql", name: "graphql-js"){ name description }}Обратите внимание, что, поскольку вы пытаетесь ввести новое имя поля ниже Описание , IDE автоматически предложит возможные имена полей непосредственно автоматически, завершенные из самого API GraphQL. Аккуратный!
Вы можете узнать больше о запросах GraphQL в отличном Анатомия запроса GraphQL статья.
Резольвенторы
Даже лучший помощник в мире не может пойти и получить вашу химчистку, если вы не дадите им адрес.
Аналогичным образом, ваш сервер GraphQL не будет знать, что делать с входящим запросом, если вы не говорите, используя Resolver Отказ
Resolver говорит GraphQL, как и где привлечь данные, соответствующие данному полю. Например, вот какой резолюстр для пост Поле выше может выглядеть (используя Avollo’s GraphQL-Tools Генератор схемы):
Query: { post(root, args) { return Posts.find({ id: args.id }); }}Мы ставим Resolver на Запрос потому что мы хотим запрашивать пост непосредственно на корневом уровне. Но вы также можете иметь резольверов для подпольных полей, таких как пост ‘s Автор поле:
Query: { post(root, args) { return Posts.find({ id: args.id }); }},Post: { author(post) { return Users.find({ id: post.authorId}) }}И обратите внимание, что ваши резольверы не ограничиваются возвратами документов базы данных. Например, может быть, вы хотите добавить КомментарииCount к вашему Пост тип:
Post: { author(post) { return Users.find({ id: post.authorId}) }, commentsCount(post) { return Comments.find({ postId: post.id}).count() }}Ключевая концепция, чтобы понять вот что с graphql, Ваша схема API и ваших схем базы данных разделяются Отказ Другими словами, не может быть никаких Автор и КомментарииCount Поля в нашей базе данных, но мы можем «моделировать» их через силу резольвентов.
Как вы видели, вы можете написать любой код, который вы хотите внутри Resolver. Вот почему вы также можете сделать их модифицировать Содержание вашей базы данных, в этом случае они известны как Мутация резольвенторы.
Схема
Все это хорошее вещество стало возможным возможным по типы схемы GraphQL. Моя цель сегодня – дать вам быстрый обзор более, чем исчерпывающее введение, поэтому я не буду здесь подробно.
Это сказано, я призываю вас проверить Документация GraphQL Если вы хотите узнать больше.
Часто задаваемые вопросы
Давайте сделаем перерыв, чтобы ответить на несколько распространенных вопросов.
Ты там, в спину. Да ты. Я вижу, вы хотите спросить что-то. Давай, не стесняйтесь!
Каково отношение между GraphQL и графовыми базами данных?
Не так много, действительно, GraphQl не имеет ничего общего с Graph Catses, как Neo4j Отказ Часть «графики» происходит от идеи ползания по вашему графу API с помощью полей и подполей; в то время как «QL» означает «язык запроса».
Я прекрасно доволен отдыхом, почему я должен перейти на график?
Если вы еще не столкнулись с боли остальных очков, которые предназначены для решения, то я бы сказал, что это хорошо!
Использование GraphQL Over Read, вероятно, не повлияет на общий пользовательский опыт вашего приложения, поэтому переключение на это не вопрос жизни или смерти любыми способами. Это, как говорят, я бы определенно рекомендовал попробовать FrageQL в небольшом боковом проекте, если вы когда-нибудь получите шанс.
Могу ли я использовать GraphQL без реагирования/реле/* вставить библиотеку здесь *?
Да, ты можешь! Поскольку graphql – это просто спецификация, вы можете использовать его с любой библиотекой на любой платформе, либо с клиентом (например, Apollo есть клиенты GraphQL для веб-сайтов, iOS, угловых и т. Д.) Или делая свой собственный Вызывы на сервер GraphQL.
GraphQL был сделан Facebook, и я не доверяю Facebook
Опять же, Graphql – это спецификация, что означает, что вы можете использовать реализации GraphQL без запуска одной строки кода, написанного Facebook.
И в то время как поддержка Facebook, безусловно, является хорошим плюсом для экосистемы GraphQL, на данный момент я считаю, что сообщество достаточно большое для GraphQL, чтобы процветать, даже если Facebook должен был перестать использовать его.
Все это «пусть клиент просит данные, которые им нужны», не очень безопасны для меня …
Поскольку вы пишете свои собственные резольветеры, решать вам проблемы с любыми проблемами безопасности на этом уровне.
Например, если вы позволите клиенту указать Ограничить Параметр Чтобы контролировать количество документов, которые он получает, вы, вероятно, захотите CAP это число, чтобы избежать атаки в стиле отказа от упоминаний о обслуживании, где клиенты запрашивают миллионы документов вплоть и снова.
Так что мне нужно начать?
Вообще говоря, вам понадобится как минимум два компонента для запуска приложения для питания GraphQL:
- А GraphQL Server Это служит вашим API.
- А Client Client который подключается к вашей конечной точке.
Читайте дальше, чтобы узнать больше о различных вариантах доступных.
Теперь, когда у вас есть справедливое представление о том, как работает GraphQL, давайте поговорим о некоторых из основных игроков в пространстве.
Серверы GraphQL
Первый кирпич, который вам понадобится, это сервер GraphQL. Сам графакл Это просто спецификация в конце концов, поэтому это оставляет дверь открытой до нескольких конкурирующих реализаций.
Graphql-js (узел)
Это оригинальная справочная реализация GraphQL. Вы можете использовать его вместе с Express-graphql к Создайте свой API Server Отказ
Graphql-сервер (узел)
Аполлон Команда также имеет свою собственную реализацию сервера GraphQL All-in-One. Это не так широко распространено, как и оригинальный, но очень хорошо документирован и поддерживается и быстро набирает землю.
Другие платформы
Graphql.org имеет Список реализация GraphQL для различных других платформ (PHP, Ruby и т. Д.).
Клиенты GraphQL
Хотя вы можете технически запросить ваш API GraphQL непосредственно без необходимости выделенной библиотеки клиента, это может Определенно сделать вашу жизнь проще Отказ
Реле
Реле – это собственная панель GraphQL Facebook. Я не использовал это сам, но из того, что я слышал, что в основном адаптирован к собственным потребностям Facebook, и может быть немного перегруженным для большинства применений.
Apollo Client
Новый участник в этом пространстве это Аполлон , и это быстро взят. Типичный клиентский стек Apollo состоит из двух кирпичей:
- Apollo-Client , который позволяет запустить запросы GraphQL в браузере и хранить свои данные (а также есть свои собственные Devtools Extension ).
- Разъем для вашей передней структуры выбора ( React-Apollo , Angular-Apollo и т. Д.).
Обратите внимание, что по умолчанию Apollo-Client хранит свои данные, используя Redux , что отлично, поскольку redux сам по себе довольно установленная государственная библиотека управления с богатой экосистемой.
Приложения с открытым исходным кодом
Несмотря на то, что Graphql довольно новый, уже есть некоторые многообещающие приложения с открытым исходным кодом, используя его.
Вулкандж
Во-первых, отказ от ответственности: я поддерживающую руководство Vulcanjs Отказ Я создал Vulcanjs, чтобы людям воспользоваться силой стопки React/GraphQL без необходимости писать столько котельной. Вы можете подумать об этом как «Rails для современной веб-экосистемы», в том, что она позволяет создавать Crud Apps (например, ange Instagram Clone ) в течение нескольких часов.
Гэтсби
GATSBY – это генератор реагирования статического сайта, который сейчас работает на GraphQL как Версия 1.0 Отказ Пока что это может показаться нечетной комбинацией, это на самом деле довольно мощно. Во время его процесса сборки GATSBY может получать данные из нескольких API-файлов GraphQL, а затем используйте их для создания полностью статичного приложения только на клиента.
Другие инструменты GraphQl
График
Graphiql – очень удобный IDE в браузере для конечных точек запроса графиков.
DataLoader.
Из-за вложенной природы запросов GraphQL одно запрос может легко вызвать десятки вызовов баз данных. Чтобы избежать удара производительности, вы можете использовать библиотеку дозирования и кэширования, такие как DataLoader, разработанные Facebook.
Создать график сервера
Create GraphQl Server – это утилита командной строки, которая позволяет легко быстро лечить сервер GraphQl, питающийся сервером узла и базой данных Mongo.
Графа
Подобно созданию сервера graphql, graphql-up позволяет быстро загружать новую заднюю панель Graphql by Графа Сервис.
GraphQL Services.
Наконец, есть также ряд компаний «GraphQl-Backend-As-A-A-Service», которые заботятся о цельной стороне сервера вещей для вас, и может быть хорошим способом опубликовать ноги в экосистеме GraphQL.
Графа
Гибкая бэкэндская платформа объединяет GraphQL и AWS Lambda, с бесплатным планом разработчика.
Боевик
Еще один Backend GraphQl в качестве услуги, который также имеет бесплатный план. Он предлагает много таких же функций, как графа.
Уже довольно много мест, где вы можете осветить на графике.
GraphQL.org
Официальный сайт GraphQL имеет отличную документацию, чтобы начать работу.
ИЗУЧИТЬГРАПККЛ
GUIDENGRAPHQL – интерактивный курс, собранный людьми на Кадира Отказ
Учиться
Хорошее последующее сопровождение Graphcool – это бесплатный ход, сделанный бесплатным ходом.
Блог Аполлона
Блог Apollo имеет тонны подробных, хорошо написанных постов об Apollo и Graphql в целом.
Graphql еженедельно
Информационный бюллетень обо всех вещах GraphQL, курируется командой Graphcool.
Hashbang еженедельно
Еще одна отличная рассылка, которая также охватывает реагирование и метеор в дополнение к GraphQL.
Фрефем
Учебная серия обучает вас, как создать домофон с помощью GraphQL.
Удивительный график
Довольно исчерпывающий список ссылок и ресурсы GraphQL.
Итак, как вы надеваете новые знания GraphQl на практике? Вот несколько рецептов, которые вы можете попробовать:
Apollo + Graphcool + Next.js
Если вы уже знакомы с Next.js и rect, Этот пример Позвольте вам настроить конечную точку вашей графики с помощью GraphCool, а затем запрашивать его с помощью APOLLO.
Вулкандж
Учебное пособие вулкана Приведет вас к настройке простого слоя данных GraphQL, как на сервере, так и на клиенте. Поскольку вулкан является платформой All-in-One, это хороший способ начать без каких-либо установок. Если вам нужна помощь, не стесняйтесь к бросить на наш слабый канал !
GraphQL & React Tutorial
Блог Chroma имеет Учебное пособие по шести частям При создании приложения React/GraphQL после подхода для разработки компонентов.
Заключение
FrageQL может показаться сложным сначала, потому что это технология, которая достигает многих областей современного развития. Но если вы найдите время, чтобы понять базовые концепции, я думаю, вы узнаете, что многие из них просто имеют смысл.
Так будто ли вы в конечном итоге, используете его или нет, я верю, что стоит навести время, чтобы ознакомиться с GraphQL. Все больше и больше компаний и фреймворк принимают его, и она может вполне может стать одним из ключевых строительных блоков в Интернете в течение следующих нескольких лет.
Дать согласие? Не согласен? Вопросов? Просто дайте мне знать здесь в комментариях. И если вам понравилось эту статью, пожалуйста, рассмотрите их и делясь!