Get undefined when the refetch function has successfully worked

In my use case, I first disabled the useQuery function because I want it only fetch when I want to. And by triggering the refetch, I can see in the browser console showing that my request succeeded by when I want to use the returned data which destructured from the useQuery , it shows undefined. I don't know why this happened.

 await refetchDocument();
 if (fetchDocumentError) throw fetchDocumentError;
 console.log("existingDocument");
 if (existingDocument?.checksum === checksum) return;

 if (existingDocument !== undefined || existingDocument !== null) {
     await deleteSections({ documentId: existingDocument!.id });
     if (deleteSectionsError) throw deleteSectionsError;
 }

I'm using pnpm :
"@trpc/client": "^10.18.0",
"@trpc/next": "^10.18.0",
"@trpc/react-query": "^10.18.0",
"@trpc/server": "^10.18.0",

Can you share a more complete snippet of your code?

Looks like you might be trying to consume the data in useQuery using stale variables from the component scope

I've done it properly

Thanks for your response!

I was trying to fetch the data when my function need it and use it afterward, the problem of using useQuery is that it doesn't change the data value immediately

Yep mutation might be a good way