作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的许多尝试中,我尝试将 react-apollo-hooks 和 formik 一起使用,但这似乎是不可能的。表格中的数据仅在 <Formik>
中可用。标签,并且在它之外无法访问。我也不能调用我的useMutation
同时 Hook 并传递参数给它:
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
?似乎不可能将参数传递给钩子(Hook)。我认为我不能在查询名称之外添加任何其他数据
CREATE_USER_MUTATION
以及具有设置的对象。
最佳答案
突变变量可以提供给单个突变调用,而不是 useMutation
称呼。因此,您可以在组件的顶部执行此操作:
const [createUser, { loading }] = useMutation(CREATE_USER_MUTATION)
createUser
后提供变量:
onSubmit={(values, { setSubmitting }) => createUser({ variables: values })}
关于reactjs - 如何在 react-apollo-hooks 和 formik 中使用突变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57109680/
我是一名优秀的程序员,十分优秀!