Введение в GraphQL: схема, преобразователи и многое другое

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

В этом посте я познакомлю вас с некоторыми концепциями GraphQL с акцентом на схему GraphQL, преобразователь и язык запросов. Если вы хотите продолжить, вам потребуется базовое понимание JavaScript (особенно стрелочных функций в ES6) и Node.js. Без лишних слов давайте приступим к настройке нашей среды разработки.

Создание проекта

Мы будем создавать сервер GraphQL, который будет отвечать на запросы о выполнении различных типов операций в GraphQL. Откройте терминал, перейдите в каталог по вашему выбору и выполните следующие команды:

mkdir graphql-intro && cd graphql-intro
npm init -y
npm install graphql-yoga

Эти инструкции использовались для создания папки для проекта, инициализации нового проекта Node.js и добавления graphql-yoga зависимость от проекта. graphql-yoga — это библиотека, которая помогает вам легко создавать серверные приложения GraphQL, предоставляя разумные значения по умолчанию, и включает в себя другие библиотеки GraphQL, такие как subscriptions-transport-ws который является сервером WebSocket для подписок GraphQL, apollo-server который представляет собой структуру веб-сервера, и graphql-playground который представляет собой интерактивную среду разработки GraphQL, которую вы можете использовать для тестирования своего сервера. После установки зависимостей мы продолжим и определим нашу схему GraphQL.

Схема GraphQL

Схема GraphQL находится в центре каждого сервера GraphQL. Он определяет API сервера, позволяя клиентам узнать, какие операции может выполнять сервер. Схема написана с использованием языка схемы GraphQL (также называемого языком определения схемы, SDL). С его помощью вы можете определить типы объектов и поля для представления данных, которые можно получить из API, а также корневые типы, которые определяют группу операций, разрешенных API. Типы корней — это запрос тип, мутация тип и подписка type, которые представляют собой три типа операций, которые вы можете выполнять по запросу с сервера GraphQL. Тип запроса является обязательным для любой схемы GraphQL, а два других являются необязательными. Хотя мы можем определять пользовательские типы в схеме, спецификация GraphQL также определяет набор встроенных скалярных типов. Они есть Интерн., Плавать, логический, Нитьа также Я БЫ.

Давайте продолжим и создадим схему. Добавить новый файл src/index.js со следующим содержанием:

const typeDefs = `
type Book {
    id: Int!
    title: String!
    pages: Int
    chapters: Int
}

type Query {
  books: [Book!]
  book(id: Int!): Book
}
`;

То, что у нас есть выше, — это схема GraphQL. В нем мы определили Книга тип с четырьмя полями и корнем Запрос введите с двумя полями. Два поля в корневом типе запроса определяют, какие запросы/операции может выполнять сервер. books поле возвращает список Книга тип, и книга поле вернет Книга тип, основанный на id передается в качестве аргумента книга запрос. Каждое поле в типе GraphQL может иметь ноль или более аргументов. Восклицательный знак следует за скалярными типами, назначенными некоторым полям. Это означает, что поле или аргумент не могут принимать значения NULL.

Реализация распознавателей

Наш API может выполнять две операции запроса — одну для получения массива книг, а другую — для получения книги на основе ее я бы. Следующим шагом для нас является определение того, как эти запросы разрешаются, чтобы правильные поля возвращались клиенту. Это можно сделать, определив функцию разрешения для каждого поля в схеме. Помните, я упоминал, что у GraphQL есть алгоритм выполнения? Реализация этого алгоритма выполнения — это то, что преобразует запрос от клиента в фактический результат, перемещаясь по каждому полю в схеме и выполняя функцию «преобразователя» для определения результата.

Добавьте приведенный ниже код в index.js:

const books = [
  {
    id: 1,
    title: "Fullstack tutorial for GraphQL",
    pages: 356
  },
  {
    id: 2,
    title: "Introductory tutorial to GraphQL",
    chapters: 10
  },
  {
    id: 3,
    title: "GraphQL Schema Design for the Enterprise",
    pages: 550,
    chapters: 25
  }
];

const resolvers = {
  Query: {
    books: function(root, args, context, info) {
      return books;
    },
    book: (root, args, context, info) => books.find(e => e.id === args.id)
  },

  Book: {
    id: parent => parent.id,
    title: parent => parent.title,
    pages: parent => parent.pages,
    chapters: parent => parent.chapters
  }
};

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

function (root, args, context, info) { //function implementation }

Обратите внимание, что я использовал синтаксис стрелочных функций в ES6 для объявления некоторых функций преобразователя в коде.

Это четыре аргумента, которые получает каждая функция распознавателя. Они описаны как:

  1. корень: Этот аргумент иногда называют родитель. Он содержит результат ранее выполненного распознавателя в цепочке вызовов. Например, если мы назовем книга запрос, он начнет выполняться с корневого поля книга в корневом типе запроса. После этого он выполнит распознаватели в Книга введите, чтобы получить значения для этих полей. В приведенном выше коде я назвал первый аргумент для преобразователей полей в Книга в качестве parent. Значением аргумента будет объект Book, полученный от родительского преобразователя. Вот почему мы звоним parent.titleнапример, чтобы вернуть значение для этого поля.

  2. args: это аргументы, предоставляемые полю в запросе GraphQL. Следуя нашему примеру, это будет я бы аргумент в пользу книга запрос book(id: Int!): Book.

  3. контекст: это объект, который каждый преобразователь может читать или записывать. Здесь вы можете хранить объекты, предоставляющие доступ к базе данных или содержащие информацию из заголовков HTTP-запросов. В отличие от параметров root и args, их значения зависят от того, на каком уровне в цепочке выполнения вызывается преобразователь. Объект контекста одинаков для всех преобразователей, и вы можете записывать в него контекстную информацию по мере необходимости. Мы воспользуемся этим аргументом в следующем посте, так что следите за обновлениями!

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

Настройка сервера

Определив нашу схему и преобразователи, мы приступим к настройке сервера GraphQL. Не закрывая index.js, обновите его следующим кодом:

const { GraphQLServer } = require("graphql-yoga");

const typeDefs = ...

const books = [
  ...
];

const resolvers = { ... };

const server = new GraphQLServer({
  typeDefs,
  resolvers
});
server.start(() => console.log(`Server is running on `));

Здесь мы импортировали GraphQLServer от graphql-yoga библиотеку и использовал ее для создания объекта сервера с нашим определением схемы и распознавателями. На этом наш сервер готов. Он знает, какую операцию API обрабатывать и как ее обрабатывать. Давайте продолжим и протестируем сервер.

Язык запросов GraphQL

Откройте командную строку и выполните команду node src/index.js для запуска сервера. Тебе следует увидеть Server is running on залогинился в консоли. Откройте в браузере этот URL. Он будет отображать красивый интерфейс. Это GraphQL игровая площадка. Он позволяет протестировать работу сервера. Если вы создали REST API, подумайте об этом как об альтернативе Postman для GraphQL.

Теперь давайте попросим сервер дать нам все книги, которые у него есть. как нам это сделать? Мы делаем это с помощью языка запросов GraphQL, еще одной концепции GraphQL, которая позволяет различным устройствам легко запрашивать данные по своему усмотрению, обслуживаемые одним и тем же API GraphQL.

Перейдите на игровую площадку GraphQL и выполните следующий запрос:

query {
  books{
    id
    title
    chapters
  }
}

Вы должны получить тот же результат следующим образом

запрос.gif

Вы заметите, что структура запроса аналогична языку схемы. books поле является одним из корневых полей, определенных в типе запроса. Затем внутри фигурных скобок у нас есть выбор, установленный в поле книг. Поскольку это поле будет возвращать список типа Книга, мы указываем поля типа Книга, которые мы хотим получить. Мы опустили pages поле, поэтому оно не возвращается запросом.

Мы можем протестировать book(id) запрос и посмотреть, что он нам дает.

запрос-с-аргументом.gif

В этом запросе мы присвоили аргументу id значение 3, и он вернул именно то, что нам нужно. Вы заметите, что у меня есть два запроса, книги а также книга (id: 3). Это правильный запрос. Движок GraphQL знает, как с этим справиться.

Что дальше?

До сих пор я рассмотрел некоторые основы GraphQL. Мы рассмотрели определение схемы с помощью языка определения схемы, написание функций преобразователя и запросы к GraphQL API. Я объяснил четыре параметра, которые получает каждая функция разрешения, и мы использовали один из параметров для разрешения полей для типа книги. Мы создали наш сервер, используя graphql-yoga и использовали игровую площадку GraphQL для тестирования нашего API. Я объяснил, что в GraphQL у нас есть три типа операций. В этом посте мы работали с операцией запроса, а в следующем посте мы рассмотрим мутации и доступ к базе данных для хранения и извлечения данных. Мы обновим нашу схему, чтобы мы могли запрашивать связанные данные, например, авторов с их книгами или книги от определенного издателя. Так что следите за обновлениями!!

Вот ссылка на проект GitHub если вы не следовали написанию кода самостоятельно.

Первоначально опубликовано на Блог Телерика

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *