Question

我有关于Relay变异的查询请看看我正在尝试从设置集合更新金额字段，但没有页面刷新.Value已更新，但页面每次都刷新。任何人都可以给我任何建议吗？

以下是我的schema.js

aws_api_gateway_method

以下是我的EditAmountMutation.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,
    })
  })
});

以下是我的观看页面Setting.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;

以下是route.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')}
      }
    `,
  },
});

下面的

是database.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,
  }]
}]

还有一些工作正在/ graphql As

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

并得到如下输出

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

{
  "input": {
    "clientMutationId": "32",
    "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。

Relay Mutation无法动态运行

1 个答案: