правильный способ рендеринга поста вactjs с использованием graphql

Question

Я использую responsejs и graphql для создания темы WordPress. Я пытаюсь сделать что-то вроде этого

Но я не могу найти лучший способ сделать это, передав пост-реквизиты трем различным компонентам, которые, я думаю, не очень хороший способ.

import React, { Component } from 'react';
import { graphql } from 'react-apollo'
import { getAllPosts } from '../graphql/queries/posts'
import Layout from '../component/Layouts';
import RenderPost from '../component/RenderPost';
import RenderPostExcerpt from '../component/RenderPostExcerpt';
import RenderAllPost from '../component/RenderAllPost';



class Home extends Component {
    render() {
        const posts = this.props.data.posts;
        console.log(posts);
        return (
            <Layout>
                {!posts && <h1>Loading...</h1>}
                {posts && 
                    <div>
                    <RenderPost posts={posts}/>
                    <RenderPostExcerpt posts={posts}/>
                    <RenderAllPost posts={posts}/>
                    </div>
                }
            </Layout>
        );
    }
}

export default graphql(getAllPosts)(Home);

Я получаю данные из WordPress с помощью GraphQl здесь Home.js является родительским компонентом. Есть ли другой способ сделать это?