Flow type relay's createFragmentContainer

Question

I'm pretty much out of ideas how to flow type relay's modern createFragmentContainer.

I got this:

import { type RelayContext } from 'react-relay'

type Props = {
  relay: RelayContext
}

relay is prop added by container.

Component is exported this way:

export default createFragmentContainer(
  Foo,
  graphql`
    fragment Foo_session on Session {
      foo {
        id
      }
    }
  `
)

When I use this component in some other component (e.g. like this <Foo session={session} />), I'll get this error:

Flow: Cannot create 'Foo' element because property 'relay' is missing in props [1] but exists in 'Props' [2]

score 1 · Accepted Answer · answered Nov 13 '18 at 11:25

1

@Boris You don't have the relay prop on your fragment container, only on the parent, which is where you will spread this query. There, you will have the relay prop and you type it.

For the Foo component, you could type the incoming data, which will be passed from the parent. For example:

export default createFragmentContainer(
  Foo,
  session: graphql`
    fragment Foo_session on Session {
      foo {
        id
      }
    }
  `
)

you have a __generated__ folder with the compiled query right? So you could:

import type { Foo_session } from './__generated__/Foo_session.graphql';

type Props = {
  session: Foo_session
}

Hope it helps :).

answered Nov 13 '18 at 11:25

denyzprahy

820
11
24

Thank you, but I actually use relay prop in this fragment because I need to call mutation in this component ( `this.props.relay.environment` ). I just don't know how to teach flow that relay prop is added by `createFragmentContainer`, not passed by parent – BorisTB Nov 13 '18 at 11:29
@Boris, not sure if I got it, but you don't need to pass `relay` to a child component to call a mutation. You can just import the mutation and run it. Either way, are you sure that you passing it right? Because the error message it's not about a wrong typing, but the prop is not there at all. – denyzprahy Nov 13 '18 at 11:34
I know that I don't need it to pass from parent, because createFragmentContainer is adding that prop to component. But when I define it in component's props, flow expects me to pass it to that component from his parent. I just don't how to flow type this: https://facebook.github.io/relay/docs/en/fragment-container.html#available-props "The Component resulting from createFragmentContainer will receive the following props" – BorisTB Nov 13 '18 at 11:41

Flow type relay's createFragmentContainer

1 Answers1