Обновление подкомпонента с помощью средства просмотра после мутации в реле

Question

Я новичок в Relay (сactjs), и у меня возникла проблема с обновлением моего пользовательского интерфейса после изменения фиксации в средстве просмотра.В моем примере у меня есть компонент приветствия с именем пользователя, и чтобы упростить это, я помещаю поле ввода сразу после вывода имени.

Когда пользователь изменяет имя в текстовом поле, яотправьте это моей обновленной коммутации и API.Моя проблема в том, что я не знаю, как обновить имя над вводом после сохранения нового имени.Кто-нибудь может мне помочь - что мне нужно сделать в апдейтере?

Большое спасибо!

Компонент "root":

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.