2017-11-02 9 views
1

아폴로와 함께 사용되는 Redux-Form의 예제를 찾으려고하고 있는데 아무 것도 찾을 수 없습니다. 기존 Redux-Form 구성 요소를 가지고 있으며 GraphQL 변이를 사용하여 제출하도록 트리거하고 싶습니다. 어떻게 보이 겠어?Redux-Form with Apollo

답변

0

여전히 필요한 경우 확실하지 않지만 가능한 해결책 중 하나입니다. 어쩌면 가장 좋은 구성 요소 구성은 아니지만이 간단한 예제는 귀하 또는 다른 사람들이 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)