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

Question

我尝试将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> 

谢谢你的帮助。

Answer 1

一个愚蠢的错误，只需要在connect组件中传递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>