React useQuery hook with useEffect hook

Question

How do I wait for a useQuery hook to finish when a useEffect hook is trigered?

I have a pretty complicated functional component and I am triggering a useEffect hook with its dependancies being from a grandparent functional component. The useQuery hook and the useEffect hook both work successfully. However, when the useEffect hook is triggered it does not wait for the query to complete before carrying out the function which is called by useEffect.

Failed Solutiuon #1: I tried using async and await but when you use return await you are "uwrapping" a promise only for the value to be "wrapped" again (since you are inside an async function), so it is redundant.

Faild Solution #2. I could use .then() but the function that needs to be called will be within the .then() and how would I call it from the useEffect.

const data = useQuery('lists', ...{promise is returned)..);
const functionToBeCalled = () => { //uses data }
useEffect(() => {
        if (grandparent prop) { functionToBeCalled()}
    }, [grandparent prop]);

Any support will be really appreciated.

gerrod · Accepted Answer · 2022-01-06 04:21:39Z

6

That code doesn't look quite right to me - useQuery doesn't return data directly, you have to destructure it. Without seeing the code as it's actually written, I think the answer you're chasing is that you need to add the data as a dependency to your effect:

const { data } = useQuery(/* ... */);

const functionThatUsesData = () => log('DATA:', data);

useEffect(() => {
    if (!(grandparentProp && data)) return;
    functionThatUsesData();
}, [grandparentProp, data]);

answered Jan 6, 2022 at 4:21

gerrod

6,7276 gold badges37 silver badges49 bronze badges

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

1 Comment

shalmypal Over a year ago

I tried that and it works. thanks :)

Collectives™ on Stack Overflow

React useQuery hook with useEffect hook

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related