Wie funktioniert das Relay und React Routing?

Question

Ich beginne mit Relay und versuche, mein Routing richtig zu machen. Leider habe ich nicht viel Glück. Hier

ist der Fehler Ich erhalte:

Uncaught TypeError: Component.getFragment is not a function

Hier ist der Code, den ich für Ihre Referenz haben:

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')); 

app.jsx

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

Ich habe einige von freiksenet vorgeschlagenen Änderungen wie unten. Aber das wirft die folgenden zwei Probleme:

1. Was würde passieren, wenn ich die Strecke und eine andere Komponente ändern, als Home wird durch die App Komponente gemacht?
2. ich jetzt diesen Fehler:

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

Hier sind die Änderungen:

index.jsx

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

import Home from "./home"; 

... 

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

app.jsx

Answer 1

Fragmentdefinitionen erhalten keine Komponenten als Argumente, sondern eine Karte von Variablen des Containers. Sie müssen nur bedingte Fragmente basierend auf Variablenwerten verwenden.

Relay Route-Abfragen akzeptieren keine Argumente.

Hier sind die Änderungen, die Sie vornehmen müssen.

Routenabfragen in Relay müssen nur die Stammabfrage angeben, die Sie auf dieser Route ohne das Fragment abrufen möchten.

index.jsx

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

Ihre App Komponente ist eigentlich keine Relais-Daten verwenden, so können Sie exportieren nur normale Komponente anstelle des Behälters.

export default class App extends Component { 

Wenn Sie einige Relay-Daten zu übergeben brauchen würde, brauchen Sie nicht Kind Fragmente zu schließen, weil Fragmente Aufnahme nur erforderlich, wenn Sie direkt andere Behälter als direkte Kinder machen (nicht wie diese. props.kinder).

Dann in Router müssen Sie die Abfragen nach Home verschieben.

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