reactjs - 等待 fetchQuery - 反应悬念

Question

我有一个组件，它通过<Suspense />. 当这个组件挂载时，fetchQuery会通过useEffect钩子触发请求，如下所示：

const VisualComponent = () => {
  ...
  const [foo, setFoo] = useState(null);
  useEffect(() => {
    const fetchFoo = async () => {
      await getFoo().then((someBoolean) => {
        if (someBoolean && someOtherCondition) {
          setFoo(true);
        }
      });
    }
    fetchFoo();
  });
  
  return(<Suspense fallback={SomeLoader} />...</Suspense>)
};

并getFoo()调用fetchQuery：

const getFoo = async () => {
  let result;  
  await fetchQuery(...)
   .then((data) => {
     result = data;
   });
   return result;
};

出于某种原因，Suspense 仅在getFoo被触发时显示加载器，fetchFoo并停止显示加载器而不等待fetchFoo完成。

如何让 Suspense 等待fetchFoo完成？