Question

我有一个看起来像这样的突变：

export default class CreateTaskMutation extends Relay.Mutation {
    //noinspection JSUnusedGlobalSymbols
    getMutation() {
        return Relay.QL`
            mutation {
                createTaskMutation
            }
        `;
    }
    //noinspection JSUnusedGlobalSymbols
    getCollisionKey() {
        return `check_${this.props.id}`;
    }

    //noinspection JSMethodCanBeStatic,JSUnusedGlobalSymbols
    getFatQuery() {
        return Relay.QL`
            fragment on CreateTaskMutationPayload {
                savedTask {
                    _id,
                    isPublic,
                    isDone,
                    taskDescription {
                        description
                    }
                }
            }
        `;
    }

    // noinspection JSUnusedGlobalSymbols
    getConfigs() {
        return [{
            type: 'REQUIRED_CHILDREN',
            children: [
                Relay.QL`
                    fragment on CreateTaskMutationPayload {
                        savedTask {
                            _id,
                            isPublic,
                            isDone,
                            taskDescription {
                                description
                            }
                        }
                    }
                `
            ]
        }];
    }

    //noinspection JSUnusedGlobalSymbols
    getVariables() {
        return {
            cookie: this.props.cookie,
            owner: this.props.owner,
            taskDescription: this.props.taskDescription,
            isPublic: this.props.isPublic,
            isDone: this.props.isDone
        };
    }

    //noinspection JSUnusedGlobalSymbols
    getOptimisticResponse() {
        return {
            savedTask: {
                owner: this.props.owner,
                taskDescription: this.props.taskDescription,
                isPublic: this.props.isPublic,
                isDone: this.props.isDone
            }
        };
    }
}

我正在使用它：

Relay.Store.commitUpdate(
    new CreateTaskMutation({
        cookie: this.state.cookie,
        owner: this.state.id,
        taskDescription: {description: this.state.taskDescriptionInput},
        isPublic: this.state.isTaskPublic,
        isDone: this.state.isTaskDone
    }),
    {
        onSuccess: (response) =>  {
            const newArray = this.state.newlyAddedTasks;
            newArray.push(response.createTaskMutation.savedTask);
            this.setState({
                newlyAddedTasks: newArray
            });
        }
    }
);

现在，当您使用像FIELDS_CHANGED这样的配置时，我可以this.props.relay.hasOptimisticUpdates(<some item>)，但是因为我正在创建继电器商店还不知道的东西，没有DataID可供查找。所以，我目前的解决方案是使用两个来源完成任务，中继片段响应，以及我成功更新的状态。

<CreateTaskRequestBox
    tasks={this.props.currentUserFragment.userField.tasks}
    newTasks={this.state.newlyAddedTasks}
/>

我是否有一种巧妙的方式让我在Relay Store中提供乐观的响应并让它像我使用FIELDS_CHANGED配置一样更新？我目前的解决方案看起来有点笨拙，而且并不乐观。

Answer 1

那么，您是否希望此突变实际修改图形，而不仅仅是返回暂时使用的有效负载？然后使用其中一个记录的变异配置：FIELDS_CHANGE和RANGE_ADD将改变本地图中的连接并相应地更新您的视图。对于不应该实际影响本地图表的突变，REQUIRED_CHILDREN显式不，并且没有记录，因此我不确定您使用它的原因。 .. :)）

要使用FIELDS_CHANGE，请更新有效负载以包含父节点（在您的情况下看起来像userField），然后只对userField { tasks }进行查询。

要使用RANGE_ADD，请更新您的有效负载以包含新的任务边缘（例如savedTaskEdge { cursor, node }），并在变异配置中引用它。

使用REQUIRED_CHILDREN config

1 个答案: