GraphQL 和 ReactJS 状态

Question

我使用 ApolloProvider 作为 HOC 从服务器获取数据，并使用 Query 从 'react-apollo' 在页面和组件中呈现数据。

这是一个问题。 <Query /> 将数据直接呈现给 <input /> 等元素，而不使用组件的状态。但是如果我想用onChange() 函数更改<input /> 值怎么办，我在哪里存储新值？ 是否可以使用 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 函数绑定到Mutation 操作。

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