получение дополнительной информации для определенного элемента списка в relay / graphql

Используя Relay и GraphQL, предположим, что у меня есть схема, возвращающая средство просмотра, и встроенный список связанных документов. Корневой запрос (составленный из фрагментов) будет выглядеть примерно так:

query Root {
  viewer {
    id,
    name,
    groups {
      edges {
        node {
          id,
          name,
        }
      }
    }
  }
}

Это позволит мне отобразить пользователя и список всех связанных с ним групп.

Теперь предположим, что я хочу, чтобы пользователь мог щелкнуть этот элемент списка и развернуть его, чтобы отобразить комментарии, связанные с этим конкретным элементом списка. Как мне реструктурировать свой запрос для маршрута ретрансляции, чтобы я мог получать эти комментарии? Если я добавлю край комментариев к краю моей группы, не будет ли он получать комментарии для всех групп?

query Root {
  viewer {
    id,
    name,
    groups {
      edges {
        node {
          id,
          name,
          comments {
            edges {
              node {
                id,
                content
              }
            }
          }
        }
      }
    }
  }
}

Или мне следует изменить запрос маршрута, чтобы найти конкретную группу?

query Root {
  group(id: "someid"){
    id,
    name,
    comments {
      edges {
        node {
          id,
          content
        }
      }
    }
  },
  viewer {
    id,
    name,
    groups {
      edges {
        node {
          id,
          name,
        }
      }
    }
  }
}

Меня беспокоит, в частности, использование этого в контексте relay. То есть, как я могу эффективно построить маршрутный запрос, который будет извлекать только комментарии для элемента (или элементов) расширенного списка, при этом используя уже существующие кэшированные данные, и которые будут обновляться при выполнении мутаций? Приведенный выше пример может работать для конкретной расширенной группы, но я не уверен, как я могу расширить несколько групп одновременно, не извлекая эти поля для всех элементов группы.


person bento    schedule 16.09.2015    source источник


Ответы (1)


Relay 0.3.2 будет поддерживать директивы @skip и @include.

Group = Relay.createContainer(Group, {
  initialVariables: {
    numCommentsToShow: 10,
    showComments: false,
  },
  fragments: {
    group: () => Relay.QL`
      fragment on Group {
        comments(first: $numCommentsToShow) @include(if: $showComments) {
          edges {
            node {
              content,
              id,
            },
          },
        },
        id,
        name,
      }
    `,
  },
});

В вашем методе визуализации отображайте комментарии, только если определено this.props.group.comments. Вызов this.props.relay.setVariables({showComments: true}) в компоненте Group, чтобы поле комментариев было включено (и, при необходимости, извлечено).

class Group extends React.Component {
  _handleShowCommentsClick() {
    this.props.relay.setVariables({showComments: true});
  }
  renderComments() {
    return this.props.group.comments
      ? <Comments comments={this.props.group.comments} />
      : <button onClick={this._handleShowCommentsClick}>Show comments</button>;
  }
  render() {
    return (
      <div>
        ...
        {this.renderComments()}
      </div>
    );  
  }
}
person steveluscher    schedule 16.09.2015
comment
Ради интереса: github.com/facebook/relay/commit/ - person steveluscher; 17.09.2015
comment
Есть ли способ получить дополнительные данные для одного элемента в запросе списка (края)? Почему? Я пытаюсь легко перенести / масштабировать элемент списка в представление одного элемента. Я тестировал всевозможные стратегии, но не могу найти способ. - person Solo; 14.09.2016
comment
да. В тот момент, когда вы хотите отобразить представление отдельного элемента, вы должны узнать его идентификатор. В этот момент представление отдельного элемента должно свернуться до запроса узла в корне. node(id: $itemID) { ${Component.getFragment('item')} }. Поскольку элемент уже будет в магазине из выборки edge, никаких дополнительных сетевых запросов не потребуется. - person steveluscher; 15.09.2016
comment
Да, это то, что у меня сейчас есть, но проблема - два разных изолированных представления и запроса, и я не могу найти способ плавно анимировать список в один элемент с этой настройкой. Взгляните на этот дриблинг-файл в формате GIF. Реагировать очень просто, я просто рассчитываю размер экрана при щелчке и масштабирую элемент списка до полноэкранного, что выталкивает другие элементы списка из области просмотра, но как получить дополнительные данные для этого элемента? Я не могу использовать node() запрос в качестве второго запроса для того же компонента списка, или могу? - person Solo; 15.09.2016
comment
@Solo, не могли бы вы задать новый вопрос по этому поводу в Stack Overflow? Мой ответ слишком длинный для комментария. - person steveluscher; 16.09.2016
comment
Конечно, вот мой вопрос. - person Solo; 29.09.2016