Graphql使用redux狀態以及Apollo

我有一個服務器端渲染的應用程序，並希望數據可以在第一個渲染訪問。如果用戶導航到下一頁，我想使用graphQL庫Apollo來獲取新內容。Graphql使用redux狀態以及Apollo

當請求一個頁面時，服務器用請求的頁面的數據設置initialState鍵curPage。例如，用戶請求http://example.com/about。我從我的數據庫中獲取的頁面數據，將initialState鍵curPage設置爲來自數據庫的數據。

所以我的初始化狀態可能是這個樣子：

{ 
    "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獲取。

我的頁面組件目前只從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)

有沒有辦法通過阿波羅graphQL，我可以做這樣的事情發生反應，終極版的connect()沒有，但如果它是不可用，則自graphQL取？

我猜我需要使用connect()但在我的componentDidMount()檢查數據是否設置，如果它不檢索？

來源

2017-07-18 Stretch0

您需要將curData轉換爲Apollo graphql格式並使用它來初始化商店的Apollo部分。

你可以閱讀一下具體位置：http://dev.apollodata.com/react/server-side-rendering.html#store-rehydration

注意阿波羅實際上支持服務器端呈現，因此，如果您在服務器上使用阿波羅Graphql，它實際上會產生你需要發送給客戶端的狀態用來初始化客戶端Redux商店

來源

2017-07-19 00:35:09 Brandon

很酷，請看看。謝謝 – Stretch0

Graphql使用redux狀態以及Apollo

回答

相關問題