钩子和网络工作者答案

【问题标题】：Hooks and webworkers钩子和网络工作者
【发布时间】：2021-11-09 23:13:56
【问题描述】：

有没有办法让 webworker 使用 react hook？

我正在使用 Apollo Client 来执行 useLazyQuery 这是一个自定义钩子。

但实际操作需要相当长的时间并且经常超时！

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

【问题讨论】：

欢迎使用 StackOverflow。在问你的问题之前，请做一些研究和尝试。所以你可以在这里发布你已经尝试过的代码。这将使我们能够了解您的项目，然后了解您的需求。

标签： javascript reactjs apollo-client

【解决方案1】：

虽然我不确定是否可以通过在 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;

【讨论】：