react-relay createFragmentContainer props types

Is the createFragmentContainer types correct? Because it is typed as taking and returning TBase, which, if I’m correct, implies that their props are identical. However, for a container taking a viewer fragment, the parent will pass viewer={||}, but the “contained” will receive viewer: {/* whatever is define in the fragment*/}, no? I’m on flow 0.63.1

Because it seem that I have errors on all my fragment since updating my libdefs. Since I’m in the middle of big flow version upgrade, maybe the errors are coming from somewhere else (I still have > 150 errors), so feel free to correct me.

const Raw = (props: {todo: {id: number, text: string}}) => {/**/}
const Child = createFragmentContainer(Raw, {
  todo: graphql`
    fragment todo_todo on Todo {
      id, text
    }
  `
})

const ParentComp = (props: {viewer: {todo: {||}}}) => {
  return <Child todo={viewer.todo}} />
}

In this example, both the viewer and the todo props would be typed by the relay-compiler. Their content is different (since the fragment container takes care of finding the correct Todo in the store, but it seems to me that <Child /> expects the id and text keys.

This is copied from an answer to @sibelius’s PR #1520.

[sibelius]

we can’t consume flow directly from node_modules yet,

so we need to upgrade this defs to match new code of realy 1.5.0

[mandx]

There’s another problem with defining createFragmentContainer and createPaginationContainer as taking and returning TBase: The returned HOC class doesn’t need the relay prop, it will supply it to the wrapped component. But Flow still complains about the missing prop if I omit it:

// MyPagingComponent.js
// ...
import { createPaginationContainer } from 'react-relay';
import type { RelayPaginationProp } from 'react-relay';
// ...

type MyPagingComponentProps = {
  relay: RelayPaginationProp,
};

class MyPagingComponent extends Component<MyPagingComponentProps> {
  // Use `this.props.relay.hasMore()` somewhere
}

export default createPaginationComponent(MyPagingComponent, /* ... */)

// MyFragmentComponent.js
// ...
import { createFragmentContainer } from 'react-relay';
import type { RelayProp } from 'react-relay';
// ...
import MyPagingComponent from './MyPagingComponent';
// ...

type MyFragmentComponentProps = {
  relay: RelayProp,
};

class MyFragmentComponent extends Component<MyFragmentComponentProps> {
  
  render() {
    return (
      <div>
        {/* stuff */}
        <MyPagingComponent relay={/* Here flow expects a RelayPaginationProp instance */}/>
      </div>
    );
  }
}

In this case I can’t even pass the parent’s relay prop because is the wrong type, and I could make it optional, but then I would have to pointlessly ask all the time if the relay prop is set.