reactjs - 流式中继的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]

score 0 · Accepted Answer

@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
}

希望能帮助到你：）。

1 回答 1