Я выбрал другой подход, используя как formik , так и apollo mutation .Вместо того, чтобы использовать другой тег мутации (так надоело их, кстати! Чтобы ваш код выглядел грязным так быстро), я использовал this.props.mutate () в функции.
Ваша мутацияможно найти в подпорках, когда вы экспортируете свой компонент с этой мутацией под влиянием graphql.Вы увидите это чуть позже.
Вот так выглядит моя форма внутри главной функции render () моего компонента
< Formik
initialValues = {
{
title: '',
}
}
onSubmit = {
this.submitMutation // my own function
}
render = {
this.renderForm // my own function that just returns views and texts tags
}
validationSchema = {
Yup.object().shape({
title: Yup
.string()
.required('title is required'),
})
} >
<
/Formik>
Ниже представлена моя мутационная функция submit, вызываемая formik
submitMutation = () => {
return this.props.mutate({
variables: {
title: this.state.title,
},
})
}
И в конце сделайте это
export default graphql(addBillMutation)(CreateBill);
Код OverAll .., пожалуйста, отрегулируйте его под свой костюм
import React from 'react';
import {
StyleSheet, Text, Image, View, TextInput, Picker, TouchableOpacity, ScrollView, KeyboardAvoidingView
} from 'react-native';
import Header from './header';
import { graphql } from 'react-apollo';
//import mutation query from queries
import { getBillsQuery, addBillMutation } from './queries/queries';
import { Formik } from 'formik';
import * as Yup from 'yup';
class CreateBill extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
title: "",
loading: false,
}
this.submitMutation = this.submitMutation.bind(this);
}
submitMutation = () => {
return this.props.mutate({
variables: {
title: this.state.title,
}
})
}
_handleSubmit = async (values: any) => {
//setting values here, when form is already validated by yup in formika
this.setState({
title: values.title,
});
try {
//set loading to true before sending request
this.setState({ loading: true });
await this.submitMutation()
.then(({ data }) => {
//response handling
}).catch((error) => {
this.setState({ loading: false });
//error handling
});
} catch (error) {
//handle error
}
}
renderForm = (formikProps: any) => {
const {
values, handleSubmit, handleBlur, handleChange, errors,
touched, isValid, isSubmitting
} = formikProps;
return (
<ScrollView>
<View>
<TextInput
style={styles.input}
value={values.title}
placeholder="title goes here"
onChangeText={handleChange('title')}
onBlur={handleBlur('title')}
/>
</View>
{(touched.title && errors.title) ? touched.title && errors.title : "Required"}
</Text>
</View>
</View>
</ScrollView>
);
}
render() {
return (
<View>
<Header />
<View>
<Formik
initialValues={{ title: ''}}
onSubmit={this._handleSubmit}
render={this.renderForm}
validationSchema={Yup.object().shape({
title: Yup
.string()
.required('title is required'),
})}
>
</Formik>
</View>
</View>
);
}
}
export default graphql(addBillMutation)(CreateBill);