javascript - 如何从服务器端补充我的 Apollo 状态？

我是 react-apollo 的新手我很困惑如何从服务器端向客户端补充状态我的应用程序正在运行，但问题是它没有使用来自 Apollo 的预加载状态在组件渲染后它正在调用再次调用 API。

严重的 Redux 集成使复杂化只有 Apollo 状态正在呈现，而不是这里的问题的自定义 redux 状态。但我不知道如何集成。

服务器.js

const HTML = ({ html,state}) => (

    <html lang="en" prefix="og: http://ogp.me/ns#">
    <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta httpEquiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

    </head>
    <body>
    <div
        id="app"
        dangerouslySetInnerHTML={{ __html: html }} />
    <script dangerouslySetInnerHTML={{
        __html: `window.__STATE__=${JSON.stringify(state)};`,
    }} />

    <script src="/static/app.js" />

    </body>
    </html>
);

app.get('/*',(req,res) => {
    const routeContext = {};
    const client = serverClient();

    const components = (
        <StaticRouter location={req.url} context={routeContext}>
            <ApolloProvider store={store} client={client}>
                <WApp />
            </ApolloProvider>
        </StaticRouter>
    );

    getDataFromTree(components).then(() => {
        const html = ReactDOMServer.renderToString(components);
        const initialState = {apollo: client.getInitialState()}


        res.send(`<!DOCTYPE html>\n${ReactDOMServer.renderToStaticMarkup(
            <HTML
                html={html}
                state={initialState}
                 />,
        )}`)


    })


})

apolloClient.js

import ApolloClient, {
    createNetworkInterface,
    addTypeName,
} from 'apollo-client';
const isProduction = process.env.NODE_ENV !== 'development';
const testUrl = 'http://localhost:3000/api';

// const url = isProduction ? productionUrl : testUrl;
const url =  testUrl;





const client = new ApolloClient({

    networkInterface: createNetworkInterface({uri:testUrl}),
    dataIdFromObject:({id}) => id,
    reduxRootKey:state => state.apollo,
    initialState: (typeof window !=='undefined')? window.__STATE__:{}






});







export default client;

商店.js

import { createStore, compose, applyMiddleware } from 'redux';
import { syncHistoryWithStore } from 'react-router-redux';
import thunk from 'redux-thunk';
import {createLogger} from 'redux-logger';


import client from '../apolloClient';
import rootReducer from '../Reducers'

//All Reducer
import {initialState as allPosts} from '../Reducers/AllPosts_Reucer';
const isProduction = process.env.NODE_ENV !== 'development';
const isClient = typeof document !== 'undefined';
const initialState = {
    allPosts
};

const middlewares = [thunk, client.middleware()];
const enhancers = [];

if (!isProduction && isClient) {
    const loggerMiddleware = createLogger();
    middlewares.push(loggerMiddleware);

    if (typeof devToolsExtension === 'function') {
        const devToolsExtension = window.devToolsExtension;
        enhancers.push(devToolsExtension());
    }
}



const composedEnhancers = compose(
    applyMiddleware(...middlewares),
    ...enhancers
);
const store = createStore(
    rootReducer,
    initialState,

    composedEnhancers,
);

export default store;

示例组件

import React,{Component} from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { graphql } from 'react-apollo';

import gql from 'graphql-tag';

import * as postActions from '../../Redux/Actions/postActions';


class Home extends Component{
    componentWillMount(){
        // console.log('From Will Mount',this.props.posts)
    }
    renderAllPost(){
        const {loading,posts} = this.props;

        if(!loading){
            return posts.map(data => {
                return <li key={data.id}>{data.title}</li>
            })
        }else{
            return <div>loading</div>
        }
    }
    render(){
    console.log(this.props);
        return(
            <div>

                {this.renderAllPost()}

            </div>
        )
    }
}


//start from here
const GetallPosts = gql`
query getAllPosts{
  posts{
    id
    title
    body
  }
}
`;

// const mapStateToPros = (state) => ({
//     allPosts:state.allPosts
// });

const mapDispatchToProps = (dispatch) => ({
    actions:bindActionCreators(
        postActions,
        dispatch
    )
});


const ContainerWithData = graphql(GetallPosts,{
    props:({ data:{loading,posts} }) => ({
        posts,
        loading,
    })
})(Home)


export default connect(
    // mapStateToPros,
    // mapDispatchToProps
)(ContainerWithData)

最佳答案

您可以将 redux-persist 状态直接注入(inject)到 apollo-client 中

getStoredState({ storage: localforage }, (err, rehydratedState) => { ... }

我也希望有不同的方法，检查 Delay Render Until Rehydration Complete

关于javascript - 如何从服务器端补充我的 Apollo 状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44614666/

javascript - 如何从服务器端补充我的 Apollo 状态？

上一篇：javascript - JMESPath 中的动态/计算键？

下一篇：javascript - 在另一个 Saga 中使用 Action/Saga