小编Don*_*and的帖子

我正在使用Apollo Client和React，并且正在寻找一种策略，以使组件和组件数据需求并置在一起，以便可能需要查询和变异的父/兄弟/子组件可以访问它。我希望能够轻松地更新数据要求，这又将更新由某些父组件查询或由父/兄弟/子中的突变返回的字段，以便准确地更新我的Apollo缓存。

我尝试创建一个全局高级graphql目录，所有查询/mutations.graphql文件都位于该目录中，＃导入整个应用程序中所有相关的片段文件，然后直接导入这些文件，但这会很乏味并且不会遵循父/子主题，其中父查询包括子片段。同样在大型项目中，导入时最终会遍历长文件路径。

我还尝试过仅在与组件文件相对应的全局graphql目录中共存片段文件，但这并不能为我提供所需的“组件/数据需求”共存。

这有效：

class CommentListItem extends Component {
  static fragments = {
    comment: gql`
      #...
    `,
  }
}
class CommentList extends Component {
  static fragments = {
    comment: gql`
      #...
      ${CommentListItem.fragments.comment}
    `,
  }
}
class CommentsPage extends Component {
  static fragments = {
    comment: gql`
      #...
      ${CommentList.fragments.comment}
    `,
  }
}
graphql(gql`
  query Comments {
    comments {
      ...CommentsListItemComment
    }
  }
  ${CommentsPage.fragments.comment}
`)

但是，如果我想要后代的突变，CommentsPage则不能引用的片段组成CommentsPage.fragments.comment。

对于这种事情，是否有首选的方法或最佳实践？

我正在尝试构建和键入仅将组件包装在ApolloProvider中的HOC。我希望能够将引用转发到包装的组件。但是，当我尝试在forwardRef组件中传递道具时，出现类型错误

在研究狂潮的某个地方，我偶然发现了一个关于泛型是问题的答案。

const withProvider = function<P>(WrappedComponent: React.ComponentClass<P>) {

  type Props = P & { forwardedRef?: React.Ref<any> }

  class WithProvider extends React.Component<Props> {
    render() {
      const { forwardedRef, ...props } = this.props
      return (
        <ApolloProvider client={client}>
          <WrappedComponent {...props} ref={forwardedRef} />
        </ApolloProvider>
      )
    }
  }

  hoistNonReactStatics(WithProvider, WrappedComponent)

  return React.forwardRef((props, ref) => (
    <WithProvider {...props} forwardedRef={ref} />
  ))
}

给我错误：

Type '{ forwardedRef: string | ((instance: {} | null) => any) | RefObject<{}> | undefined; children?: ReactNode; }' is not assignable to type …