Question

我是Relay的新手（带有reactjs），并且在查看器中提交突变后更新我的UI时遇到问题。在我的示例中，我有一个Salutation Component，其中包含用户的名字，为了简化这一点，我在输出名称后面输入了一个输入字段。

当用户更改文本字段中的名称时，我会将其发送到我的updatemutation和API。我的问题是，在保存新名称后，我不知道如何更新输入上方的名称。任何人都可以帮助我 - 在更新程序中我需要做什么？

非常感谢！

＆＃34; root＆＃34; -Component：

import React, {Component} from 'react';
import {QueryRenderer, graphql} from 'react-relay';
import environment from 'app/settings/createRelayEnvironment';
import Salutation from 'app/components/dashboard/includes/Salutation';


const DashboardQuery = graphql`
    query DashboardQuery {
        viewer {
            ...Salutation_viewer
        }
    }
`;

class Dashboard extends Component {
    render() {
        return (
            <QueryRenderer
                environment={environment}
                query={DashboardQuery}
                render={({error, props}) => {
                    if (error) {
                        return <div>{error.message}</div>;
                    } else if (props) {
                        return (
                            <div>
                                <Salutation viewer={props.viewer}></Salutation>
                            </div>
                        );
                    }

                    return <div>Loading</div>;
                }}
            />
        );
    }
}

export default Dashboard;

致敬组成部分：

import React, {Component} from 'react';
import {createFragmentContainer, graphql} from 'react-relay';
import PropTypes from 'prop-types';
import UpdateDashboardMutation from 'app/mutations/UpdateDashboardMutation';


class Salutation extends Component {
    render() {
        return (
            <div className="salutation">
                <h2>Willkommen {this.props.viewer.firstName}</h2>
                <input type="text" onChange={this._onChange.bind(this)}/>
            </div>
        );
    }

    _onChange(event) {
        UpdateDashboardMutation(event.currentTarget.value);
    }
}

Salutation.propTypes = {
    viewer: PropTypes.object
};

export default createFragmentContainer(Salutation, graphql`
    fragment Salutation_viewer on Viewer {
        firstName
    }
`);

更新突变：

import {commitMutation, graphql} from 'react-relay';
import environment from 'app/settings/createRelayEnvironment';


const mutation = graphql`
    mutation UpdateDashboardMutation($input: UpdateDashboardMutationInput!) {
        updateDashboard(input: $input) {
            ok,
            errors {
                field,
                messages
            }
        }
    }
`;


function UpdateDashboardMutation(firstName) {
    commitMutation(
        environment,
        {
            mutation,
            variables: {
                input: {
                    firstName
                }
            },
            updater(store) {
                // what i have to do here?
            }
        }
    );
}

export default UpdateDashboardMutation;

Answer 1

尝试：

const viewer = store.getRootField('viewer');
viewer.setValue(firstName, 'name');

有关详细信息，请参阅https://facebook.github.io/relay/docs/en/relay-store。

在中继突变后使用查看器更新子组件

1 个答案: