如何input导出的RelayContainer
我正在尝试使用Relay.createContainerinput(使用flowtype)正在增强的组件。
我查看了“react-relay”包导出的types ,但是ReactContainer似乎并没有包含Props。
我用RelayContainer
, ReactClass
, React$Component
等进行了实验,最后得到的预期结果是:
// 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 />;
现在stream将抱怨Foo.js
周围的道具吧,不提供标题道具,这是我想要的(我想它在Bar.js
投诉,但它是一个细节)。 但是,如果Bar也是一个RelayContainer
引用Foo的fragmentstream将会抱怨在Foo的属性中找不到getFragment
:
// 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")} } ` } }
最后,我试图inputRelay.createContainer
的输出,以便它inheritance装饰组件的input。 我查看了Relay的内部types,看到https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211
但我觉得这不是joinRelay的属性的方法。
任何想法我怎么能做到这一点?
正如@gre所指出的那样,现在Relay Compiler为片段生成Flowtypes,并将这些types导出到__generated__
子目录中的生成文件中。
通过运行中继编译器生成所述文件
relay-compiler --src ./src --schema ./schema.json
然后你可以像这样导入字段道具的streamtypes:
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 } } } ` });