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表，而不是使用状态即可使用常量。如果有人遇到此问题，Atleast会为我解决。

<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>

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

1 个答案: