GraphQL 和 ReactJS 状态

Posted 2023-03-10

【中文标题】GraphQL 和 ReactJS 状态

【英文标题】：GraphQL and ReactJS state

【发布时间】：2019-06-30 11:23:21

【问题描述】：

我使用 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 突变

【参考方案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>

【讨论】：

谢谢你的提示，我会试试你的例子。然而，状态不用于存储值是很奇怪的，因为它在您需要为输入（例如电子邮件）添加验证并且在验证后使用保存按钮进行变异的情况下很有用

好吧，在我的第二个示例中，您可以验证handleInputChange 函数中的给定输入是否正确，因为每个更改都会通过它。您还可以使用突变将返回的内容来设置您的状态并控制您的输入。你需要一个例子吗？