如何键入导出的RelayContainer-Java 学习之路

我用 Relay.createContainer 增强了'm trying to type (with flowtype) the components I'm .

我通过"react-relay"包查看了types exported，但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 />;

现在流量会在 Foo.js 周围抱怨，因为Bar不会在 Bar.js 中抱怨它，但这是一个细节） . 但是如果Bar也是一个引用Foo 's fragment flow would complain that it can'在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 但我觉得它是_1676911的属性 .

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

1 回答

正如@gre指出的那样，现在Relay Compiler为片段生成Flow类型，并将它们导出到 __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

回复于 2024-05-03T15:25:18+08:00

如何键入导出的RelayContainer

1 回答

相关问题