React useQuery hook running all the time inside the component

Question

I have a problem where useQuery is always running in my application and I don't why

In my component

import { GET_DATA } from 'apiCalls';
const {  loading, error, data } = useQuery('getData', GET_DATA(token));

In my api call

export const GET_DATA = async (token) => {
try {
    const res = await axios.get(`${process.env.REACT_APP_SERVER}/api/...`, {
        headers: {'auth-token': token},
    });
    console.log(res);
    return res.data;
} catch (err) {
    console.log('Error getting data');
    return err;
}

}

when I debug my app. The function GET_DATA is always running ALL the time. what is the issue here ?

I think in some point in your app you are using useEffect and inside the useEffect you are doing something that makes the component to rerender. if you provide more information on the component that you are using GET_DATA in it, I can tell you where is the problem. — Ako
– Ako, Commented Aug 6, 2021 at 18:38
I checked my component and the problem is useQuery 100% since when I comment it the component stop always rerendering @Ako — SDB_1998
– SDB_1998, Commented Aug 6, 2021 at 18:51
you must not call the function inside useQuery. I write the answer how to use it. — Ako
– Ako, Commented Aug 6, 2021 at 19:20

Ako · Accepted Answer · 2021-08-07 07:46:20Z

3

You must provide the useQuery only the function it wants to run, you must not call it inside useQuery. Provide the token to GET_DATA this way:

EDIT

As @tkdodo said we don't need to use the async function.

const {  loading, error, data } = useQuery('getData', ()=>{
   return GET_DATA(token);
});

The first solution I provided was this:

const {  loading, error, data } = useQuery('getData', async()=>{
   const data = await GET_DATA(token);
   return data;
});

edited Aug 7, 2021 at 7:46

answered Aug 6, 2021 at 19:01

Ako

1,6111 gold badge13 silver badges19 bronze badges

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

2 Comments

TkDodo Over a year ago

This syntax is unnecessary convoluted as opposed to just () => GET_DATA(token)

Ako Over a year ago

@TkDodo Yes, you are right, we don't need to use async function.

TkDodo · Accepted Answer · 2021-08-07 06:38:10Z

1

The root cause is the same as in React-Query, useQuery returns undefined only after loading is complete

The queryFn needs to be a function that returns a promise. GET_DATA does that. But by doing

GET_DATA(token) you directly invoke the function. So you’ll likely want:

() => GET_DATA(token) instead.

answered Aug 7, 2021 at 6:38

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Comments

Ben Carp · Accepted Answer · 2021-08-07 18:53:03Z

0

Try the following:

// apiCalls.js
export const getData = async (token) => {
  try {
    const res = await axios.get(`${process.env.REACT_APP_SERVER}/api/...`, {
        headers: {'auth-token': token},
    });
    return res.data;
  } catch (err) {
    console.log('Error getting data');
    return err;
}

// Component.js
import { getData } from 'apiCalls';

function Component(){
  const {  loading, error, data } = useQuery(
    'getData', 
    ()=>GET_DATA(token)
  );

  return (
    <div>...</div>
  )
}

useQuery should run in the component and the second parameter should not be a promise, but a function that returns a promise.

answered Aug 7, 2021 at 18:53

Ben Carp

26.9k11 gold badges69 silver badges83 bronze badges

Collectives™ on Stack Overflow

React useQuery hook running all the time inside the component

3 Answers 3

EDIT

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

EDIT

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related