getting error when I run useQuery inside the useEffect hook in react-query

Question

When I run the below code I am getting: Uncaught 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 reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks

  useEffect(() => {
    if (user.email) {
      const { data } = GetUserInfo(user.email);
    }
  }, [user.email]);

What I am trying to do is until I get the user email I will not run the getUserInfo query.

ivanatias · Accepted Answer · 2022-09-19 06:51:11Z

2

As mentioned in the other answer, you can only call hooks at the top level in the body of a functional component/custom hook.

I think you can achieve what you want using the enabled option in useQuery to enable/disable it based on a condition.

Docs example:

function Todos() {
  const [filter, setFilter] = React.useState('')

  const { data } = useQuery(
    ['todos', filter],
    () => fetchTodos(filter),
    {
      // ⬇️ disabled as long as the filter is empty
      enabled: !!filter
    }
  )
     ...
}

Reference:

https://tanstack.com/query/v4/docs/guides/disabling-queries

answered Sep 19, 2022 at 6:51

ivanatias

4,0713 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Faisal · Accepted Answer · 2022-09-19 05:52:59Z

1

You can't call a hook inside another hook.

  useEffect(() => {
    if (user.email) {
      const { data } = GetUserInfo(user.email);
    }
  }, [user.email]);

You have to call the hook outside useEffect hook

answered Sep 19, 2022 at 5:52

Mohammad Faisal

2,3771 gold badge13 silver badges18 bronze badges

Comments

Aurangzaib Rana · Accepted Answer · 2022-09-19 06:52:46Z

1

There are three common reasons you might be seeing it

You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.

In your case you are breaking the rule of hooks that Call Hooks from React function components. GetUserInfo is also hook you are calling in a hook you need to call it outside of useEffect()

for reference documentation

answered Sep 19, 2022 at 6:52

Aurangzaib Rana

4,2601 gold badge16 silver badges27 bronze badges

Comments

Kiszuriwalilibori · Accepted Answer · 2023-06-27 13:17:29Z

0

You simply call the hook conditionally, what is strictly forbidden.

answered Jun 27, 2023 at 13:17

Kiszuriwalilibori

3375 silver badges16 bronze badges

Collectives™ on Stack Overflow

getting error when I run useQuery inside the useEffect hook in react-query

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related