Redux-Form 与 A​​pollo

Question

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

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