Как GraphQL улучшает архитектуру REST и как начать ее использовать и создавать GraphQL API

Если вы вообще знакомы с работой с REST API или современной веб-разработкой в ​​целом, вы, вероятно, слышали о GraphQL, но что это такое и зачем его использовать?

Что такое GraphQL?

Вы, вероятно, знакомы с языком структурированных запросов или SQL. Это способ запроса данных с помощью структурированных команд.

SELECT id, email FROM users

Мы ожидаем, что это вернет столбцы идентификатора и электронной почты из нашей таблицы пользователей. Мы можем представить, что в API REST одна из наших конечных точек, возможно, GET /users вызовет функцию, которая выполняет аналогичный оператор SQL в той или иной форме. Ответ, вероятно, будет выглядеть примерно так:

"data": {
     "users": [
            {"id": 1, "email: "[email protected]"}
            {"id": 2, "email: "[email protected]"}
            ....
]
}

Поскольку мы не хотим предоставлять доступ ко всей нашей базе данных, мы должны указать каждый отдельный маршрут для каждой возможной организации или конфигурации данных, которые мы будем отправлять в нашем ответе. Затем клиент, когда он извлекает данные, скорее всего, из какого-то внешнего приложения в React, Vue, Angular или другом пользовательском интерфейсе, ему придется переупорядочивать данные в нужный формат каждый раз, когда они извлекают. Кажется немного неэффективным возлагать это бремя на сторону клиента.

К счастью, GraphQL призван облегчить часть этого стресса. GraphQL также является языком запросов. Это язык, который мы можем использовать для запроса данных именно так, как мы хотим, указав структуру данных, которые мы хотим получить. GraphQL не зависит от языка, поэтому мы можем предоставить тот же согласованный API, но по-прежнему реализовывать его в выбранном нами стеке, предоставляя при этом более богатый уровень данных между клиентом и базой данных, чтобы избавить нас от необходимости программировать все эти REST-маршруты на бэкэнде и в нем. упрощает обнаружение API для клиента без всей объемной документации и делает приложения Front End более надежными, позволяя клиенту управлять структурой данных JSON.

Вот как запрос, аналогичный нашему предыдущему, будет выглядеть в GraphQL.

query getUsers {
users {
      id
      email
}
}

Мы получили бы тот же ответ, что и раньше, но теперь, изменив структуру нашего запроса JSON, нам нужно получить только те поля и данные, которые мы запрашиваем. Кроме того, анализ всего нашего запроса происходит на одной конечной точке, может быть, на каком-то маршруте, таком как POST /graphql, поэтому нам не нужно беспокоиться об управлении всеми различными конечными точками для нашей внутренней службы. Вот пример того, как мы можем сделать findOne в GraphQL.

# here we declare our operation 'query' and name it "findUser" then # we declare all the variables our query uses and they're type and 
# if they are required we use an "!" after the type name
query findUser($id: ID!) {
user(id: $id) {
       email
       bio
       location {
                 city
                 state
}
}
}
# then with our query we pass another JSON structure with all our 
# variables in key-value pairs
{
"id": 2
}

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

Подробнее о базовых типах Schema и GraphQL читайте здесь:



Пока мы только описали, как получать данные с помощью GraphQL, но что, если мы хотим создать или обновить данные? Для этого мы будем использовать mutation с. Вот пример.

mutation createNewUser($email: String!, $password: Password!) {
      createUser(email: $email, password: $password) {
               id
               email
               status
}
}
## then our variable hash 
{
"email": "[email protected]",
"password": "******"
}

По сути, тот же процесс, за исключением того, что вместо того, чтобы писать query перед нашим именем, мы пишем mutation, затем наш бэкэнд анализирует нашу операцию createUser , создает пользователя и отправляет ответ обратно со структурой, которую мы определили для значения нашей операции, поэтому наш ответ может выглядеть так:

{"data": {
"createUser": {
             "id": 3,
             "[email protected]"
             "status": "registered" 
}}
}

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

{
  __schema {
    types {
      name
      kind
      fields {}
    }
  }
}

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

Подробнее о самоанализе от команды GraphQL читайте здесь:



Вывод

Сегодня мы рассмотрели основные способы взаимодействия с сервисом GraphQL и почему у него такая мощная архитектура и язык! Я лично создал свой сайт shedaddy.com, используя Gatsby JS, платформу, которая использует GraphQL для простого создания статических сайтов из любой комбинации источников данных с компонентами React в качестве шаблонов, каждый из которых получает реквизиты, выполняя запросы GraphQL. Надеюсь, вы чувствуете себя более комфортно с этой темой и, возможно, даже рады внедрить GraphQL и в свой следующий бэкенд!

Приветствую вас, дорогие.