StiffJobs•15mo ago

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;
 }

 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",

Solution:

I think the proper way of doing my expectation is to use useMutation

Jump to solution

5 Replies

Nick•15mo ago

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

Solution

StiffJobs•15mo ago

I think the proper way of doing my expectation is to use useMutation

StiffJobs•15mo ago

I've done it properly Thanks for your response!

StiffJobs•15mo ago

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

Nick•15mo ago

Yep mutation might be a good way