如何键入导出的 RelayContainer
How to type an exported RelayContainer
我正在尝试输入(使用 flowtype)我正在使用 Relay.createContainer
增强的组件。
我调查了 types exported by the "react-relay" package but ReactContainer 似乎没有继承道具。
我尝试了 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 />;
现在 flow 会在 Foo.js
周围的 Props 中抱怨 Bar 没有提供 title 道具,这有点像我想要的(我希望它在 Bar.js
中抱怨,但这是一个细节).
但是,如果 Bar 也是一个 RelayContainer
引用 Foo 的片段流会抱怨它无法在 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")}
}
`
}
}
最后,我试图输入 Relay.createContainer
的输出,以便它继承装饰组件的输入。我查看了 Relay 的内部类型并看到了 https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211
,但我觉得这不是添加 Relay 属性的方法。
知道我怎样才能做到这一点吗?
正如@gre 指出的那样,现在 Relay 编译器为片段生成流类型,这些类型导出到 __generated__
子目录中生成的文件中。
正在通过 运行 中继编译器
生成所述文件
relay-compiler --src ./src --schema ./schema.json
然后您可以像这样导入字段道具的流类型:
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
}
}
}
`
});
尽管 AFAIK 当前未生成传播片段的类型unless you use the Haste module system
我正在尝试输入(使用 flowtype)我正在使用 Relay.createContainer
增强的组件。
我调查了 types exported by the "react-relay" package but ReactContainer 似乎没有继承道具。
我尝试了 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 />;
现在 flow 会在 Foo.js
周围的 Props 中抱怨 Bar 没有提供 title 道具,这有点像我想要的(我希望它在 Bar.js
中抱怨,但这是一个细节).
但是,如果 Bar 也是一个 RelayContainer
引用 Foo 的片段流会抱怨它无法在 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")}
}
`
}
}
最后,我试图输入 Relay.createContainer
的输出,以便它继承装饰组件的输入。我查看了 Relay 的内部类型并看到了 https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211
,但我觉得这不是添加 Relay 属性的方法。
知道我怎样才能做到这一点吗?
正如@gre 指出的那样,现在 Relay 编译器为片段生成流类型,这些类型导出到 __generated__
子目录中生成的文件中。
正在通过 运行 中继编译器
生成所述文件relay-compiler --src ./src --schema ./schema.json
然后您可以像这样导入字段道具的流类型:
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
}
}
}
`
});
尽管 AFAIK 当前未生成传播片段的类型unless you use the Haste module system