HOC을 사용하여 graphql과 redux로 컴포넌트를 래핑 할 수 있습니까?

Question

템플릿 컴포넌트가 많이 있습니다. 사용되는 방식이 서로 비슷합니다. 페이지에 렌더링되기 전에 템플릿 구성 요소가 graphql에 래핑되고 redux에 연결됩니다. 템플릿을 데이터에 연결할 때마다 새 컨테이너를 만들지 않도록 내 템플릿을 감싸는 HOC를 만들고 싶습니다. 내 gqlList HOC 여기

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으로 AppointmentsListTemplate 템플릿을 포장하려고 내 페이지의 구성 요소는 다음과 같습니다 과 같이

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 커넥터 부분에서 다음과 같은 오류가 발생합니다.

Uncaught TypeError: Cannot read property 'displayName' of undefined at getDisplayName (react-apollo.browser.umd.js:250) at wrapWithApolloComponent (react-apollo.browser.umd.js:266) at new eval (gqlList.js:22) at eval (createClassProxy.js:95) at instantiate (createClassProxy.js:103) at Unknown (eval at proxyClass (createClassProxy.js:NaN), :4:17) at eval (ReactCompositeComponent.js:303) at measureLifeCyclePerf (ReactCompositeComponent.js:73) at ReactCompositeComponentWrapper._constructComponentWithoutOwner

내가 뭘 잘못하고 있니?

Answer 1

내가 말할 수있는 한 코드에 문제가없는 것 같습니다. 나는 또한 오류의 원인으로 redux를 배제 할 것이다. 그러나 여기에 내가 제안한 바가 있습니다 :

GraphQL 쿼리 (gqlQuery)가 필요한 것을 얻고 필요한 것을 반환 할 수 있도록 확인하십시오. 나는 그것이 어떤 매개 변수를 필요로하지만 매개 변수의 올바른 유형을 얻지 못하는 것 같아서 유형 오류가 발생합니다. 다음은 매개 변수를 전달하는 방법 (REDUX없이) 예입니다 :

여기

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

는 fetchData는 그 일에 대한 것 반환 된 데이터의 ID가 필요합니다. 그러면 렌더링 할 수 있습니다. <Data/>.

질의와 변수 (saveQueryVars)를 추가하여 질문을 향상시킬 수 있습니다. 또한 respond-apollo 버전은 오류를 던지는 모듈이므로 언급하십시오. 참고로, Apollo 클라이언트에서 오는 오류 메시지는별로 도움이되지 않습니다.