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

score 2 · Accepted Answer · 2017-09-02 01:19:58Z

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

cris7 ianocris7 iano 111 bronze badge · Accepted Answer · 2021-02-19 02:01:44Z

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.

Sher SanginovSher Sanginov 4315 silver badges9 bronze badges · Accepted Answer · 2023-08-19 05:51:11Z

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

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

Apollo client: mutate is not a function