如何键入导出的RelayContainer

Question

我正在尝试键入(使用flowtype)我正在增强的组件Relay.createContainer.

我查看了"react-relay"包导出的类型,但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 />; 

现在流量会在Foo.jsProps周围抱怨Bar没有提供标题道具,这就是我想要的东西(我希望它可以抱怨,Bar.js但这是一个细节).但是如果Bar也是一个RelayContainer引用Foo的片段流会抱怨它getFragment在Foo的属性中找不到:

// 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属性的方法.

知道我怎么能实现这个目标？

Answer 1

正如 @gre 指出的，现在 Relay 编译器为片段生成流类型，并将这些类型导出到子目录中的生成文件中__generated__。

通过运行 Relay Compiler 生成所述文件

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
          }
       }
    }
  `
});

尽管据我所知，除非您使用 Haste 模块系统，否则目前不会生成分散片段的类型