Получение переменных для фрагмента запроса Relay из внешнего хранилища

При написании фрагмента запроса GraphQL как части RelayContainer я боролся с тем, как установить переменные запроса в определенных ситуациях. Основы, изложенные в документации, просты. достаточно. Но, учитывая статический характер этих запросов и то, что RelayContainer является компонентом React более высокого порядка, я не уверен, что лучший способ справиться с этим, когда ввод, необходимый для запроса, - это объект из внешнего источника, такого как хранилище Redux. . У меня нет никакого способа получить данные из этого хранилища до загрузки компонента, поэтому в качестве обходного пути я использовал директиву @include и установил для переменной ready значение true после загрузки компонента:

class ListData extends React.Component {

  // ... proptypes 

  componentWillMount() {
    const { listDataInfo } = this.context.store.getState(); // Retrieve from Redux store

    this.props.relay.setVariables({
      input: {
        id: listDataInfo.id,
        user: listDataInfo.user
      },
      inputReady: true,
    });

    // The query will now execute and fetch all the data
  }

  render() {
    return (
      {/* view */}
    )
  }
}

export default Relay.createContainer(ListData, {
  initialVariables: {
    input: null,
    inputReady: false,
  },
  fragments: {
    listData: () => Relay.QL`
      fragment on ListDataQuery {
        listData(input: $input) @include(if: $inputReady) {
          city
          state
          zip
          phone
        }
      }
    `,
  },
});

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

  1. Оставить как есть
  2. Преобразуйте его в мутацию, которая будет выполняться в методе жизненного цикла компонента. Я бы не стал этого делать, поскольку это удаляет привязку данных к компоненту.
  3. Используйте пользовательский RelayNetworkLayer (у которого есть доступ к моему магазину), чтобы перехватывать мои запросы и устанавливать там переменные из внешнего хранилища. Это тоже похоже на взлом.

person Alex    schedule 09.12.2016    source источник


Ответы (1)


Я нашел эту суть, которая выполняет именно то, что я ищу. Он позволяет передавать переменные состояния redux через декоратор @container со свойством variablesFromState. По сути, он вернет либо стандартный контейнер ретрансляции (если variablesFromState не установлен), либо контейнер ретрансляции, заключенный в оболочку redux Provider с переданным экземпляром хранилища redux.

person Alex    schedule 12.12.2016