Реакция выборки данных с помощью реле

Ниже приведен упрощенный пример компонента ProfilePicture Представьте, что у нас есть ProfilePicture Нам нужно получить данные для отображения аватара пользователя. Затем мы создаем Relay HOC для запроса изображений профиля пользователя из базы данных. HOC передает эти данные запроса дочернему компоненту ProfilePicture:

 class ProfilePicture extends React.Component {
  // A standard Profile Picture component
}

// This is our Higher Order Component. It fetches the data to pass
// as props to Profile Picture
module.exports = Relay.createContainer(ProfilePicture, {
  fragments: {
    user: () => Relay.QL`
      fragment on User {
        profilePicture(size: $size) {
          uri,
        },
      }
    `,
  },
});

Наш компонент ProfilePicture По сути, это то, как реле запускает поток потока. Компонент вызывает эти функции поддержки ретрансляции, что эквивалентно вызову действия Flux. Это заставляет ретранслятор получать последние запрошенные данные. После этого он заполняет свое внутреннее хранилище и передает его дочернему компоненту представления HOC в качестве реквизита.

GraphQL

Приведенный выше пример может выглядеть немного странно, особенно эта часть:

 Relay.QL`
      fragment on User {
        profilePicture(size: $size) {
          uri,
        },
      }
    `,

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

1. Создать схему GraphQL
2. Создать сервер GraphQL

Следует отметить, что может потребоваться значительный объем работы для преобразования существующего проекта в схему GraphQL и настройки или изменения существующего сервера для обеспечения совместимости с GraphQL. При запуске проекта с нуля, возможно, имеет смысл немедленно использовать Relay. Facebook предоставляет Relay Starter Kit, который выглядит как отличное решение для запуска и запуска с Relay и GraphQL в новом проекте.

Реле без GraphQL

Принимая во внимание все дополнительные накладные расходы, необходимые для настройки GraphQL, ретранслятор Facebook может оказаться неподходящим инструментом для существующих проектов. К счастью, есть еще одна библиотека, вдохновленная Relay, которая может лучше подходить для этих проектов, называемая «реакция-передача». реакция-передача — это проект с открытым исходным кодом, цель которого — стать «вдохновленной ретранслятором библиотекой, основанной на Promises вместо GraphQL».

Если мы обновим приведенный выше пример профиля, чтобы использовать react-trasmit

 // Import Transmit
import Transmit from "react-transmit";

class ProfilePicture extends React.Component {
  // A standard Profile Picture component
}

// This is our Higher Order Component. It fetches the data to pass
// as props to Profile Picture
Transmit.createContainer(ProfilePicture, {
  fragments: {
    user: (userId) => {
      return new Promise(function(resolve, reject) { 
          // Do some Ajax here and resolve the promise
      });
    }
  },
});

Пример реагирования-передачи очень похож на пример ретрансляции. Однако в этом случае user

Текущее состояние реле

Facebook выпустил «технический превью» с открытым исходным кодом Relay . У них есть несколько отличных примеров в репозитории, которые показывают, как работать с Relay, и очень подробный раздел документации .

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

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

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

Выводы

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

Теперь твоя очередь. Ты знал Эстафету? Вы когда-нибудь использовали его в одном из своих проектов?