はアポロに反応 - 私はこのようになりますクエリファイル持っている複数のクエリ

Question

行います。これは、一つだけのデータを取得します

import React, {Component} from 'react' 
import queries from './queries' 

class Test extends Component { 
... 
} 

export default graphql(queries.getSubjects)(graphql(queries.getApps)(Test)); 

：私はその後、私のこのファイルをインポート

import {gql} from 'react-apollo'; 

const queries = { 
    getApps: gql` 
    { 
     apps { 
     id 
     name 
     } 
    } 
    `, 
    getSubjects: gql` 
    { 
     subjects { 
     id 
     name 
     } 
    } 
    ` 
}; 

export default queries; 

をコンポーネントに反応クエリ（getApps）の両方ではなく、一度に1つずつ行うと、次のようになります。

export default graphql(queries.getSubjects)(Test); 

これは動作しますが、他のクエリはありません。はい、私は別々にテストしています。両方のクエリが私のprops.dataに表示されるようにするにはどうすればよいですか？

Answer 1

私の好みの方法は、apolloクライアントのcompose機能（docu）を使用することです。

編集： 複数のクエリがある場合は、名前を付ける必要があります。

だからあなたの場合には、それは次のようになります。

import React, {Component} from 'react' 
 
import queries from './queries' 
 
import { compose } from 'react-apollo'; 
 

 
class Test extends Component { 
 
... 
 

 
    render() { 
 
    ... 
 
    
 
    console.log(this.props.subjectsQuery, this.props.appsQuery); // should show both 
 
    
 
    ... 
 
    } 
 
} 
 

 
export default compose(
 
    graphql(queries.getSubjects, { 
 
     name: "subjectsQuery" 
 
    }), 
 
    graphql(queries.getApps, { 
 
     name: "appsQuery" 
 
    }), 
 
)(Test);