Redux-Form with Apollo

Question

私はApolloで使用されているRedux-Formの例を見つけようとしていますが、何も見つかりません。私は既存のRedux-Formコンポーネントを持っています。私はGraphQLの突然変異を使用して送信するようにトリガーしたいと思います。どのように見えるだろうか？

Answer 1

まだ必要なのかどうかはわかりませんが、ここでは解決策の1つがあります。おそらく、最高のコンポーネントの構成ではないかもしれませんが、この単純な例は、あなたや他の人がredux-formとapolloで独自のフォームを作成するのに役立ちます。

最も単純なシナリオでは、すべてを1つのコンポーネントにまとめることができます。下にコードの一部があります：

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)