如何使用 mui-datatable 实现 aws 订阅

Posted 2023-02-22

【中文标题】如何使用 mui-datatable 实现 aws 订阅

【英文标题】：How to implement aws subscriptions with mui-datatable

【发布时间】：2019-10-05 17:04:12

【问题描述】：

一段时间以来，我一直在尝试将 mui-datatable 与 aws 一起使用，这对于查询和突变之类的事情效果很好。我最近尝试实现订阅，但遇到了很多问题，希望这里有人能够帮助我。问题基本上是当我执行突变时，表格不会改变，但是如果我在执行突变的字段中输入另一个值，表格就会更新。这是执行突变的类

AddRecord.js

addRecord = async () =>  /*handles the mutations and sets it ro a state Record*/
    const result = await this.props.client.mutate(buildMutation(this.props.client,
      gql(createRecords),
        inputType: gql(CreateRecordsInput),
        variables: 
          input: 
            record: this.state.Record,
          
        
        ,
        _variables => [ gql(listRecordss) ],
        'Records'));
      console.log( "success", result )
 
   render() 
       const  classes  = this.props;
       const  Record  = this.state;

   return (
       <div className=classes.root>

       <div><ListEintraege client=this.props.client /></div>

           <TextField
         id="outlined-eintreag-input"
         variant="outlined"
         onChange=this.handleChange('Record')
         value=Record
         multiline
         className=classes.textField
         style= margin: 8, marginTop: 30 
         InputLabelProps=
           shrink: true,
         
         fullWidth
       />
       <Button
       variant="contained"
       color="primary"
       className=classes.button
       onClick=this.addRecord
       >
       Eintrag <SendIcon color="secondary" style= margin: 8 />
      </Button>
... 

以及列出数据的类

ListRecords.js

//subscrip() is just to show I tried that too
/* subscrip = async () => 
    let subscription;
        subscription = await this.props.client.subscribe( query: gql(onCreateRecords) ).subscribe(
        next: data => 
          console.log(data.data.onCreateRecords);
         const k = data.data.onCreateRecords;
         console.log("I am:", k);
         this.state.Records2 = k;
         console.log("I be:", this.state.Records2);
        ,
        error: error => 
          console.warn(error);
        
      );
 
*/



 render() 
    const  Records, Records3  = this.state;

    const columns = [
        
         name: "Datum & Uhrzeit",
         label: "Datum & Uhrzeit"
        ,
        
         name: "Eintrag",
         label: "Eintrag"
        ,
        
         name: "Arzt",
         label: "Arzt"
        ,
        
            name: "Patient",
            label: "Patient"
           ,
       ];

    const data = [ // results of query
     ... Records3.map((rest, i) => (
      [rest.createdAt, rest.record, rest.arzt, rest.patient]
   )),


    ];

    const options = 
        ...
  ;

  const onNewRecord = (prevQuery, newData) => 

    let updatedQuery = ...prevQuery;

    const updatedRecordsList = [
      newData.onCreateRecords,

      ...prevQuery.listRecordss.items
    ]

    updatedQuery.listRecordss.items =  updatedRecordsList;


    return updatedQuery;

    

    return (
        <div>

<MUIDataTable
            title="Leistungen"
            data=data
            columns=columns
            options=options
            />

<Connect
        query=graphqlOperation(listRecordss)
        subscription=graphqlOperation(onCreateRecords)
        onSubscriptionMsg=onNewRecord
    >

        (data, loading, error) => 
            if (loading) return "Loading"
            if (error) return "Error"
            this.state.Records3 = data.listRecordss.items
            console.log('markets', Records3)

            return 

        
    </Connect> 

感谢您的帮助。

【参考方案1】：

愚蠢的错误只需要在连接组件中传递 Mui 表，而不是使用状态使用常量。至少为我解决了这个问题，以防有人遇到这个问题。

<Connect
        query=graphqlOperation(listRecordss)
        subscription=graphqlOperation(onCreateRecords)
        onSubscriptionMsg=onNewRecord
    >

        (data, loading, error) => 
            if (loading) return "Loading"
            if (error) return "Error"
            const bil = data.listRecordss.items
            console.log('bil', bil)

            return <MUIDataTable
            title="Leistungen"
            data= bil.map((rest, i) => (
              [rest.createdAt, rest.record, rest.arzt, rest.patient]
           ))
            columns=columns
            options=options
            />

        
    </Connect>