Статья знакомит вас с GraphQL

GraphQL

Автор: Фан Фан

Время чтения составляет около 10 ~ 15 минут

что такое API

Мы часто говорим о термине, называемомAPIИли интерфейс. Когда мы взаимодействуем с сервером, мы будем говорить об интерфейсе данных. При взаимодействии с клиентом мы будем говорить JSAPI.APIОбъяснение таково:APIдаApplication Programming Interface(интерфейс прикладного программирования). Как следует из названия, это набор предопределенных функций, предназначенных для предоставления приложениям и разработчикам возможности доступа к набору подпрограмм, основанных на программном или аппаратном обеспечении, без необходимости доступа к исходному коду или понимания деталей внутреннего устройства. работы.

Что такое GraphQL

GraphQLдаFacebookРазработал язык запросов API, а не базу данных. Это дает нам более эффективный способ проектирования, создания и использования API. По сути, это замена REST.

GraphQL очень удобен для интерфейса, что упрощает его для разработчиков интерфейса.GraphQL также имеет ряд библиотек для интерфейса (Apollo, Relay или Urql), а интерфейс может использовать такие функции, как кэширование и реальный обновление пользовательского интерфейса.

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

Через три года после того, как Facebook выпустил GraphQL, сообщество было относительно полным, и многие компании используют его.

Использование GraphQL

Используйте список игр, чтобы проиллюстрировать использование GraphQL.

подготовка данных

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

[
    { id: 1, game_name: "风暴魔域（注册送好礼）", short_name: "moyu", score: 4.2625498 },
    { id: 2, game_name: "侍魂胧月传说", short_name: "shihun", score: 4.3800301 }
]

Далее нам нужно представить несколько общих функций GraphQL.

схема

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

Этот язык схем очень полезен, потому что он более интуитивно понятен, какие типы имеет API, и он очень удобочитаем.

На первом этапе использования graphql нам нужно написать собственную схему на сервере graphql.

type Game {
  id: ID!
  game_name: String!
  short_name: String!
  score: Int
}

type Query {
  games: [Game!]!
  game(id: ID!): Game!
}

type Mutation {
  createGame(id: ID!, game_name: String!, short_name: String!, score: Int): Game!
  updateGame(id: ID!, game_name: String, short_name: String, score: Int): Game!
  deleteGame(id: ID!): Game!
}

тип

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

type Game {
  id: ID!
  game_name: String!
  short_name: String!
  score: Int
}

Типы имеют поля, которые возвращают данные определенного типа. Например, с типом Game, который мы создали выше, у нас есть несколько полей game_name, short_name и score. Поля типа могут быть любого типа и всегда возвращают тип данных, например Int, Float, String, Boolean, ID, список типов объектов или пользовательский тип объекта.

Знак ! означает, что это поле не может быть пустым, поэтому в приведенном выше типе игры пустым может быть только счет.

запрос

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

type Query {
  games: [Game!]!
  game(id: ID!): Game!
}

Здесь мы определяем два запроса, один — для запроса всех игр, другой — для запроса игры с указанным идентификатором.

мутация (изменение, добавление, удаление и модификация)

В GraphQL изменения — это способ изменения данных на сервере и получения обновленных данных, которые можно рассматривать как добавления, удаления и изменения, которые мы обычно используем.

type Mutation {
  createGame(id: ID!, game_name: String!, short_name: String!, score: Int): Game!
  updateGame(id: ID!, game_name: String, short_name: String, score: Int): Game!
  deleteGame(id: ID!): Game!
}

подписка

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

Базовая схема подписки записывается так:

subscription {
  games {
    id
    game_name
    short_name
    score
  }
}

Поговорив о нескольких общих функциях graphql, давайте опишем, как мы сообщаем graphql, где на стороне сервера находятся нужные нам данные.

резольвер

Сообщество GraphQL предоставляет промежуточное программное обеспечение, поддерживающее http, express-graphql. С его помощью вы можете легко реализовать сервер, поддерживающий graphql. Поскольку на этот раз мы не вводим в основном конструкцию сервера, вы можете обратиться к github, если вы заинтересованы . Изначально GraphQL был придуман для повышения эффективности разработки фронтенда.В данной статье описывается только использование во фронтенде,но GraphQL можно использовать и на других языках.Если интересно,можете проверить сами.

На стороне сервера должен быть файл js для распознавателей, который используется, чтобы сообщить graphql, откуда извлекать данные, и описать обработку данных.

import { games } from "./db";

const resolvers = {
  Query: {
    game: (parent, { id }, context, info) => {
      return games.find(user => game.id == id);
    },
    games: (parent, args, context, info) => {
      return games;
    }
  },
  Mutation: {
    createGame: (parent, { id, game_name, short_name, score }, context, info) => {
      const newGame = { id, game_name, short_name, score };

      games.push(newGame);

      return newGame;
    },
    updateGame: (parent, { id, game_name, short_name, score }, context, info) => {
      let newGame = games.find(game => game.id === id);

      newGame.game_name = game_name;
      newGame.short_name = short_name;
      newGame.score = score;

      return newGame;
    },
    deleteGame: (parent, { id }, context, info) => {
      const gameIndex = games.findIndex(game => game.id === id);

      if (gameIndex === -1) throw new Error("Game not found.");

      const deletedGames = games.splice(gameIndex, 1);

      return deletedGames[0];
    }
}
};

export default resolvers;

Выше приведен полный файл преобразователя, соответствующий нашей схеме выше.

Как должен писать клиент

Выше перечислены все настройки и операции на стороне сервера.Какие правила должен использовать клиент для взаимодействия с сервером?

В качестве примера возьмем запрос списка игр:

query {
  games {
    id
    game_name
    short_name
    score
  }
}

Чтобы запросить игру:

query {
  game(id: 1) {
    id
    game_name
    short_name
    score
  }
}

Если вам нужно создать игру

mutation {
  createGame(id: 3, game_name: "王者荣耀", short_name: "yxzj", score: 4.7686622) {
    id
    game_name
    short_name
    score
  }
}

Обслуживание через HTTP

Выше мы говорили о том, как это должны делать клиент и сервер, но взаимодействие между фронтом и бэкендом все же неизбежно для передачи данных по протоколу http. Итак, как мы работаем с GraphQL?

Прежде всего, нам еще нужно убедиться, что наш сервер GraphQL поддерживает http.

Если взять запрос в качестве примера, то, что нам нужно получить на стороне сервера, — это информация о запросе, как показано ниже:

query {
  games {
    game_name
  }
}

Как передать эти данные на сервер?

В режиме получения:

http://myapi/graphql?query={games{game_name}}

Переменные запроса можно отправлять в виде строк в кодировке JSON в дополнительном параметре запроса с именем variable.

Если необходимо передать много параметров, рекомендуется использовать метод post для передачи данных.

Текущие общие методы взаимодействия с данными

В настоящее время для взаимодействия с сервером мы часто используем RESTful API. Архитектура REST (репрезентативная передача состояния) относится к поиску ресурсов URI, использованию глаголов HTTP (GET, POST, DELETE, DETC) для описания операций и использованию кода состояния HTTP для передачи информации о состоянии сервера. Существует несколько основных принципов REST: все в сети абстрагируется в ресурсы, каждый ресурс имеет уникальный идентификатор ресурса, один и тот же ресурс имеет несколько представлений (xml, json и т. д.). Эти операции не изменяют идентификатор ресурса, и все операции не имеют состояния.

Например, давайте поговорим о нашем игровом интерфейсе.Для «игр» у нас есть четыре операции: добавить, удалить, изменить и проверить.Как определить интерфейс RESTful?

Добавьте игру, uri:n.ssp.qq.com/api/gameТип интерфейса: ПОЧТОВЫЙ

Удалить игру, uri:n.ssp.qq.com/api/gameТип интерфейса: УДАЛИТЬ

Изменить игру, uri:n.ssp.qq.com/api/gameТип интерфейса: ПУТ

Найдите игру, uri:n.ssp.qq.com/api/gameТип интерфейса: ПОЛУЧИТЬ

RESTful API против GraphQL

Graphql的交互方式

RESTful的交互方式

Из сравнения двух приведенных выше изображений мы можем обнаружить, что restful API является многозаходным, и каждый сервер запросов имеет определенный возврат.Если клиенту нужны какие-то новые данные, это обязательно потребует модификации сервера. Запрос graphql является одной записью.После того, как схема установлена ​​на сервере, она может предсказуемо вернуть информацию, требуемую клиентом, в соответствии с информацией запроса, переданной клиентом, без участия модификации сервера.

Плюсы и минусы GraphQL

преимущество

  • Легко читаемый код — это документация
  • Удобный интерфейс, сбор данных может сократить разработку на стороне сервера
  • Упростите объединение данных и сократите количество запросов
  • Строгая типизация

недостаток

  • Почему GraphQL бесполезен: Zhihu https://www.zhihu.com/question/38596306

Ресурсы для изучения GraphQL

  • Официальная документация по GraphQL
Категории