react-nativegraphqlgraphql-jsapolloapollo-client

Apollo client: mutate is not a function


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);

Solution

  • 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 }) => {