使用 redux 状态以及 Apollo 的 Graphql

Posted 2023-03-08

【中文标题】使用 redux 状态以及 Apollo 的 Graphql

【英文标题】：Graphql using redux state as well as Apollo

【发布时间】：2017-12-23 23:54:13

【问题描述】：

我有一个服务器端渲染的应用程序，并希望在第一次渲染时可以访问数据。如果用户导航到下一页，我想使用 graphQL 库 Apollo 来获取新内容。

当一个页面被请求时，服务器用被请求页面的数据设置initialState键curPage。例如，用户请求http://example.com/about。我从数据库中获取/about 的页面数据，将initialState 键curPage 设置为数据库中的该数据。

所以我的 initialState 可能看起来像这样：

  "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)

有没有一种方法可以通过 Apollo graphQL 执行类似 react-redux 的 connect() 的操作，但如果它不可用，则从 graphQL 获取？

我猜我需要使用connect()，然后在我的componentDidMount() 中检查数据是否已设置以及是否未检索到它？

【参考方案1】：

你需要将curData转换成Apollo graphql格式，并用它来初始化store的Apollo部分。

您可以在此处阅读具体内容：http://dev.apollodata.com/react/server-side-rendering.html#store-rehydration

注意Apollo其实是支持服务端渲染的，所以如果你在服务端使用Apollo Graphql，它实际上会生成你需要发送给客户端用来初始化客户端Redux store的状态

【讨论】：

酷，看看。谢谢