I am calling this component from a parent component that is passing props thru the argument fields. However When I try to call the mutation function I keep getting the error: mutate is not a function. I dont understand what is causing this issue as I followed the apollo documentation online almost exactly.
const OnboardingComplete = (props, { mutate }) => {
const currentUser = {
id: props.id,
firstName: props.first_name,
lastName: props.last_name
}
return (
<View style={styles.subcontainer}>
<Button bordered rounded iconLeft
style={styles.importButton}
onPress={() =>
mutate({ variables: { user: currentUser } })
}>
<Text style={styles.buttonText}>Complete </Text>
<Icon name='arrow-forward' />
</Button>
</View>
);
}
const addUser = gql`
mutation addUser($user: UserInput!) {
addUser(input: $user)
}
`;
export default graphql(addUser)(OnboardingComplete);
When you wrap a component with the graphql
HOC, it receives either a data
prop (if your operation is a query) or a mutate
prop (if your operation is a mutation).
Your code indicates you expect a second object, other than props, to be passed to your component as an argument:
const OnboardingComplete = (props, { mutate }) => {
Instead, your expression should look like this:
const OnboardingComplete = (props) => {
And you should access mutate
by calling props.mutate
. If you wanted to use object destructuring, you could also always do:
const OnboardingComplete = ({ first_name, last_name, id, mutate }) => {