Apollo client: mutate is not a function

Question

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

Answer 1

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

Answer 2

This was issue on my side too. I got the solution because the i made the createApolloClient as async function, it shouldnot be async function. Then works fine!

   async function createApolloClient(...)

This cause error.

   function createApolloClient(...)

No error...Weird but it solved it.

Answer 3

I ran into this error because i used https instead of http when initializing Apollo:

const client = new ApolloClient({
    uri: "http://localhost.com:3000/api/graphql",
    cache: new InMemoryCache(),
});