reactjs - 如何在 react-apollo-hooks 和 formik 中使用突变?
问题描述
在我的许多尝试中,我尝试将 react-apollo-hooks 和 formik 一起使用,但这似乎是不可能的。表单中的数据仅在<Formik>
标签中可用,否则无法在标签之外访问。我也不能同时调用我的useMutation
钩子并将参数传递给它:
const SignUp = () => {
const classes = useStyles();
// The react-apollo-hook for useMutation
// Its not hard to call this, but it seems impossible to call it,
// with any sort of arguments.
// It seems pointless not being able to pass in data from the form
const [createUser, { loading }] = useMutation(CREATE_USER_MUTATION, {
variables: {
firstName: '???',
lastName: '???',
email: '???',
password: '???',
},
});
// Formik stuff goes down here. It's impossible to call `useMutation`
// with the argument of `values`
return (
<Formik
initialValues={{
firstName: '',
lastName: '',
email: '',
password: '',
showPassword: false,
}}
// This is the part that calls the hook.
// I see no way of passing arguments to `useMutation` from here
onSubmit={(values, { setSubmitting }) => createUser}
render={({submitForm, isSubmitting, values, setFieldValue}) => (
<div>
<h1>Sign up for a new account</h1>
<Form className={classes.container}>
<Field
className={classes.textField}
name="firstName"
type="text"
label="First name"
margin="dense"
variant="outlined"
component={TextField}
/>
</Form>
<Button
variant="contained"
color="primary"
margin="dense"
className={classes.button}
disabled={isSubmitting}
onClick={submitForm}
>
Sign Up
</Button>
</div>
)}
/>
);
};
那么我怎么能以某种方式将参数传递给useMutation
顶部的部分,从onSubmit
?似乎不可能将参数传递给钩子。我认为我不能在查询名称CREATE_USER_MUTATION
和具有设置的对象之外添加任何其他数据。
解决方案
突变变量可以提供给单个突变调用而不是useMutation
调用。因此,您可以在组件的顶部执行此操作:
const [createUser, { loading }] = useMutation(CREATE_USER_MUTATION)
然后在您实际调用时提供变量createUser
:
onSubmit={(values, { setSubmitting }) => createUser({ variables: values })}
推荐阅读
- amazon-web-services - 使用 AWS 从 Spring Boot 微服务项目迁移到无服务器
- python-3.x - 列表理解 - 从不同列表中选择元素
- neo4j - 您如何找到具有恰好 N 个单一类型关系的所有节点?
- android - 尝试安装应用程序 android studio 时 gradle 缓存出错
- python - 替换多索引数据框中的特定值
- c# - 语言总是英文 asp.net core 3.1
- amazon-web-services - 为使用 AWS Fargate 运行的任务分配动态 IP
- amazon-web-services - 我想知道如何使用 aws cli 检查 DatabaseConnections。?
- javascript - 在 JavaScript 中调用类内部的方法
- javascript - 检查数字是否为回文的Javascript函数