如何使用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

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