중계 변경이 동적으로 작동하지 않습니다.

Question

중계 변이와 관련된 쿼리가 있습니다. 설정 컬렉션에서 금액 필드를 업데이트하려고하지만 페이지 새로 고침이 필요하지 않습니다. 값이 업데이트되었지만 페이지가 매회 새로 고침됩니다. 누구든지 내게 어떤 제안을 할 수 있습니까?

다음은 내 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; 

파일 내 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, 
    }) 
    }) 
}); 

그리고를하고 아래 아래에있는 내보기 페이지 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 파일

아래

내 자바 스크립트 콘솔의 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; 
    }); 
} 

가지 작업중인/

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

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

으로 graphql 얻은 출력

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

아래와 같이하지만 네트워크 탭입니다 게시물 요청으로 표시합니다.

Answer 1

EditAmountMutation.js 파일에서 getConfigs 기능을 수정하십시오. 뷰어 ID를 제공하는 대신 전체 개체를 제공해야합니다. 이로 변경

또한

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

에서, fragments 재산 id을 포함, 돌연변이 뷰어에 대한 종속성이 있기 때문에 :

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

이 문서에 the mutation example를 참조하십시오.