中继突变无法动态运行

Question

I have query related to Relay mutation please have a look I am trying to update amount field from a settings collection but without page refresh .Value got updated but page is refreshing every time. Can anyone give me any suggestions?

Below is my 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,
    })
  })
});

And below is my EditAmountMutation.js file

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;

and below is my view page 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')}
      }
    `,
  },
});

And below is route.js file

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,
  }]
}]

below is 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;
  });
}

Also things are working on /graphql As

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

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

and got output as below

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

but network tab of my JavaScript console shows this as post request

Answer 1

In EditAmountMutation.js file, fix the getConfigs function. Instead of providing an ID of viewer, you have provided the whole object. Change to this:

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

Also, include id to the fragments property, because the mutation has a dependency on viewer:

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

See the mutation example in the documentation.