Рубрики
Без рубрики

Graphql: Валидация клиента API

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

Автор оригинала: Kliment.

Я считаю, что большинство из вас знакомы со стажем старым добрым отдыхом API. Я использую это в большинстве моих приложений. Концепция отдыха API довольно хорошая, но она имеет свои проблемы.

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

Год назад я столкнулся с Graphql – я нашел это очень интересно и подумал, что мне пришлось больше исследовать. Позже я начал проект, в котором я решил использовать GraphQL. Когда был реализован GPRAHQL API, я начал работать над настроек интерфейса. Затем я обнаружил что-то, что взорвал мой разум. Graphql имеет библиотеку под названием ** Graphiql Это открывает конечную точку для изучения API GraphQL (. С GraphQL разработчик может получить доступ к схеме с сервера, что на самом деле документация для последней версии API.

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

Мне удалось адаптировать плагин Я обнаружил в моей внешней части. Этот плагин работает с Шаблонные литералы которые являются частью ES6. Сначала мне пришлось подключить это с моим сервером, чтобы работать. Все, что мне нужно было сделать, это модифицировать файл конфигурации плагина (Graphql.config.json), изменяя URL и заменив его моим URL-адресом сервера. Следующая часть была немного странной. Этот плагин ищет шаблон литерал имени graphql Отказ Итак, я создал функцию имени graphql которые отправили запрос на сервер.

image.png.png
export function graphql([query]) {
  return (variables) => {
    let body = {
      query: query,
      variables: variables
    };
    return fetch('/graphql', {
      method: 'POST',
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json',
        'authorization': localStorageService.getItem('AUTH_TOKEN')
      }
    }).then(response => response.json())
  }
}

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

Заключительная часть представляет эту функцию, в сочетании с плагином GraphQL в действие. Каждый запрос, который сделан на сервере, реализован как следующий пример.

const getById = (customerId) => graphql`
  query getCustomer($id: String!) {
    customer(id: $id) {
      id
      user {
        id
        email
        name
        surname
        referral
      }
    }
  }`({id: customerId});

Увлекательная вещь здесь, пока я пишу этот запрос GraphQL, у меня есть проверка и автозаполнение для синтаксиса GraphQL.

Кроме того, когда API обновляется, я получаю ошибки в моей IDE, где у меня неверные запросы.

image.png.png
image.png.png
GIF -> Автозаполнение и валидация

Для этой настройки я использую Server GraphQL, написанный в Nodejs, Webstorm и ES6 и синтаксис Esnext для JavaScript. Это ограниченная настройка, но стоит попробовать. После некоторых исследований я нашел плагины для визуального студийного кода и атом.

Graphql для vscode Язык-график Atom-graphql.