标签: react-router-relay

默认的react-router用作如下:

import * as React from 'react';
import { Router, Route, hashHistory } from 'react-router';

const routing = (
    <Router history={hashHistory}>
        <Route path="/login" component={Login}/>
    </Router>   
};

当我包含"react-router-relay"库时,它会为路由器添加功能.即它为路由器组件添加了2个属性(渲染和环境):

import * as React from 'react';
import * as Relay from 'react-relay';
import * as useRelay from 'react-router-relay';
import { Router, Route, hashHistory, applyRouterMiddleware } from 'react-router';

const routing = (
    <Router history={hashHistory} render={applyRouterMiddleware(useRelay)} environment={Relay.Store}>
        <Route path="/login" component={Login}/>
    </Router>   
};

我将如何增加反应路由器的类型？

我尝试过一系列方法,最新的方法是:

import { Router } from 'react-router';

declare module 'react-router' {
    namespace …

我有这样的路线

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

基本Search组件看起来像这样

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 中继容器看起来像这样

class SearchResult extends React.Component {
  render() …

我无法导航到/users我的应用程序中,因为它不会触发我想到它应该获取的所有查询.

我的应用程序包含一个App组件和一些包含实际内容的组件,如Dashboard或UserList.还有一个,EnsureAuthenticationContainer但这只是一个组件,当用户通过身份验证时,只需呈现它的子项.这是我的路线设置:

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

[...]

<Router history={browserHistory} render={applyRouterMiddleware(useRelay.default)} environment={Relay.Store}>
    <Route path="/" component={App} queries={ViewerQueries}>
        <Route path="login" component={Login} />
        <Route component={EnsureAuthenticationContainer}>
            <IndexRoute component={Dashboard} />
            <Route path="users" component={UserList} queries={ViewerQueries} />
            <many more routes />
        </Route>
    </Route>
</Router>

问题是,这两个App和UserList定义fragements,似乎只有的查询UserList被发送.

片段App:

fragments: {
    viewer: () => {
        return Relay.QL`
            fragment on ViewerType {
                loggedInUser {
                    id
                } …

我有一个网站,其中包含以下内容react-router和react-router-relay设置:

main.jsx:

<Router history={browserHistory} render={applyRouterMiddleware(useRelay)}>
  <Route path="/:classroom_id" component={mainView} queries={ClassroomQueries}>
    <IndexRoute component={Start} queries={ClassroomQueries} />
    <Route path="tasks" component={TaskRoot} queries={ClassroomQueries}>
      <IndexRoute component={TaskList} queries={ClassroomQueries} />
      <Route path="task/:task_id" component={TaskView} queries={ClassroomTaskQueries} />
      <Route path="task/:task_id/edit" component={TaskEdit} queries={ClassroomTaskQueries} />
    </Route>
  </Route>
</Router>

该网站是一个虚拟教室,教师可以在其中为学生创建任务.这些任务也可以编辑.

当用户编辑任务TaskEdit并点击保存时,将应用更改并将用户重定向到TaskList.现在,我希望在编辑任务后为用户提供" 您的更改已保存! "消息.

我已经为此目的创建了一个引导警报组件(<Alert>).

为了便于说明,假设我有以下mainView组件(检查上面的路由器):

mainView.js:

render() {
  <div>
    <Menu />
    <Row>
      <Col md={3}>
        <Sidebar />
      </Col>
      <Col md={9}>
        {this.props.children}  <-- Start, TaskRoot, etc go here
      </Col>
    </Row>
    <Alert someProps={...} /> …

我正在尝试实现登录变异.该变异验证提供的id_token并通过会话记录用户.突变本身有效(用GraphiQL验证),但我遇到了将它与Relay集成的问题.

当用户登录时,整个中继存储可能会被更改,因为"viewer"是根查询.但我不想在胖查询中列出我的整个查询树.能够以某种方式清除整个商店会很好,但我没有看到这样做的方法react-router-relay.

中继突变:

export default class LoginMutation extends Relay.Mutation {
  getMutation() {
    return Relay.QL`mutation {login}`;
  }

  getVariables() {
    return {
      id_token: this.props.id_token
    };
  }

  getFatQuery() {
    // TODO: list everything?
    return Relay.QL`
      fragment on LoginPayload {
        viewer
      }
    `;
  }

  getConfigs() {
    return []; // TODO: not sure what to return...
  }
}

用法:

Relay.Store.commitUpdate(new LoginMutation({id_token}), {
        onSuccess: (resp) => {
          history.push('/');
        }
      });

GraphQL架构:

input LoginInput {
  id_token: String!
  clientMutationId: String!
}

type LoginPayload {
  viewer: Viewer …

我正在寻找将父变量中的变量传递给子容器的良好语法.

假设我有这些路线,其上有一个全局小部件列表/和特定的小部件列表/widgets/:WidgetListID.

注意:我使用react-router-relay

<Route
    path='/' component={Layout}
  >
    <IndexRoute
      component={WidgetListContainer}
      queries={ViewerQueries}
    />
    <Route
      path='/widgets/:WidgetListID'
      component={WidgetListContainer}
      queries={ViewerQueries}
    />
  </Route>

它是<WidgetList/>在<WidgetListContainer/>内部渲染的相同组件,<Layout/>这是我尝试传递WidgetListID变量的方式:

Layout.js

class Layout extends React.Component {
  render() {
    return (
      <div>
       ...
        {children}
       ...
      </div>
    );
  }
}

WidgetListContainer.js

class WidgetListContainer extends React.Component {
  render () {
    return (
      <div>
       ...
        <WidgetList 
          viewer={viewer}
        />
      </div>
    )
  }
}

export default Relay.createContainer(WidgetListContainer, {
  initialVariables: {
    WidgetListID: null
  },
  fragments: {
    viewer: …