继电器突变是不工作动态

Question

我已经查询相关继电器突变请看看 我试图从设置集合更新量场，但没有刷新页面。价值得到了更新，但页面刷新每次。 任何人都可以给我任何建议吗？

下面是我schema.js

var settingType = new GraphQLObjectType({ 
    name: 'Setting', 
    fields: { 
    _id: { 
     type: new GraphQLNonNull(GraphQLID) 
    }, 
    id: globalIdField('Setting'), 
    amount: { 
     type: GraphQLString 
    }, 
    }, 
    interfaces: [nodeInterface] 
}); 

var Root = new GraphQLObjectType({ 
    name: 'Root', 
    fields:() => ({ 
    setting: { 
     type: settingType, 
     args: { 
     ...connectionArgs, 
      currency: {type: GraphQLString} 
     }, 
     resolve: (rootValue, args) => { 
     return getSetting(args.currency).then(function(data){ 
     return data[0]; 
     }).then(null,function(err){ 
     return err; 
     }); 
     } 
    }, 
    }) 
}); 

let EditAmountMutation = mutationWithClientMutationId({ 
    name: 'EditAmount', 
    inputFields: { 
    amount: { type: new GraphQLNonNull(GraphQLString) }, 
    }, 
    outputFields: { 
    viewer: { 
     type: settingType, 
     resolve:() => { 
     return getSettingedit().then(function(data){ 
      return data.setting[0] 
     }) 
     }, 
    }, 
    }, 
    mutateAndGetPayload: ({amount}) => { 
    return EditAmount({amount}).then(function(data){ 
     return data.setting 
    }) 
    }, 
}); 

export var schema = new GraphQLSchema({ 
    query: Root, 
    mutation: new GraphQLObjectType({ 
    name: 'Mutation', 
    fields:() => ({ 
     EditAmount: EditAmountMutation, 
    }) 
    }) 
}); 

，下面将我的EditAmountMutation.js文件

import Relay from "react-relay"; 

class EditAmountMutation extends Relay.Mutation { 
    static fragments = { 
    viewer:() => Relay.QL` 
     fragment on Setting { 
     amount, 
     } 
    `, 
    }; 
    getMutation() { 
    return Relay.QL` 
     mutation { EditAmount } 
    `; 
    } 

    getVariables() { 
    return { 
     amount: this.props.amount, 
    } 
    } 

    getFatQuery() { 
    return Relay.QL` 
     fragment on EditAmountPayload{ 
     viewer{ 
      id, 
      amount 
     } 
     } 
    `; 
    } 

    getConfigs() { 
    return [{ 
     type: 'FIELDS_CHANGE', 
     fieldIDs: { 
     viewer: this.props.viewer, 
     }, 
    }] 
    } 
    getOptimisticResponse() { 
    return { 
     viewer: { 
     amount: this.props.amount, 
     }, 
    }; 
    } 
} 

export default EditAmountMutation; 

以下是我的看法页Setting.js

import React, { Component } from 'react'; 
import EditAmountMutation from "../mutations/EditAmountMutation"; 
import Relay from 'react-relay'; 

class Setting extends Component { 

    handleSubmitt = (e) => { 
    Relay.Store.commitUpdate(
     new EditAmountMutation({ 
     viewer: this.props.viewer, 
     amount: this.refs.amount.value, 
     }), 
    ); 
    this.refs.amount.value = ""; 
    } 
    render() { 
    let viewer =this.props.viewer; 
    return (
     <div className="col-md-4 col-md-offset-4"> 
     <form onSubmit={this.handleSubmitt} className="settingForm photo-gallry"> 
      <div className="form-group"> 
       <label>Current Amount:&nbsp;&nbsp;</label> 
       <span>{viewer.amount}</span> 
       </div> 
       <div className="form-group"> 
       <label>Change Amount</label> 
       <input className="form-control" type="text" required placeholder="Amount" ref="amount" /> 
       </div> 
       <button className="btn btn-primary allbtn-btn" type="submit">Submit</button> 
      </form> 
     </div> 
    ); 
    } 
} 

export default Relay.createContainer(Setting, { 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on Setting { 
     id, 
     amount, 
     ${EditAmountMutation.getFragment('viewer')} 
     } 
    `, 
    }, 
}); 

及以下是route.js文件

const SettingQueries = { 
viewer:() => Relay.QL`query{ 
    setting(currency: "USD") 
}`, 
} 

export default [{ 
    path: '/', 
    component: App, 
    queries: UserQueries,PostQueries,SettingQueries, 
    indexRoute: { 
    component: IndexBody, 
    }, 
    childRoutes: [{ 
    path: 'settings', 
    component: Setting, 
    queries: SettingQueries, 
    }] 
}] 

以下

是database.js

export function getSetting(params) { 
    // console.log("getSetting",params) 
    return Setting.find({currency: "USD"}) 
    .exec() 
    .then(function(setting) { 
    return setting; 
    }); 
} 

export function EditAmount(params) { 
    // console.log(params) 
    return Setting.findOneAndUpdate({currency: "USD"}, {$set:{amount:params.amount}}, {new: true}, function(err, setting){ 
    if (err) return err; 
     return setting; 
    }); 
} 

同样的事情正在处理/ graphql作为

mutation EditAmountMutation($input:EditAmountInput!) { 
    EditAmount(input:$input) { 
    clientMutationId, 
    viewer{ 
     amount 
    } 
    } 
} 

{ 
    "input": { 
    "clientMutationId": "32", 
    "amount": "222" 
    } 
} 

，并得到输出如下

{ 
    "data": { 
    "EditAmount": { 
     "clientMutationId": "32", 
     "viewer": { 
     "amount": "222" 
     } 
    } 
    } 
} 

但网络选项卡我的JavaScript控制台将其显示为发布请求

Answer 1

在EditAmountMutation.js文件，修复getConfigs功能。不是提供查看器的ID，而是提供了整个对象。改成这样：

fieldIDs: { 
    viewer: this.props.viewer.id, 
}, 

此外，包括id到fragments财产，因为突变对浏览器的依赖：

static fragments = { 
    viewer:() => Relay.QL` 
     fragment on Setting { 
     id, 
     amount, 
    } 
    `, 
}; 

见the mutation example的文件中。