我可以使用HOC使用graphql和redux包装组件吗

Question

我有很多模板组件，它们在使用方式上彼此相似。 在呈现到页面之前，模板组件被包裹在graphql中并连接到redux。 我想创建一个HOC来包装我的模板，这样我就不会每次都创建一个新的容器来将模板连接到数据。 像这样：

这是我的页面组件，在这里我尝试用gqlList HOC包装AppointmentsListTemplate模板：

import React from 'react'
import { AdminTemplate, AppointmentsListTemplate } from 'components'
import { gqlList } from 'containers'
import {qyListAppointments} from 'services/gqlQueries/Appointments'

const AppointmentsListTemplateWrapped = gqlList(AppointmentsListTemplate, qyListAppointments)

const AdminAppointmentsPage = (props) => {
    return (
        <AdminTemplate>
            <AppointmentsListTemplateWrapped />
        </AdminTemplate>
    )
}

export default AdminAppointmentsPage

这是我的gqlList HOC：

import React, {Component} from 'react'
import { graphql } from 'react-apollo'
import { connect } from 'react-redux'
import { saveQueryVars } from 'store/helper/actions'

const gqlList = (WrappedComponent, gqlQuery) => {

  const GQL = graphql(gqlQuery)(WrappedComponent)
  return connect(null, {
    saveQueryVars,
  })(GQL)
}
export default gqlList

但是graphql连接器部分抛出此错误：

未捕获到的TypeError：无法在新的评估（gqlList.js：22）读取wrapWithApolloComponent（react-apollo.browser.umd.js：266）的getDisplayName（react-apollo.browser.umd.js：250）处未定义的属性'displayName' ）在eval（createClassProxy.js：95）在实例化（createClassProxy.js：103）在Unknown（eval在proxyClass（createClassProxy.js：NaN），：4：17）在eval（ReactCompositeComponent.js：303）在measureLifeCyclePerf（ ReactCompositeComponentWrapper._constructComponentWithoutOwner的ReactCompositeComponent.js：73）

我究竟做错了什么？

Answer 1

据我所知，您的代码似乎没有任何问题。 我还将排除redux作为错误的来源。 但是，我的建议是：

检查您的GraphQL查询（gqlQuery），以获取所需的内容，并可以返回所需的内容。 我怀疑它需要一些参数，但没有得到正确的参数类型-导致类型错误。 这是一个如何传递参数的示例（无redux）：

const Data = graphql(fetchData, { options: {variables: {id: this.getId()} }})(Thing);

在这里，fetchData需要Thing的ID，并返回有关该事物的数据。 然后，您可以渲染<Data/>.

您可能想通过向其添加查询和变量（saveQueryVars）来改善您的问题。 另外，请提及react-apollo的版本，因为那是引发错误的模块。 附带说明，来自Apollo客户端的错误消息不是很有帮助。

Answer 2

您可以将它们链接在一起：

import { changeFoo } from './myReduxActions';

const QUERY = gql`{ FindSomething { Id, Value }}`;

const myComponent = connect(
   store => ({
      foo: store.fooReducer.foo
   }),
   dispatch => ({
      changeFoo: (val) => dispatch(changeFoo(val))
   })
)(graphql(QUERY)(
   {props.data.loading && return <div>Loading...</div>}

   let myNewFoo = 'abc';
   return props.data.FindSomething ?
       <div>{`Id is ${props.data.FindSomething.Id}, redux store value foo is ${props.foo}`}
       <div onClick={() => props.ChangeFoo(myNewFoo)}></div></div> :
       props.data.error ? <div>Error {props.data.error}</div> : null;
));

因此，您可以执行connect(graphql(pureComponent)))或编写为connect => graphql => component 。 您可以更改graphql的顺序并进行连接。