如何输入导出的RelayContainer

How to type an exported RelayContainer

本文关键字：RelayContainer 输入 何输入      更新时间：2023-09-26

我正在尝试键入(与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.js周围的道具栏不提供标题道具，这是我想要的(我希望它在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指出的，现在中继编译器为片段生成流类型，这些类型被导出到__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
          }
       }
    }
  `
});

尽管AFAIK目前不会生成扩展片段的类型，除非你使用急速模块系统

相关文章：