How to Print Exported RelayContainer

Question

I am trying to introduce (with a stream) components that I am improving with Relay.createContainer .

I looked at the types exported by the reaction-relay package, but ReactContainer does not seem to tolerate the details.

I experimented with RelayContainer , ReactClass , React$Component , etc. in the end, the closest to the expected result that I could get is:

 // 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 />; 

Now the thread will complain about Foo.js around the Foo.js , that the bar does not Foo.js title that I want (I would like it to complain about Bar.js , but it’s detailed). However, if Bar was also a RelayContainer referring to the stream of the Foo fragment, he would complain that he could not find getFragment in the Foo properties:

 // 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")} } ` } } 

In the end, I'm trying to input the output of Relay.createContainer so that it Relay.createContainer input of the styled component. I looked at the internal types of relays and saw https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211 , but I feel that this is not a way to add Relay properties.

Any idea how I can achieve this?

Answer 1

as @gre pointed out, the compiler relay now generates stream types for this fragment, and they are exported to the generated files in the __generated__ subdirectory.

generating the specified file by running the relay compiler

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

Then you import the stream types for the field attribute as follows:

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