为 graphQL 查询添加包装器 - HOC 或 Render 道具

Question

我正在尝试为 graphQL 查询做一个包装器，我试过了

const GQLWrapper = ({ query, children}) => (
  <Query query={query}>
    {({ loading, error, data }) => {
      if (loading) {
        return null
      }
      if (error) {
        <QueryError />
      }
      const { gqlData } = data.page    
      return (
        <div>
          {children}
        </div>
      )
    }}
  </Query>
)

但我不明白如何使用 render props 将数据传递给子组件。

此外，如果使用 HOC 是更好的解决方案，请告诉我（何时应该使用一个或另一个）。谢谢

Answer 1

您只需将 children 设为一个函数并将数据传递到那里

return <div>{children(gqlData)}</div>;

当您使用包装器时，您会：

<GQLWrapper query={myquery}>
  {(gqlData) => <SomeComponent data={gqlData} />}
</GQLWrapper>

为 graphQL 查询添加包装器 - HOC 或 Render 道具

Adding wrapper for graphQL queries - HOC or Render props

reactjs

graphql

react-props