Graphql -where - простая, но мощная клиентская утилита GraphQL.

GraphQL - это мощная система API, основанная на объявлении схемы, описывающей возможности вашего бэкэнда, и последующем запросе этой схемы с помощью приятного языка, который проецирует данные в нужную вам форму. Но это всего лишь один из способов его использования. У языка запросов GraphQL есть так много других применений, особенно для случаев на клиенте, когда импорт и запуск всей вашей схемы GraphQL не имеет смысла. Введите graphql -where, библиотеку, на которой работает Apollo Client.

Что оно делает?

Как вы помните, для написания схемы GraphQL на сервере требуется объявить набор типов с полями и преобразователями. Поскольку graphql -where не использует схему, вместо этого вы можете написать только один преобразователь, который вызывается для каждого поля запроса:

(fieldName, rootValue, args, context, info) => any

Затем вы можете запустить этот преобразователь с запросом GraphQL следующим образом:

import graphql from 'graphql-anywhere'

graphql(resolver, query)

Он поддерживает все функции GraphQL, включая фрагменты, переменные, директивы, псевдонимы и многое другое. Прочтите полную документацию, чтобы узнать обо всех скучных деталях, но давайте рассмотрим несколько интересных примеров!

Примеры

Оказывается, вы можете делать много полезных вещей с помощью библиотеки, которая обрабатывает запросы GraphQL за вас.

Фильтрация большого результата

Одна из лучших особенностей GraphQL заключается в том, что вы получаете только те данные, которые запрашиваете. Теперь вы можете воспользоваться этим даже без сервера GraphQL, написав всего две строки кода с помощью graphql -where (все остальные строки устанавливают данные):

Вы также можете использовать эту функцию как часть утилиты для фильтрации свойств для ваших компонентов React, как описано здесь!

Чтение из магазина Redux

Если вы уже используете Apollo Client, то ваши данные Redux GraphQL будут управляться за вас. Но если вы используете какой-либо другой метод для заполнения своего хранилища Redux и хотите использовать GraphQL только для чтения из него (возможно, в рамках подготовки к началу работы с настоящим GraphQL API на сервере), вам понадобится что-то для чтения этих данных. из магазина и привести его в соответствие с формой запроса GraphQL. Для этого вы также можете использовать graphql -where!

Вот пример чтения из магазина, созданного с помощью компаньона Redux Normalizr:

В зависимости от формы вашего хранилища Redux вам может потребоваться другой код в преобразователе.

Генерация React PropTypes

Если вы следуете общепринятому стилю написания кода React, вы, вероятно, разместите объявления типа prop для всех своих компонентов. Поскольку результаты GraphQL глубоко вложены и иногда сложны, вы можете в конечном итоге набрать много шаблонного кода, если хотите четко указать свои реквизиты. Что, если бы вы могли просто использовать запрос, который вы использовали для получения данных, в качестве валидатора для этой опоры? Теперь вы можете!

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

Написание собственных утилит

Процесс выполнения запроса с использованием библиотеки graphql -where аналогичен обычному GraphQL, за исключением того, что в нем нет информации о типе и не поддерживается асинхронная загрузка данных (поскольку он разработан для клиента). Как правило, преобразователь вызывается один раз для каждого поля запроса с предоставленными аргументами, а результат из этого поля передается всем дочерним элементам как rootValue.

Поскольку здесь нет схемы, у нас не может быть отдельных преобразователей для разных типов и полей. Вместо этого мы получаем fieldName в качестве аргумента и можем передавать информацию о типе специальным образом через корневое значение. Первый шаг к созданию вашей утилиты graphql -where - это спросить: что должно содержать значение root? Поскольку это информация, передаваемая потомкам, которая обеспечивает рекурсивную природу GraphQL, это основное соображение.

Хотите работать с такими инструментами? Внесите вклад на GitHub или устройтесь на работу над Apollo!