HOCを使用してgraphqlとreduxでコンポーネントをラップすることはできますか？

Question

テンプレートコンポーネントはたくさんあり、使用方法はお互いに似ています。 ページにレンダリングされる前に、テンプレートコンポーネントはgraphqlでラップされ、reduxに接続されます。 テンプレートをラップする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です：

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 

ここ

は私がgqlList HOCでAppointmentsListTemplateテンプレートをラップしようとする私のページの構成要素であり、

しかし、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）を追加することで、質問を改善することができます。また、それはエラーを投げているモジュールなので、react-apolloのバージョンを挙げてください。副作用として、Apolloクライアントからのエラーメッセージはそれほど役に立ちません。