リレーとリアクションルーティングを正しく動作させるには？

Question

私はRelayを使い始めており、私のルーティングが正しく機能するようにしています。 残念ながら、私は運があまりありません。ここで

は、私が取得していますエラーです。ここ

Uncaught TypeError: Component.getFragment is not a function

はあなたの参考のために私が持っているコードです：app.jsx

index.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Relay from 'react-relay'; 
import {Router, Route, IndexRoute, browserHistory} from 'react-router'; 
import {RelayRouter} from 'react-router-relay'; 

import App from './modules/app'; 
import Home from './modules/home'; 

const AppQueries = { 
    store: (Component) => Relay.QL `query { 
    store { 
     ${Component.getFragment('store')} 
    } 
    }` 
}; 

ReactDOM.render(
    <RelayRouter history={browserHistory}> 
    <Route path='/' component={App} queries={AppQueries}> 
     <IndexRoute component={Home}/> 
    </Route> 
    </RelayRouter>, 
document.getElementById('ch-root')); 

import React, {Component} from 'react'; 
import Relay from 'react-relay'; 
import Header from './ui/header'; 
import Footer from './ui/footer'; 

class App extends Component { 
    render() { 
    return (
     <div id="ch-container"> 
     <Header/> 
     <section id="ch-body"> 
      {this.props.children} 
     </section> 
     <Footer/> 
     </div> 
    ); 
    } 
} 

App = Relay.createContainer(App, { 
    fragments: { 
    store: (Component) => Relay.QL ` 
     fragment on Store { 
     ${Component.getFragment('store')} 
     } 
    ` 
    } 
}); 

export default App; 

home.jsx

import React, {Component} from 'react'; 
import Relay from 'react-relay'; 
import Loader from './ui/loader'; 
import AccountSelector from './account/account-selector'; 

const APP_HOST = window.CH_APP_HOST; 
const CURR_HOST = `${window.location.protocol}//${window.location.host}`; 

class Home extends Component { 
    state = { 
    activeAccount: null, 
    loading: true 
    } 

    render() { 
    const {activeAccount, loading} = this.state; 

    if (loading) { 
     return <Loader/>; 
    } 

    if (!activeAccount && !loading) { 
     return <AccountSelector/>; 
    } 

    return (
     <h1>Hello!</h1> 
    ); 
    } 
} 

Home = Relay.createContainer(Home, { 
    fragments: { 
    store:() => Relay.QL ` 
     fragment on Store { 
     accounts { 
      unique_id, 
      subdomain 
     } 
     } 
    ` 
    } 
}); 

export default Home; 

UPDATE

私は以下のようにfreiksenetによって提案されたいくつかの変更を加えました。しかし、それは次の2つの問題を提起：私はルートを変更し、Home以外の成分がAppコンポーネントによってレンダリングされるとき

1. どうなるでしょうか？
2. 私は今、このエラーが発生します。ここでは

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

は変更されている：

index.jsx

const AppQueries = { 
    store:() => Relay.QL `query { 
    store 
    }` 
}; 

app.jsx

import Home from "./home"; 

... 

App = Relay.createContainer(App, { 
    fragments: { 
    store:() => Relay.QL ` 
     fragment on Store { 
     ${Home.getFragment('store')} 
     } 
    ` 
    } 
}); 

Answer 1

フラグメント定義は引数として実際にコンポーネントを取得しませんが、コンテナの変数のマップは、変数値に基づいて条件付きフラグメントを持つためにのみ使用する必要があります。

リレールートクエリは引数を受け入れません。

ここで変更が必要です。

Relayのルートクエリは、このルートでフラグメントを使わずに取得するルートクエリを指定するだけです。

index.jsx

const AppQueries = { 
    store:() => Relay.QL `query { 
    store 
    }` 
}; 

あなただけの通常の構成要素の代わりに、コンテナをエクスポートすることができますので、あなたのアプリケーションコンポーネントは、実際には、任意のリレーデータを使用していません。

export default class App extends Component { 

あなたはそれにいくつかのリレーデータを渡す必要があると思います場合は、直接、直接の子として（ない、このように他のコンテナをレンダリングする際の断片の包含が唯一必要とされているので、あなたは、子供の断片を含める必要はありません。 props.children）。

ルータでは、クエリをホームに移動する必要があります。

ReactDOM.render(
    <RelayRouter history={browserHistory}> 
    <Route path='/' component={App}> 
     <IndexRoute component={Home} queries={AppQueries} /> 
    </Route> 
    </RelayRouter>, 
document.getElementById('ch-root'));