# Uncaught Error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reason

**URL:** <https://forum.codewithmosh.com/t/uncaught-error-error-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component-this-could-happen-for-one-of-the-following-reason/20955>\
**Category:** React\
**Created:** [June 20, 2023, 10:53pm UTC](https://forum.codewithmosh.com/t/uncaught-error-error-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component-this-could-happen-for-one-of-the-following-reason/20955 "2023-06-20T22:53:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbenaventet](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@mbenaventet](https://forum.codewithmosh.com/u/mbenaventet)\
**Post date:** [June 20, 2023, 10:53pm UTC](https://forum.codewithmosh.com/t/uncaught-error-error-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component-this-could-happen-for-one-of-the-following-reason/20955/1 "2023-06-20T22:53:41Z")

</div>

Im trying to use the useQuery and I get highlighted the queryKey with the following error message:

```auto
No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: void; }' is not assignable to parameter of type 'QueryKey'.
      Object literal may only specify known properties, and 'queryKey' does not exist in type 'readonly unknown[]'.ts(2769)
useQuery.d.ts(16, 25): The last overload is declared here.

```

Im using the following:

```auto
    "@chakra-ui/react": "^2.6.1",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@tanstack/react-query": "4.28",
    "@tanstack/react-query-devtools": "4.28",
    "axios": "^1.4.0",
    "framer-motion": "^10.12.16",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"

```

This is my code trying to create a login Hook using React Query

```auto
import { useQuery } from '@tanstack/react-query';
import APIClient from '../services/api-client2';

interface AuthResponse {
  token: string;
  userId: string;
}

interface AuthError {
  message: string;
}

const useAuth = (email: string, password: string) => {
    const apiClient = new APIClient<AuthResponse,{email: string, password: string}>('/api/auth/login');
  
    const loginQuery = useQuery<AuthResponse, AuthError>({
        queryKey: ['auth', email, password],
        queryFn: apiClient.post({ email, password })
    }); 
  
    return {
      loginQuery,
    };
  };

export default useAuth;

```

Any help will be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![cmerli](https://avatars.discourse-cdn.com/v4/letter/c/c4cdca/32.png) [@cmerli](https://forum.codewithmosh.com/u/cmerli)\
**Post date:** [March 29, 2024, 10:41pm UTC](https://forum.codewithmosh.com/t/uncaught-error-error-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component-this-could-happen-for-one-of-the-following-reason/20955/2 "2024-03-29T22:41:17Z")

</div>

Did you find a solution? i have the same problem now.