流式中继的createFragmentContainer

Question

我几乎不知道如何流动类型中继的现代 createFragmentContainer。

我知道了：

import { type RelayContext } from 'react-relay'

type Props = {
  relay: RelayContext
}

relay 是容器添加的道具。

组件以这种方式导出：

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

当我在其他一些组件中使用这个组件时（例如像这样<Foo session={session} />），我会得到这个错误：

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

Answer 1

@Boris 您的片段容器上没有relay 属性，只有在父级上，这是您将传播此查询的地方。在那里，您将拥有 relay 属性并输入它。

对于Foo 组件，您可以键入传入的数据，这些数据将从父级传递。例如：

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

您有一个带有已编译查询的__generated__ 文件夹，对吗？所以你可以：

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

type Props = {
  session: Foo_session
}

希望对你有帮助:)。