我想用带有graphq的swipeableForm创建数据,我尝试了用formik制作表单,在下面我制作了处理提交可滑动表格的功能
const [execCreateThematic] = useMutation(CREATE_THEMATIC)
const form = useFormik({
initialValues: {
name: "",
},
validationSchema: Yup.object({
name: Yup.string().trim(),
}),
onSubmit: async (values) => {
return await onSubmit(values, { spaceId })
},
})
const formFields = [
{
label: "Name",
input: (
<TextInput
name="name"
onChangeText={form.handleChange("name")}
onBlur={form.handleBlur("name")}
value={form.values.name}
mode="outlined"
underlineColor="transparent"
placeholder={"Type your thematic"}
multiline
numberOfLines={3}
style={{
backgroundColor: theme.colors.surface,
fontSize: 14,
maxHeight: 94,
}}
/>
),
disabled: !form.values.name || form.errors.name,
error: form.touched.name && form.errors.name,
},
]
const onSubmit = async (values, input) => {
try {
const { data } = await execCreateThematic({
variables: {
values,
spaceId,
},
refetchQueries: [
{
query: getThematics,
variables: {
where: {
spaceId: spaceId,
},
},
},
],
})
console.log(data)
const gThematic = data?.createThematic ?? []
form.resetForm()
if (!input?.type) {
setTimeout(() => {
navigation.navigate("SelectThematic", { ...gThematic, spaceId })
}, 300)
}
} catch (error) {
console.log(error)
}
}
这是表单的组成部分
<SwipeableForm
isVisible={isModal}
formFields={formFields}
buttonText={"Create Thematic"}
loading={form.isSubmitting}
title={"Create Thematic"}
toggleVisible={() => togglePanel("SelectThematic", false)}
fullWidth
closeOnTouchOutside
onSubmit={form.handleSubmit}
barStyle={{ backgroundColor: "transparent" }}
/>
当我尝试在表单中插入数据并提交时,会发生如下错误:GraphQL错误:无法为不可为空的字段Thematic.name返回null。