Как реализовать подписки на aws с помощью mui-datatable - PullRequest
Новая
       18

Как реализовать подписки на aws с помощью mui-datatable

0 голосов
/ 18 мая 2019

Я уже некоторое время пытаюсь использовать 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 Ответ

0 голосов
/ 18 мая 2019

глупая ошибка, нужно просто передать таблицу Mui в компоненте connect и вместо использования состояния использовать константу. По крайней мере, это решило это для меня на случай, если кто-то столкнется с этим. 

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