CODEWITHSUNDEEP
javascriptreactjstypescriptnext.jsapollo-client
lewisharris
lewisharris

Reputation: 165

Receiving TypeError when using custom hook for apollo mutation

I cannot seem to debug this problem with my Apollo mutation in my NextJS app.

I am getting the following error

"TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))"

It seems to be a problem with this line of code, for which I am receiving the error type "void"is not an array type.

const [onLogin, { loading }] = useLoginAdmin...

From what I can see, everything checks out, so I am unsure why it is throwing this error. What am I missing?

import { gql, useMutation, useQuery } from "@apollo/client";

const LOGIN_ADMIN_USER_MUTATION = gql`
  mutation loginAdminUser($input: LoginAdminUserInput!) {
    loginAdminUser(input: $input) {
      user {
        id
        companyID
        token
      }
    }
  }
`;

export const useLoginAdmin = (options = {}) => {
  useMutation(LOGIN_ADMIN_USER_MUTATION, options);
};

import { useAuth } from "../../hooks/utils";
import { useLoginAdmin } from "../../hooks/account";
import { AdminLogin } from "../../types/auth";


const [onLogin, { loading }] = useLoginAdmin({
    onCompleted: (data: { data: AdminLogin }) => {
      console.log(data);
    }
  });

  const handleSubmit = () => {
    onLogin({
      variables: {
        input: { email: "[email protected]", password: "password" }
      }
    });
  };

 <button
     type="submit"
     className="p-2 w-content bg-violet-600 text-white rounded-full"
      onClick={e => {
      e.preventDefault();
      handleSubmit();
      }}
   >
   Log in
 </button>

Upvotes: 0

Views: 46

Answers (1)

Michel Floyd
Michel Floyd

Reputation: 20226

Your custom hook isn't returning anything. TypeScript interprets that as void:

export const useLoginAdmin = (options = {}) => {
  useMutation(LOGIN_ADMIN_USER_MUTATION, options);
};

I'm not sure exactly what you intended to return from your hook based on how you're using it. Maybe you intended to just return the function itself? In that case omit the curly braces around the function.

export const useLoginAdmin = (options = {}) => 
  useMutation(LOGIN_ADMIN_USER_MUTATION, options);

Upvotes: 0

Related Questions