Menu
In my many attempts, I've tried to use react-apollo-hooks and formik together but it seems impossible. The data from the forms is only available in the <Formik> tag, and is otherwise inaccessible outside of it. Also I can't call my useMutation hook and pass arguments to it at the same time:
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>
)}
/>
);
};
So how would I somehow be able to pass arguments to the useMutation part at the top, from onSubmit? It seems impossible to pass arguments to the hook. I don't think I can add any other data outside of the query name CREATE_USER_MUTATION and the objects which has the settings.
411
Update mutations take filter as an input to select specific objects. You can specify set and remove operations on fields belonging to the filtered objects. It returns the state of the objects after updating. Note Executing an empty remove {} or an empty set{} doesn't have any effect on the update mutation.
The GraphQL Apollo (with ReactJS and MongoDB) Mutation queries modify data in the data store and returns a value. It can be used to insert, update, or delete data. Mutations are defined as a part of the schema.
The official React library comes with its own default Hooks such as useState, useContext, useEffect and others. But, The React library does not, however, contain Hooks for executing GraphQL queries and mutations in the Apollo client. Let's take a look at these now.
The useMutation React hook is the primary API for executing mutations in an Apollo application. To run a mutation, you first call useMutation within a React component and pass it a GraphQL string that represents the mutation. When your component renders, useMutation returns a tuple that includes: Let's look at an example.
But, The React library does not, however, contain Hooks for executing GraphQL queries and mutations in the Apollo client. Let's take a look at these now.
Formik is a small group of React components and hooks for building forms in React and React Native. It helps with the three most annoying parts: Getting values in and out of form state Validation and error messages
Mutation variables can be provided to the individual mutation call instead of the useMutation call. So you can do this at the top of your component:
const [createUser, { loading }] = useMutation(CREATE_USER_MUTATION)
and then provide the variables once you actually call createUser:
onSubmit={(values, { setSubmitting }) => createUser({ variables: values })}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
