The Creative Network Session 6 — интеграция GraphQL в React с Lokka

Предыдущие сеансы

1. Вводный сеанс
2. Настройка редукса
3. Домашняя страница с React
4. Настройка GraphQL
5. Схема GraphQL V1

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

Код прошлой ночи и видео здесь.

Во время нашего последнего сеанса мы настроили V1 схемы данных на стороне сервера, которая поставляет данные на нашу домашнюю страницу. Теперь мы хотели получить эти данные из нашего клиентского приложения react/redux. Использование библиотеки для запроса GraphQL на самом деле не требуется, но мы подумали, что должны быть некоторые инструменты, которые упрощают этот процесс. Наш первый выбор — Клиент Appollo. Apollo действительно богат функциями, но вскоре мы осознали фундаментальную проблему подхода Apollo: он очень самоуверен в отношении архитектуры нашего клиентского приложения, а действие по выборке данных с сервера GraphQL тесно связано с определенным компонентом. См. пример ниже:

export default graphql(gql`
  query TodoAppQuery {
    todos {
      id
      text
    }
  }
`)(TodoApp);

graphql() это основная функция от Apollo, которая вызывает сервер GraphQL и извлекает данные. Как видите, вам нужно передать компонент в аргументе, чтобы это работало (в данном случае TodoApp — это компонент). Такой подход нам очень не понравился. Мы ТОЛЬКО хотим запросить сервер, получить ответ и сохранить данные ответа в нашем redux state . Мы должны иметь полный контроль над тем, как передавать эти данные различным компонентам. Вот здесь и пригодится Lokka. Это так просто и делает именно то, что мы хотели сделать:

import { Lokka } from 'lokka';
import { Transport } from 'lokka-transport-http';
import { FETCH_ALL_TOPICS } from '../../../ActionTypes';

const client = new Lokka({
  transport: new Transport('/graphql')
});

export function getTopics() {
  return function (dispatch) {
    client.query(`
      {
        allTopics {
          id
          title
          description
          thumbnail
          tags {
            id
            name
          }
        }
      }
    `).then(result => {
      dispatch({
        type: FETCH_ALL_TOPICS,
        topics: result.allTopics,
      });
    });
  };
}

Вот и все! Здесь client — инструмент от Lokka, и он выполняет простую работу: запрашивает наш сервер GraphQL и возвращает ответ API. Мы вольны взаимодействовать и отправлять этот ответ так, как считаем нужным. Для настройки требуется всего около 7 строк кода и 5 минут, чтобы запустить его. Это просто работает.

Как только Lokka заработала, все пошло гладко. Нам просто нужно было создать соответствующие редукторы и отправить результаты API в состояние редукции, а затем смонтировать данные в любой компонент, который должен использовать данные.

Надеюсь это поможет! Мы считаем, что Lokka действительно стоит попробовать для простого приложения GraphQL, такого как наше.