1

我有一个使用“脚本设置”的 Vite + Typescript + Vue 3 SPA。该应用程序使用 Urql 来查询 GrapgQL 端点。

我有一种情况，查询工作并仅在带有组件的组件被热加载后才显示行。

事件顺序：

  1. 在我的浏览器中使用 http://localhost:4000 加载应用程序。页面加载正常，但查询中的数据是“未定义的”。加载指示器暂时显示，但 result.data.value 未定义
  2. 重新加载页面 - 没有变化，加载指示器暂时显示，但 result.data.value 未定义
  3. 在 VS Code 中保存组件 (Ctrl + s) - 结果与 1 和 2 相同。
  4. 对组件代码做一个无关紧要的小改动，然后保存。（我换个评论）组件是根据控制台热加载的，加载指示器没有显示，但这次 result.data.value 有预期的两个元素，页面显示它们。
  5. 重新加载页面 - 再次加载页面，但查询结果未定义。

代码可见github：这里

/src/components/TodoPrivateList.vue 是返回数据的地方（第 29 行）。在第 71 行，它使用子组件 TodoItem.vue 来渲染每个 Todo。

我现在可以看到，使用 Vue DevTools 始终会检索数据，但不会渲染 Todos。只有当我强制对 TodoPrivateList.vue 进行热加载（通过更新其评论之一）时，才会呈现 Todos。

所以我现在同意@wittgenstein 的观点，这似乎是一个反应性问题。但我还不确定该怎么做。

提前致谢

4

1 回答 1

0

问题与 Vite 无关。

问题是由于未等待来自 graphql 查询的响应而引起的。

在父组件中实现了“Suspense”选项。（Vue 3 实验选项）并在查询中添加了“等待”。代码推送到 GitHub。

于 2021-12-14T14:14:32.280 回答