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

Egg.js

GraphQL в действии

1. Что такое GrqphQL

GraphQL — это стиль запросов API, ориентированный на данные.

GraphQL - это ориентированный на данные API-запрос, разработанный Facebook. Клиенту нужно только дать ему описание, а затем GraphQL может собрать данные, соответствующие описанию из базы данных и возврат ее.

2. Какую проблему решает GraphQL

В разработке мы обычно используем RESTful API, ориентированный на ресурсы. Обычно нам нужно несколько ресурсов для отображения страницы.Когда REST API запрашивает несколько ресурсов, будет загружено несколько URL-адресов, и GraphQL может получить все необходимые данные в одном запросе.

Решить болевые точки:

  • Формат данных, возвращаемых интерфейсом, не идеален для вызывающей стороны (внешнего интерфейса).

  • Для нескольких ресурсов используется только один запрос, что снижает нагрузку на сервер.

  • Поля данных контролируются вызывающей стороной

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

Пример:

Вот пример домашней страницы Nuggets, которую можно разделить на эти ресурсы (список статей, список категорий, список авторов)

REST API

Список статей/articles

[
    {
        title: 'xxx',
        content: 'xxx内容'
    }
]

Список категорий/categories

[
	{
		id: '1'
		name: '前端',
	},
	{
		id: '2'
		name: '后端',
	},
]

Список рекомендаций авторов/recommendationAuthor

[
    {
        id: 1,
        username: '张三'
    }
]

Вышеупомянутое предназначено для использования интерфейса REST для получения данных, необходимых для домашней страницы, и ему необходимо отправить запросы 3. Давайте посмотрим, как выглядит запрос GraphQL?

Интерфейс запроса GraphQL/graphql/query

query getHomePage() {
	articleList($first: 0) {
		title
        content
    },
    categoryList(){
        id
        name
    }，
    recommendationAuthorList($limit: 10) {
        id
        username
    },
      
}

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

3 важные концепции GraphQL

Вот еще несколько важных концепций GraphQL, на которые вы можете ссылатьсяGraphQLСм. документацию на официальном сайте.

3.1 Тип операции

Типом операции может быть запрос, мутация, подстановка, описывающая тип операции, которую вы собираетесь выполнить.

  1. запрос запрос
  2. мутация
  3. подписка на подписку, когда данные будут обновлены, сообщение будет отправлено

Каждый Graphql имеетqueryтип, может также иметьmutationтип. Они определяют точку входа для каждого запроса Graphql.

3.2 Скалярные типы

  • Int 有符号32位整数
  • Float 有符号双精度浮点数
  • String UTF-8字符序列
  • Boolean true或者false
  • ID ID标量类型标识一个唯一标识符

3.3 Типы объектов и поля

type Article{
	title: String
	author: [User]
}

Выше я объявил тип объекта GraphQL, здесь я объявляю два поля и указываю тип поля.

Строка является одним из встроенных скалярных типов и не может быть выбрана в запросах.

[Пользователь] представляет массив пользователей, и каждый элемент массива является объектом пользователя.

  • Как появился объект User?

    Использовать как статьюtypeобъявление ключевого слова

    type User {
	name: String
	age: Int
}

  • Объявите объект, что толку?

    При предоставлении внешней записи запроса через Query мы обычно используем объект как единицу. Думайте о каждом объекте как об интерфейсе.

3.3 Тип ввода

Запись об изменении предоставляется извне через Mutation. Иногда вам нужно передать весь объект как новый объект, и предыдущий скалярный тип не может быть удовлетворен.

Пример официального сайта:

4. Яйцо-график бой

Прежде чем клиент сможет его использовать, нам нужно определить структуру схемы на сервере.

4.1 Использование строительных лесов для создания проекта Egg

PS: Если загрузка слишком медленная, вы можете сначала установить скаффолдинг egg-init глобально, а затем выполнитьegg-init --type simple --registry chinaИспользуйте зеркало Taobao для создания проекта

4.2 Установите плагин graphql

  1. воплощать в жизньnpm i egg-apollo-server --save

  2. Добавьте соответствующую конфигурацию graphql в проект яйца, см. подробностиegg-apollo-server

вот и не пользовалсяegg-graphqlПлагин используется.egg-apollo-server

PS: config.graphql.subscriptions используется для аутентификации запроса grapql, в этой демонстрации его не нужно менять на false.

4.3 Определение схемы

├── app
│   ├── controller
│   │   └── home.js
│   ├── graphql
│   │   ├── article
│   │   │   ├── resolver.js
│   │   │   └── schema.graphql
│   ├── router.js
│   └── service
├── config
│   ├── config.default.js
│   └── plugin.js
├── package.json
└── package-lock.json

  • schema.graphql

    Определение типов и операций GraphQL

    extend type Query {
    articleList(first: ID): [Article]
}

type Article {
    id: ID
    title: String
    content: String
    author: Author
}
type Author {
    name: String
    age: Int
}

extend type Mutation {
    addArticle(title: String, content: String, author: AddAuthor): Article
}

input AddArticle {
    title: String
    content: String
}

input AddAuthor {
    name: String
    age: Int
}

  • resolver.js

    реализовать операцию

    'use strict';
const list = [
  {
    id: 1,
    content: 'aaa',
    title: '',
    author: {
      name: 'aaa',
      age: 18,
    },
  },
  {
    id: 2,
    content: 'bbb',
    title: '',
    author: {
      name: 'aaa',
      age: 18,
    },
  },
];
module.exports = {
  Query: {
    articleList: () => {
      return list;
    },

  },
  Mutation: {
    addArticle(root, params, ctx) {
      console.log(params);
      params.id = list.length++;
      list.push(params);
      return params;
    },
  },
};

4.4 отладка графа

браузер открытhttp://127.0.0.1:7001/graphqlотлаживать

PS: защиту csrf нужно отключить перед тестированием, иначе post запрос, отправленный отладкой, будет перехвачен

Левая сторона — это область запроса, где написан оператор операции. Справа результат выполнения.

Отладка запросов

{
  articleList(first: 0){
    id
    title
    content
    author{
			name
      age
    }
	}
}

Изменить отладку

mutation {
  addArticle(title: "title", content: "content", author: {name: "张三", age: 15}){
    title
    content
    id
  }
}
Категории