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]

Answer 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 :).