从GraphQL查询后,如何以React状态存储数据?

时间:2019-03-24 19:53:11

标签: reactjs redux react-apollo apollo-client graphql-js

以下是我的查询:

import React from 'react';
import getProducts from '../queries/getProduct';
import { Query } from "react-apollo";


export const Product = () => {
    const proId = {
        "productId": "95eb601f2d13"
    }

   return (
       <Query query={getProducts} variables={proId}>
        {({ loading, error, data }) => {
            if (loading) return "Loading...";
            if (error) return `Error! ${error.message}`;

            return (
                <div>
                    {data.map(entry => entry)}
                </div>
            );
        }}
       </Query>
   );
};

export default Product;

我现在需要将接收到的数据存储在React或Redux(以理想状态为准)中,以便可以在1/2 Components中访问该数据。如何存储数据而不是像上面那样渲染数据?

根据这些数据,我渲染了90%的组件。

1 个答案:

答案 0 :(得分:1)

像这样尝试onCompleted

function onCompletedHandler(data) {
    dispatch({ 'RECEIVED_DATA': data })
}

<Query query={getProducts} variables={proId} onCompleted={onCompletedHandler}>
    ...
</Query>