Пример минимальной подписки GraphQL с клиентом Apollo: простой чат в LimeGreenJS

Спецификация GraphQL включает подписки в выпуск Июнь 2018. Чтобы проиллюстрировать, насколько легко создать простой чат с Apollo Client, я привел минимальный пример. В примере используется серверная служба Graphcool.

Скриншот

Запрос подписки GraphQL

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

subscription Message {
  Message {
    mutation
    node {
      id
      createdAt
      text
      author
    }
  }
}

subscribeToMore

React Apollo предоставляет вспомогательную функцию subscribeToMore, которая позволяет объединить данные уведомления. Вот фрагмент кода.

const more = () => subscribeToMore({
  document: subscription,
  updateQuery: (prev, { subscriptionData }) => {
    if (!subscriptionData.data) return prev;
    const { mutation, node } = subscriptionData.data.Message;
    if (mutation !== 'CREATED') return prev;
    return Object.assign({}, prev, {
      allMessages: [node, ...prev.allMessages].slice(0, 20),
    });
  },
});

Полный код

К сожалению, сюда можно прикрепить не весь код. Посетите репозиторий GitHub, чтобы увидеть полный код. Он просто крошечный.

Рабочее приложение

Чтобы попробовать работающее приложение, посетите LimeGreenJS, найдите простой чат и нажмите ЗАПУСТИТЬ ПРИЛОЖЕНИЕ. Вы увидите что-то подобное на скриншоте выше.

Как вариант, вы можете запустить приложение по этой прямой ссылке.

Поиграйте с примером кода

Вы можете разветвить репо, и если вы настроите бэкэнд Graphcool и измените URL-адреса конечных точек в App.js, у вас будет собственное приложение, с которым вы можете поиграть. Просто отредактируйте код по своему усмотрению и запустите его в LimeGreenJS, чтобы увидеть изменения. (В настоящее время вам необходимо перезагружать браузер, прежде чем нажимать ЗАПУСТИТЬ ПРИЛОЖЕНИЕ каждый раз, когда вы меняете код. Я хочу улучшить это, используя подписки GraphQL, если GitHub API поддерживает это.)