Redux-Form 与 A​​pollo

Posted 2023-03-10

【中文标题】Redux-Form 与 A​​pollo

【英文标题】：Redux-Form with Apollo

【发布时间】：2018-04-15 14:22:51

【问题描述】：

我正在尝试查找与 Apollo 一起使用的 Redux-Form 示例，但找不到任何东西。我有一个现有的 Redux-Form 组件，我想使用我的 GraphQL 突变触发提交。看起来怎么样？

【参考方案1】：

我不确定您是否仍然需要它，但这是一种可能的解决方案。也许不是最好的组件组合，但这个简单的示例应该可以帮助您或其他人使用 redux-form 和 apollo 创建自己的表单。

在最简单的情况下，我们可以在一个组件中实现所有功能。下面是一段代码：

import React from 'react'
import  graphql, compose  from 'react-apollo' 
import  Field, reduxForm  from 'redux-form'
import  submitForm  from './somewhere' //you can also define mutation in this file

class ApolloForm extends React.Component 
  submitForm = (data) => 
    return this.props.submitForm(
      variables: firstName: data.firstName, lastName: data.lastName
    )
  

  render() 
    const  handleSubmit, submitting, submitSucceeded  = this.props
    return (
      <form onSubmit=handleSubmit(this.submitForm)>
        <Field
          name="firstName"
          component="input"
          type="text"
        />
        <Field
          name="lastName"
          component="input"
          type="text"
        />
        <button type="submit" disabled=submitting>Submit</button>
         submitSucceeded && <p>Sent!!!</p> 
      </form>
    )
  


const ApolloForm = compose(
  graphql(submitForm, name: 'submitForm',
  reduxForm(form: 'ApolloForm')
)(ApolloForm)