Get undefined when the refetch function has successfully worked

SStiffJobs5/7/2023
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",
Nnlucas5/7/2023
Can you share a more complete snippet of your code?
Nnlucas5/7/2023
Looks like you might be trying to consume the data in useQuery using stale variables from the component scope
Solution
SStiffJobs5/7/2023
I think the proper way of doing my expectation is to use useMutation
SStiffJobs5/7/2023
I've done it properly
SStiffJobs5/7/2023
Thanks for your response!
SStiffJobs5/7/2023
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
Nnlucas5/7/2023
Yep mutation might be a good way