So geben Sie einen exportierten RelayContainer ein

Question

Ich versuche, (mit Flowtype) die Komponenten einzugeben, die ich mit Relay.createContainer erweitere.

Ich schaute in die types exported durch die "React-Relais" -Paket, aber ReactContainer scheint Requisiten nicht zu tragen.

Ich experimentierte mit RelayContainer, ReactClass, React$Component etc, am Ende die nächste Sache, so erwartete ich bekommen konnte ist:

// Foo.js 
// @flow 
import React from "react"; 
import Relay from "react-relay"; 

type Props = { title: string; } 
const Foo({ title }: Props) => (<div>{title}</div>); 

const exported: Class<React$Component<void, Props, void>> = Relay.createContainer(Foo, { 
    fragments: { ... } 
}); 

export default exported; 

-

// Bar.js 
// @flow 

import React from "react"; 
import Foo from "./Foo.js"; 
const Bar =() => <Foo />; 

Jetzt fließen klagen in Foo.js um Requisiten, die Bar bietet nicht die Titelrequisite, was ein bisschen was ich will (ich würde es gerne beschweren in Bar.js, aber es ist ein Detail). Allerdings, wenn Bar war auch ein RelayContainer Foo fragmentFluss verweisen würden sich beschweren, dass es nicht getFragment in Foo Eigenschaften finden:

// Bar.js 
// @flow 

import React from "react"; 
import Relay from "react-relay"; 
import Foo from "./Foo.js"; 

const Bar =() => <Foo />; 

export default Relay.createContainer(Bar, { 
    fragments: { 
    baz:() => Relay.QL` 
     fragment on Baz { 
     ${Foo.getFragment("foo")} 
     } 
    ` 
    } 
} 

Am Ende ich versuche, die Ausgabe von Relay.createContainer so zu geben, dass es überträgt sich die Typisierung der dekorierten Komponente. Ich schaute in die internen Typen des Relais und sah https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211, aber ich fühle mich, als ob es nicht der Weg ist, die Eigenschaften von Relay hinzuzufügen.

Irgendeine Idee, wie ich das erreichen könnte?

Answer 1

als @gre wies darauf hin, jetzt generiert der Relay Compiler Flow-Typen für das Fragment und diese werden in generierten Dateien in einem __generated__ Unterverzeichnis exportiert.

Erzeugen der Datei, indem Sie den Relay-Compiler laufen

relay-compiler --src ./src --schema ./schema.json

würden Sie dann die Bewegungsarten für die Feld Requisiten importieren wie so:

import type { MyComponent_myField } from "./__generated__/MyComponent_myField.graphql"; 
class MyComponent extends Component<{ 
    myField: MyComponent_myField, 
}> { 
    render() { 
    return <div>Example</div>; 
    } 
} 
export default createFragmentContainer(MyComponent, { 
    myField: graphql` 
    fragment MyComponent_myField on MyType { 
     edges { 
      node { 
      _id 
      foo 
      } 
     } 
    } 
    ` 
});