useQuery first refetch returns undefined

Hello.
So, I'm trying to get an item by ID when the user clicks a button. I've searched around and found a way to do it by using useState()useState() for the ID, setting useQueryuseQuery's enabledenabled to falsefalse, and refetch()refetch() whenever I need to get the item.

const [itemId, setItemId] = useState("");
const getItemById = api.items.getById.useQuery(
  { id: itemId },
  { enabled: false },
);

const getItemById = (id: string) => {
  setItemId(id);
  getItemById
    .refetch()
    .then((result) => {
      if (result.data) {
        console.log(result.data);
      }
    })
    .catch((err) => {
      // empty
    });
};

const [itemId, setItemId] = useState("");
const getItemById = api.items.getById.useQuery(
  { id: itemId },
  { enabled: false },
);

const getItemById = (id: string) => {
  setItemId(id);
  getItemById
    .refetch()
    .then((result) => {
      if (result.data) {
        console.log(result.data);
      }
    })
    .catch((err) => {
      // empty
    });
};

The problem is, the first refetch()refetch() always returns undefinedundefined, so the user has to click the button twice to get the item.
I've looked around and the problem seems to be about re-rendering . There's a possible answer, but it uses onSuccessonSuccess which will be deprecated soon.
https://stackoverflow.com/questions/75447288/reactquery-returns-undefined-as-the-first-result-then-returns-the-data
Is there a solution to this? Or perhaps a better way to get an item with ID as input on demand?
I'm using Node 18.

Stack Overflow

reactQuery returns undefined as the first result, then returns the ...

So, I'm trying to fetch data -onClick- using reactQuery and to store the response in a variable.
const { data: response, refetch } = useQuery({
queryKey: ['get-response'],
queryFn: async() ...

Solution

If you want to use the value imperatively you might want to use the vanilla client (via useUtils().client) or a mutation instead

Jump to solution

useQuery first refetch returns undefined

const [itemId, setItemId] = useState("");
const getItemById = api.items.getById.useQuery(
  { id: itemId },
  { enabled: false },
);

const getItemById = (id: string) => {
  setItemId(id);
  getItemById
    .refetch()
    .then((result) => {
      if (result.data) {
        console.log(result.data);
      }
    })
    .catch((err) => {
      // empty
    });
};

const [itemId, setItemId] = useState("");
const getItemById = api.items.getById.useQuery(
  { id: itemId },
  { enabled: false },
);

const getItemById = (id: string) => {
  setItemId(id);
  getItemById
    .refetch()
    .then((result) => {
      if (result.data) {
        console.log(result.data);
      }
    })
    .catch((err) => {
      // empty
    });
};

Stack Overflow

reactQuery returns undefined as the first result, then returns the ...

So, I'm trying to fetch data -onClick- using reactQuery and to store the response in a variable.
const { data: response, refetch } = useQuery({
queryKey: ['get-response'],
queryFn: async() ...

Solution

If you want to use the value imperatively you might want to use the vanilla client (via useUtils().client) or a mutation instead

Jump to solution

useQuery first refetch returns undefined

useQuery first refetch returns undefined

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads