Створюйте власні типи за допомогою GraphQLScalarType

GraphQL: користувацькі типи

GraphQL робить об'єкт доступним GraphQLScalarType що дозволяє створювати більш складні та персоналізовані типи, ніж запропоновані за замовчуванням. Спочатку будемо налаштувати сервер GraphQL з Express, потім детально розповісти про використання GraphQLScalarType.
GraphQL пропонує керувати даними за допомогою різних об'єктів, кожен з яких представляє тип даних.
graphqlhub-логотип
Ось неповний список з них:

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. Ми використовували GraphQLIntet 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 et parseValue це дві функції «серіалізації», які забезпечують дійсність вхідного значення.
  • 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
[actionbox color=”default” title=”” description=”JS-REPUBLIC – сервісна компанія, що спеціалізується на розробці JavaScript. Ми є затвердженим навчальним центром. Знайдіть всю нашу технічну підготовку на нашому партнерському сайті, присвяченому навчанню” btn_label=”Наше навчання” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]