GraphQL: користувацькі типи
GraphQL робить об'єкт доступним GraphQLScalarType
що дозволяє створювати більш складні та персоналізовані типи, ніж запропоновані за замовчуванням. Спочатку будемо налаштувати сервер GraphQL
з Express
, потім детально розповісти про використання GraphQLScalarType
.
GraphQL пропонує керувати даними за допомогою різних об'єктів, кожен з яких представляє тип даних.
Ось неповний список з них:
GraphQL також надає об’єкт GraphQLScalarType
що дозволить нам створювати власні типи! Саме цей об’єкт нас тут зацікавить.
Але перед створенням нашого користувацького типу with GraphQLScalarType
, ми спочатку налаштуємо сервер GraphQL з Експрес щоб перевірити наш спеціальний тип.
Трохи коду:
// server.js
сопзЬ дані = вимагати('./datas.json')
сопзЬ експрес = вимагати('експрес')
сопзЬ graphQLHTTP = вимагати('експрес-graphql')
сопзЬ {
GraphQLObjectType
} = вимагати('GraphQL')
сопзЬ додаток = експрес()
сопзЬ PORT = 8083
додаток.слухати(PORT, _ => втішити.журнал(`сервер працює на порту %s`, PORT))
Ми імпортували express
, express-graphql
et graphql
потім налаштуйте наш сервер для прослуховування порту 8083
.
сопзЬ {
GraphQLObjectType,
GraphQLInt,
GraphQLString
} = вимагати('GraphQL')
сопзЬ UserType = new GraphQLObjectType({ім'я: 'користувач', опис: 'Визначте користувача',
поля: () => ({
'id': {
'тип': GraphQLInt,
'description': 'Ідентифікатор користувача'
},
'ім'я': {
'тип': GraphQLString,
'description': 'Ім'я користувача'
},
'прізвище': {
'тип': GraphQLString,
'description': 'Прізвище користувача'
},
'e-mail': {
'тип': GraphQLString,
'description': 'Електронна адреса користувача'
},
'пол': {
'тип': GraphQLString,
'description': 'Стать користувача'
} }) })
Ми створили тип User
з класом GraphQLObjectType
на основі даних нашого datas.json
яким ми будемо користуватися пізніше. Кожне поле тут набирається за допомогою класів типів GraphQL. Ми використовували GraphQLInt
et GraphQLString
не забувши, звичайно, їх імпортувати.
сопзЬ {
/* ... */
GraphQLSchema } = вимагати('GraphQL')
/* ... */
сопзЬ запит = new GraphQLObjectType({ім'я: 'Запити', опис: 'Визначте запити',
поля: () => ({ getUserByMail: { тип: Тип користувача, аргументи: { Електронна пошта: { тип: GraphQLString } },
рішення: (_, { E-mail }) => дані.знаходити(користувач => e-mail === користувач.e-mail) } }) })
сопзЬ схема = new GraphQLSchema({запит})
сопзЬ додаток = експрес()
сопзЬ PORT = 8083
додаток.використання('/', graphQLHTTP({ діаграма: діаграма, графіка: правда, гарненько: правда,
помилка формату: помилка => ({ повідомлення: помилка.повідомлення, оренда: помилка.місць, стек: помилка.стек
}) }))
Змінна query
а точніше метод fields
хто його створив, містить список запитів, які ми надаємо.
Вона складається:
- імені
getUserByMail,
- аргументу, який буде використаний
email,
- типу, пов'язаного з цим аргументом, тут це тип
String
томуGraphQLString,
- резольвера, функції
resolve
який отримає дані наших користувачів.
Резолвер getUserByMail
тепер на місці і дозволяє запитувати дані, надавши електронний лист як аргумент. Ми також використовували модуль graphql-js
і функціонувати graphQLHTTP
як проміжне програмне забезпечення. Тут коренева URL-адреса "/"
тепер підтримується нашим проміжним програмним забезпеченням і схемою GraphQLSchema
.
Щоб запустити сервер, просто виконайте таку команду:
вузол server.js #або `yarn watch`, якщо ви клонували сховище (і маєте пряжу в усьому світі)
Графічний інтерфейс graphQL graphiql
доступний через URL-адресу http://localhost:8083
Ми можемо перевірити, чи правильно працює наш резольвер із цим запитом (для використання в інтерфейсі graphiql
):
{ користувач: getUserByMail(e-mail: "ehuntern@huffingtonpost.com") { id ім'я прізвище } }
user
на початку запиту є псевдонім нашого резольвера getUserByMail`
Тепер, коли наш сервер працює належним чином, давайте скористаємося об’єктом GraphQLScalarType
щоб створити власний тип для електронних листів. один EmailType
.
сопзЬ {
/* ... */
GraphQLScalarType, GraphQLError, Kind, GraphQLSchema } = вимагати('GraphQL')
/ ** ...**/
сопзЬ EmailType = new GraphQLScalarType({ім'я: 'Електронна адреса',
сериализации: значення => значення,
parseValue: значення => значення,
parseLiteral(сук) {
повертати сук.значення
} })
Тож ми створили ane екземпляр об'єкта EmailType
через конструктор GraphQLScalarType
даючи його як параметр:
- Атрибут
name
щоб назвати наш новий тип даних. - Атрибути
serialize
etparseValue
це дві функції «серіалізації», які забезпечують дійсність вхідного значення. parseLiteral
це функція, яка повертає об’єкт, що містить інформацію про вузолAST
* нашого вхідного значення.
Воір АСТ ou Дерево абстрактного синтаксису або французькою Абстрактне синтаксичне дерево
Ось приклад цього об'єкта:
{вид: 'StringValue', значення: 'ehuntern@huffingtonpost.com', лок: {початок: 31, кінець: 60
}}
Дивіться його AST
Тому він у цій функції parseLiteral
що ми збираємося налаштувати елементи керування завдяки цьому об’єкту сук.
У нас є доступ до типу вузла AST
з атрибутом kind
і його значення з атрибутом value
.
parseLiteral(сук) {
if (сук.вид ! == Дитина.STRING) {
кидати new Помилка GraphQLE('Помилка запиту: електронна адреса має бути рядком ' + сук.вид, [ast]); }
if (!сук.значення.матч(/@/)) {
кидати new Помилка GraphQLE('Помилка запиту: недійсна електронна адреса', [ast]); }
повертати сук.значення
}
Тут ми починаємо з перевірки того, що наше значення має тип String
, через перерахування GraphQL Kind
, який надає нам список різних типів вузлів AST
.
Потім ми робимо підсумкову перевірку значення для перевірки, а потім, якщо дві умови виконуються, повертаємо наше значення!
EmailType
закінчено, і тепер ми можемо ним користуватися в описі запиту:
сопзЬ запит = new GraphQLObjectType({ім'я: 'Запити', опис: 'Визначте запити',
поля: () => ({ getUserByMail: { тип: Тип користувача, аргументи: { Електронна пошта: { тип: EmailType // Ici
} },
рішення: (_, { E-mail }) => дані.знаходити(користувач => e-mail === користувач.e-mail) } }) })
Аргумент email тепер має відповідати власному типу EmailType
!
Підводячи підсумок, можна сказати так GraphQLScalarType
дуже практичний, простий у використанні і дозволяє нам швидко створювати власні типи.
Цей об'єкт дозволяє нам керувати входами вище за потоком і таким чином уникнути звичайних методів перевірки подібно до isEmail()
, isPhone()
, isBlabla()
і т.п ...
Томас Рембо, розробник в JS Республіка
Github, що містить джерело
yarn install
yarn watch
- Набір даних, згенерований за допомогою mockaroo