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

Question

Использование 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. I.e., как я могу эффективно построить запрос маршрута, который будет получать только комментарии для расширенного элемента списка (или элементов), но при этом все еще использует кэшированные данные, которые уже существуют, и будет обновляться при выполнении мутаций? Вышеприведенный пример может работать для определенной расширенной группы, но я не уверен, как я мог бы развернуть несколько групп одновременно, не получая эти поля для всех элементов группы.

Answer 1

Реле 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> 
    ); 
    } 
}