functional programming - samsung - ¿Cómo conectar los datos a un componente profundo en reaccionar-enrutador-relé?

usar celular como router para pc

Question

Tengo una ruta como esta

<Route path="/search" component={Search}>

El componente básico de Search ve como este

class Search extends React.Component {
  constructor (props) {
    super(props)
    this.state = {query: ''''}
  }
  handleSubmit (event) {
    event.preventDefault()
    this.setState({query: this.refs.queryInput.value})
  }
  renderSearchResult() {
    if (this.state.query === '''')
      return <EmptySearchResult />
    else
      return <SearchResult query={this.state.query}/>
  }
  render() {
    return (
      <div className="searchContainer">
        <div className="row">
          <div className="search">
            <form onSubmit={event => this.handleSubmit(event)}>
              <input className="searchInput" placeholder="robocop" ref="queryInput" />
            </form>
          </div>
        </div>
        <div className="row">
          {this.renderSearchResult()}
        </div>
      </div>
    )
  }
}

SearchResult contenedor de retransmisión SearchResult ve así

class SearchResult extends React.Component {
  render() {
    var {viewer: {moviesByTitle: movies}} = this.props;
    return (
      <div className="searchResult">
        {movies.edges.map((edge,i) =>
          <div key={i} className="rowItem scrollRowItem">
            <Movie movie={edge.node} />
          </div>)}
      </div>
    )
  }
}

export default Relay.createContainer(SearchResult, {
  initialVariables: {
    query: ''???''
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        moviesByTitle(title: $query, first: 10) {
          edges {
            node {
              ${Movie.getFragment(''movie'')}
            }
          }
        }
      }
    `
  }
})

Error:

Warning: RelayContainer: Expected prop `viewer` to be supplied to `SearchResult`, but got `undefined`. Pass an explicit `null` if this is intentional.

Lo que estaba tratando de hacer dentro de mi componente de Búsqueda (cambios en negrita)

const ViewerQueries = {
  viewer: () => Relay.QL`query { viewer }`
}

...

renderSearchResult() {
  if (this.state.query === '''')
    return <EmptySearchResult />
  else
    return <SearchResult query={this.state.query} queries={ViewerQueries} />
}

Pero, por supuesto, eso no funciona porque las consultas deben adjuntarse de alguna manera a la Route

Preguntas

1. Mi componente de Search es solo un componente de presentación que no necesita datos propios. En su lugar, solo alimenta un apoyo de query al contenedor de retransmisión SearchResult . ¿Cómo debería estructurar los componentes y los contenedores de retransmisión para adjuntarlos correctamente a la ruta?

2. ¿Cómo puedo usar el objeto de query SearchResult para establecer una variable en el fragmento de consulta de retransmisión?

3. No entiendo la abstracción del "espectador" en general: la mayoría de los ejemplos que he visto son muy artificiales y no muestran cómo funcionarían en un entorno más realista; por ejemplo, usuarios con diferente acceso a diferentes recursos, o diferentes partes de su programa que están destinadas a ver diferentes sectores de datos

Answer 1

Utilizando la API moderna de Relay, componga un componente refetchContainer from refetchContainer debido a la necesidad de "una opción para ejecutar una nueva consulta con diferentes variables y presentar la respuesta de esa consulta en su lugar cuando la solicitud regrese" .

import React, { Component } from ''react'';
import debounce from ''debounce'';
import { graphql, createRefetchContainer } from ''react-relay'';

class SearchResult extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (this.props.query != nextProps.query) {
      debounce(() => this._searchMovies(), 600);
    }
  }

  _searchMovies() {
    const refetchVariables = fragmentVariables => ({
      query: this.props.query
  });

    this.props.relay.refetch(refetchVariables, null);
  }

  render() {
    var { viewer: { moviesByTitle: movies } } = this.props;
    return (
      <div className="searchResult">
        {movies.edges.map((edge, i) =>
          <div key={i} className="rowItem scrollRowItem">
            <Movie movie={edge.node} />
          </div>)}
      </div>
    )
  }
}


// Similar query syntax as Relay Classic
// Only syntactic difference is with absence of Movie.getFragment
module.exports = createRefetchContainer(SearchResult, {
    viewer: graphql`
      fragment SearchResult_viewer on SearchResult {
        @argumentDefinitions(
          query: {type: "String", defaultValue: ""}
        ) {
        moviesByTitle(title: $query, first: 10) {
          edges {
            node {
              ...Movie_movie
            }
          }
        }
      }`
    },
    graphql`
      query MoviesRefetchQuery($query: String) {
        viewer {
          ...SearchResult_viewer @arguments(query: $query)
        }
      }
   `);