I have a unique setup consisting of Vite, Typescript, and Vue 3 SPA utilizing "script setup". This app is equipped with Urql to query data from a GraphQL endpoint.
An interesting occurrence happens where the query results are only displayed after the component has been hotloaded.
Here's how events unfold:
- Upon loading the app at http://localhost:4000, everything seems fine except that the data from the query returns as 'undefined'. The Loading indicator briefly appears, but result.data.value remains undefined.
- Reloading the page doesn't make any difference - the Loading indicator flashes momentarily, yet result.data.value stays undefined.
- Saving the component (Ctrl + s) in VS Code yields the same outcome as steps 1 and 2.
- When making a minor change like modifying a comment within the component code and saving it, the component undergoes hotloading as indicated by the console. Surprisingly, the Loading indicator disappears, and this time, result.data.value contains the expected two elements which are then displayed on the page.
- Another reload of the page brings us back to square one - the page loads but the query results remain undefined.
You can take a look at the code on GitHub: here
/src/components/TodoPrivateList.vue is where the data is fetched (line 29). At line 71, it utilizes a child component TodoItem.vue to render each Todo item.
Through Vue DevTools observation, I notice that the data is consistently retrieved, yet the Todos fail to render. Only triggering a hot reload of TodoPrivateList.vue (by updating a comment, for instance) results in properly rendering the Todos.
It seems to align with @wittgenstein's suggestion that this could be a Reactivity issue, although the solution remains uncertain at this point.
I appreciate any assistance you can offer on this matter.