最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to type an exported RelayContainer - Stack Overflow

programmeradmin5浏览0评论

I'm trying to type (with flowtype) the ponents I'm enhancing with Relay.createContainer.

I looked into the types exported by the "react-relay" package but ReactContainer doesn't seem to carry over Props.

I experimented with RelayContainer, ReactClass, React$Component etc, in the end the closest thing to the expected result I could get is :

// 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 />; 

Now flow will plain in Foo.js around Props that Bar doesn't provide the title prop, which kinda what I want (I'd like it to plain in Bar.js but it's a detail). However if Bar was also a RelayContainer referencing Foo's fragment flow would plain that it can't find getFragment in Foo's properties:

// 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")}
      }
    `
  }
}

In the end I'm trying to type the output of Relay.createContainer so that it carries over the typing of the decorated ponent. I looked into the Relay's internal types and saw .js#L211 but I feel like it's not the way to go to add in Relay's properties.

Any idea how could I achieve this ?

I'm trying to type (with flowtype) the ponents I'm enhancing with Relay.createContainer.

I looked into the types exported by the "react-relay" package but ReactContainer doesn't seem to carry over Props.

I experimented with RelayContainer, ReactClass, React$Component etc, in the end the closest thing to the expected result I could get is :

// 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 />; 

Now flow will plain in Foo.js around Props that Bar doesn't provide the title prop, which kinda what I want (I'd like it to plain in Bar.js but it's a detail). However if Bar was also a RelayContainer referencing Foo's fragment flow would plain that it can't find getFragment in Foo's properties:

// 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")}
      }
    `
  }
}

In the end I'm trying to type the output of Relay.createContainer so that it carries over the typing of the decorated ponent. I looked into the Relay's internal types and saw https://github./facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211 but I feel like it's not the way to go to add in Relay's properties.

Any idea how could I achieve this ?

Share Improve this question edited Sep 19, 2017 at 18:52 Maksim Kalmykov 1,3173 gold badges21 silver badges27 bronze badges asked Sep 6, 2016 at 22:43 chollierchollier 9121 gold badge7 silver badges8 bronze badges 3
  • 2 related github./facebook/relay/pull/1155 – gre Commented Nov 22, 2016 at 10:17
  • The outline above seems promising. I'm going to see if I can augment it to tell Flow that the higher order ponent adds a static getFragment method. If anyone has e up with a better alternative, it would be nice to learn! – John Commented Mar 15, 2017 at 0:17
  • 1 Lee Byron announced yesterday at react-europe that Relay 1.0.0 will generate __generated__/* files for each fragment and that they will export flowtypes. so I guess this will solve this? – gre Commented May 20, 2017 at 7:40
Add a ment  | 

1 Answer 1

Reset to default 4

as @gre pointed out, now the Relay Compiler generates Flow types for the fragment and these are exported in generated files within a __generated__ subdirectory.

generating said file by running the Relay Compiler

relay-piler --src ./src --schema ./schema.json

You would then import the flow types for the field props like so:

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

Although AFAIK currently types for spreaded fragments are not generated unless you use the Haste module system

发布评论

评论列表(0)

  1. 暂无评论