时间戳

首页 > 解决方案 > 钩子和网络工作者

javascript - 钩子和网络工作者

问题描述

网络工作者有没有办法使用反应钩子？

我正在使用 Apollo Client 执行自定义钩子 useLazyQuery。

但是实际操作需要很长时间并且经常超时！

我想在另一个线程上运行它，以免破坏主应用程序。

标签： javascriptreactjsapollo-client

解决方案

尽管我不确定是否可以通过在 webworker 中执行查询来解决您的超时问题，但实现该问题的最简单方法（不考虑挂起/错误状态）将是这样的：

worker.js

self.addEventListener('message', async event => {
  const {apolloClient, query} = e.data;
  const result = await apolloClient.query({query});  
  self.postMessage(result);
  self.close();
});

App.jsx

const query = gql`Some query here`;

const useWebWorkerQuery = query => {
  const apolloClient = useApolloClient();
  const [result, setResult] = useState(null);

  useEffect(() => {
    const worker = new Worker('worker.js');
    worker.postMessage({apolloClient, query});
    worker.onmessage = event => setResult(event.data);
  }, []);
};

const App = () => {
  const result = useWebWorkerQuery(query);

  useEffect(() => {
    if(result) {
      // Do something once query completes
    }
  }, [result]);

  return null;
};

export default App;

推荐阅读