javascript - 如何键入导出的 RelayContainer

Question

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

我查看了 types exported通过“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.js 中提示 Bar 没有提供 title Prop 的 Props，这正是我想要的(我希望它在 Bar.js 中提示 但这是一个细节)。 但是，如果 Bar 也是引用 Foo 的片段流的 RelayContainer，则会提示它无法在 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 但我觉得这不是解决问题的方法去添加中继的属性。

知道我怎样才能做到这一点吗？

Answer 1

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

通过运行中继编译器生成上述文件

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

然后您将像这样导入字段 Prop 的流类型:

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