使用Apollo的Redux-Form

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)