Состояние GraphQL и ReactJS

Question

Я использую ApolloProvider в качестве HOC для получения данных с сервера и Query с 'react-apollo' для отображения данных на страницах и в компонентах.

А вот и проблема.<Query /> визуализирует данные непосредственно в такие элементы, как <input />, без использования состояния компонента.Но что, если я хочу изменить значение <input /> с помощью функции onChange(), где я могу хранить новые значения?Можно ли получить данные с помощью Apollo в componentDidMount(), сохранить их и затем передать их render()?

Вот фиктивный код, который у меня есть, только для примера:

const USER = id => gql`
  {
    user(id: "${id}") {
      _id
      name
      surname
      email
    }
  }
`;

render() {
    const { id } = this.props;

    return (
      <Query query={USER(id)}>
        {({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error:(</p>;

          const { user } = data;

          return (
            <div>
              <input type="text" value={user.name} />
              <input type="text" value={user.surname} />
              <input type="text" value={user.email} />
            </div>
          );
        }}
      </Query>
    );
  }

Я хочу добавить onChange() функцию к этим входам и затем выполнить мутацию GraphQL

Answer 1

Вы можете обернуть Mutation вокруг вашего запроса (или наоборот, это ничего не изменит).А затем привяжите функции onChange ваших входов к действию * 1003. *

<Mutation mutation={UPLOAD_FILE}>
    {action =>
        <Query query={USER(id)}>
            {({ loading, error, data }) => {
                if (loading) return <p>Loading...</p>;
                if (error) return <p>Error:(</p>;

                const { user } = data;

                return (
                    <div>
                        <input type="text" value={user.name} onChange={ev => action({ variables: { newText: ev.target.value } })} />
                        <input type="text" value={user.surname} onChange={ev => action({ variables: { newText: ev.target.value } })}  />
                        <input type="text" value={user.email} onChange={ev => action({ variables: { newText: ev.target.value } })}  />
                    </div>
                );
            }}
        </Query>
    }
</Mutation>

Вы также можете убрать логику из вашего JSX, связав свой результат с функцией в вашем классе:

handleInputChange = (action, type) => ev => {
    action({ variables: { [type]: ev.target.value } })
}

<Mutation mutation={UPLOAD_FILE}>
    {action =>
        <Query query={USER(id)}>
            {({ loading, error, data }) => {
                if (loading) return <p>Loading...</p>;
                if (error) return <p>Error:(</p>;

                const { user } = data;

                return (
                    <div>
                        <input type="text" value={user.name} onChange={this.handleInputChange(action, 'name')} />
                        <input type="text" value={user.surname} onChange={this.handleInputChange(action, 'surname')}  />
                        <input type="text" value={user.email} onChange={this.handleInputChange(action, 'email')}  />
                    </div>
                );
            }}
        </Query>
    }
</Mutation>