Получить и обновить данные формы в ответ

Question

Я использую клиент React & Apollo для получения данных с сервера GraphQL.
Теперь я написал следующий компонент в реагировать.

1. Компонент для перечисления всего элемента - рабочий.
2. Компонент для создания предмета - рабочий.
3. Компонент для обновления элемента - не работает (не знаю, как это сделать).

У меня есть 2 файла компонентов.

1. UpdateAudio.js.
2. AudioForm.js.

Теперь.

1. Мне нужно получить данные с сервера GraphQL для данного audioID (получит из параметров пути).
2. затем установите этот звук в состояние.
3. и передать состояние звука компоненту AudioForm.

Я инициализирую аудио с пустыми полями, изначально находящимися в состоянии.
Я могу получить данные с помощью Query, но я не уверен, как обновить состояние звука, которое будет передано в AudioForm и заполнит данные дальше.

UpdateAudio.js

import React, { Component, Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import { Mutation, Query, graphql } from 'react-apollo';
import { UpdateAudioQuery, GetAudio } from '../query';
import { Button, Grid, LinearProgress } from '@material-ui/core';
import AudioForm from '../components/AudioForm';


class UpdateAudio extends Component {
    constructor(props) {
        super(props);
        this.state = {
            site: "5d517862-0630-431c-94b1-bf34de6bfd8b",
            audio: {
            site: "5d517862-0630-431c-94b1-bf34de6bfd8b",
            title: '',
            description: '',

            }
        };
        this.updateCache = this.updateCache.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    updateCache = (cache, { data }) => {
        if (data.createAudio.audio.guid) {
            console.log("redirecting...")
            this.props.history.push('/audios')
        }
    }

    handleChange = event => {
        const { name, value } = event.target;

        this.setState(prevState => ({
            audio: {
            ...prevState['audio'],
            [name]: value,
            }
        }));
    };

    render() {
        return (
            <Fragment>
                <AudioForm audio={this.state.audio} handleChange={this.handleChange}  />
                <Grid container alignItems="center" justify="center">
                    <Grid item>
                        <Mutation mutation={UpdateAudioQuery} update={this.updateCache}>
                            {(Update, {loading, data, error}) => {
                            if (loading) {
                                return <Button variant="contained" size="large" color="secondary" disabled>Save</Button>
                            }
                            else if (error) {
                                return <div>{error}</div>
                            }
                            else {
                                return <Button variant="contained" size="large" color="secondary" onClick={() => Update({variables: this.state.audio})}>Update</Button>
                            }
                            }}
                        </Mutation>
                    </Grid>
                </Grid>
            </Fragment>
        )
    }
}

UpdateAudio = withRouter(UpdateAudio)

export default graphql(GetAudio,
    {
        name:'Get',
        options: ownProps => ({ variables: {site: "5d517862-0630-431c-94b1-bf34de6bfd8b", guid: ownProps.match.params.guid} })
    })(UpdateAudio);

AudioForm.js

import React, {Fragment} from 'react';
import { TextField, Grid } from '@material-ui/core';


class AudioForm extends React.Component {

  render() {
    console.log(this.props.audio.title);

    return (
      <Fragment>
      <form  noValidate autoComplete="off">
        <Grid container spacing={24} alignItems="center" justify="center">
          <Grid item md={4} xs={12}>
            <TextField
              id="audio-title"
              name="title"
              label="Title"
              margin="normal"
              variant="outlined"
              InputLabelProps={{ shrink: true }}
              fullWidth
              defaultValue={this.props.audio.title}
              onChange={this.props.handleChange}
              required
            />
          </Grid>
          <Grid item md={4} xs={12}>
            <TextField
              id="audio-description"
              name="description"
              label="Description"
              margin="normal"
              variant="outlined"
              InputLabelProps={{ shrink: true }}
              fullWidth
              defaultValue={this.props.audio.description}
              onChange={this.props.handleChange}
            />
          </Grid>
        </Grid>
      </form>
      </Fragment>
    );
  }
}


export default AudioForm;

query.js

    import gql from 'graphql-tag';


    export const GetAudio = gql`
        query Get($site: String!, $guid: String!) {
        getAudio(site: $site, guid: $guid){
            guid
            siteGuid
            title
            description
        }
    }`

    export const UpdateAudio = gql`
        mutation Update($site: String!, $guid: String!, $title: String, $description: String) {
        updateAudio(
            input:{
                guid: $guid,
                site: $site,
                title: $title,
                description: $description
            }
        ) {
            audio{
                guid
                siteGuid
                title
                status
            }
        }
    }`;

Answer 1

Как я получил твой вопрос. Просто сделайте запрос, как показано ниже. Не используйте метод рендеринга реквизита для запроса, потому что вы не можете сделать там setState.

Лучшее место для метода ниже - это функция getDerivedStateFromProps. Делай эту работу там.

client.query({
    query: GetAudio,
    variables: { site, guid }
  })
  .then((res) => {
    // check for response and do setState
    // example ... 
    const { site, title, description } = res;
    this.setState({ site, title, description });
  })
.catch( err => console.log(err));

Также проверьте ссылку из официальных документов https://www.apollographql.com/docs/react/essentials/queries.html#manual-query

Я читал, я думаю, что более чем в 5 раз ваш вопрос, если я ошибся, простите меня.

Будьте благословенны.