sayana Posts

sayana

•Created by sayana on 12/17/2023 in #❓-help

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() for the ID, setting useQuery's enabled to false, and 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() always returns undefined, 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 onSuccess 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.

5 replies