Graphpql with redux stateとApollo

Question

私はサーバーサイドレンダリングアプリを持っており、最初のレンダリングでデータにアクセスできるようにしたいと考えています。ユーザーが次のページに移動した場合は、graphQLライブラリApolloを使用して新しいコンテンツを取得します。

ページが要求されると、サーバは要求されたページのデータでinitialstateキーcurPageを設定します。たとえば、ユーザーがhttp://example.com/aboutを要求します。自分のDBから​​のページデータを取得し、initialStateキーcurPageをDBからそのデータに設定します。そう私はgraphQLから取得したい、

{ 
    "curPage": { 
    "id": 5, 
    "title": "About", 
    "slug": "about", 
    "path": "/about", 
    "template": "about", 
    "published": "2017-07-10 02:02:30", 
    "image": null, 
    "seo": { 
     "title": null, 
     "description": null, 
     "image": null, 
     "fbAdmins": null, 
     "gtm": null, 
     "schema": "" 
    }, 
    "sections": [ 
     { 
     "type": "masthead", 
     "mh_title": "", 
     "video": false, 
     "image": [ 

     ], 
     "showCta": false, 
     "cta": [ 

     ] 
     }, 
     { 
     "type": "text_image", 
     "alignment": "left", 
     "text_image": [ 
      { 
      "type": "text", 
      "title": "", 
      "content": "", 
      "call_to_action": false, 
      "cta": [ 

      ] 
      } 
     ] 
     } 
    ] 
    }, 
} 

だからそのcurPageデータが利用可能な場合、私はそれを使用したい：

だから私の初期状態は、次のようになります。

現在のところ、マイページコンポーネントはgraphQLからのみフェッチし、データがinitialStateで利用可能かどうかをチェックしません。

import React, { Component } from 'react' 
import { graphql, gql } from 'react-apollo'; 

import './about.css' 

class About extends Component { 
    render() { 
    return (
     <section className='about-container'> 
     <h2>About Page</h2> 
     </section> 
    ) 
    } 
} 

const mapQueryToProps = ({data: { findResource }, ownProps}) => 
    ({ curPage: findResource ? findResource[0] : null }) 

const MY_QUERY = gql` 
    query { 
    findResource(filter: {resource: "pages", slug: "about"}) { 
     id 
     title 
     slug 
     path 
     sections 
    } 
    }` 

export default graphql(MY_QUERY, { props: mapQueryToProps })(About) 

私が反応し、再来のconnect()それが利用できない場合が、その後graphQLからフェッチんような何かを行うことができアポロgraphQLによる方法はありますか？

connect()を使用する必要があると推測していますが、componentDidMount()にデータが設定されていないかどうかを確認してください。

Answer 1

curDataをApolloのグラフ形式に変換し、それを使用してストアのApolloセクションを初期化する必要があります。

あなたがここに特定について読むことができます

：あなたは、サーバー上のアポロGraphqlを使用している場合、それは実際にあなたがクライアントに送信する必要がある状態を生成しますので、アポロは、実際に、サーバ側のレンダリングをサポートしていることをhttp://dev.apollodata.com/react/server-side-rendering.html#store-rehydration

注意クライアント側のReduxストアを初期化するために使用する