中继突变不能动态工作

Posted 2023-03-08

【中文标题】中继突变不能动态工作

【英文标题】：Relay Mutation is not working dynamically

【发布时间】：2016-12-26 17:09:47

【问题描述】：

我有关于 Relay 突变的查询，请看一下 我正在尝试从设置集合中更新金额字段，但没有刷新页面。值已更新，但页面每次都在刷新。 谁能给我一些建议？

下面是我的 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 As 也在进行中

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



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

得到如下输出

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

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

【问题讨论】：

还有奇怪的行为，数量在 chrome 上已更新，但在 Firefox 上没有更新。

在执行更新时，我认为输出字段在中继突变中不起作用

amount 的 Settings 容器的数据已更新，因此 Settings 容器已刷新。我在这里没有发现任何问题。

你可以看到截图我附加的输出字段查看器没有出现在查询中可能是这个原因。

【参考方案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。

【讨论】：

还在同一个地方。如您所见` "query":"mutation EditAmountMutation($input_0:EditAmountInput!) \n EditAmount(input:$input_0) \n clientMutationId\n \n","variables":"input_0" :"amount":"23","clientMutationId":"0"` 查询中没有查看器

您是否将id 添加到fragments？我更新了我的答案。

是的，我更新了，但仍在同一个地方。感谢您的努力。