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：无法读取未定义的属性“displayName” at getDisplayName（react-apollo.browser.umd.js：250）在wrapWithApolloComponent（react-apollo.browser.umd.js：266） at new eval（gqlList.js：22）在eval（createClassProxy.js：95）在instantiate（createClassProxy.js：103） at Unknown（eval at proxyClass（createClassProxy.js：NaN），：4：17）在eval（ReactCompositeComponent.js：303） at measureLifeCyclePerf（ReactCompositeComponent.js：73）在ReactCompositeComponentWrapper._constructComponentWithoutOwner

我做错了什么？

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的顺序并进行连接。

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

2 个答案: