WebWorker能否使用React Hook？Apollo Client的useLazyQuery如何在子线程运行

Web Worker是否可以使用React Hook？ #

不可以。
React Hook 依赖 React 组件的渲染上下文、fiber 调度体系，只能在 React 函数组件、自定义 Hook 的顶层作用域调用。而 Web Worker 是独立于浏览器主线程的运行环境，不存在 React 组件上下文，也没有对应的渲染调度逻辑，因此无法运行任何 React Hook，包括 Apollo Client 提供的 useLazyQuery。

耗时Apollo查询挪到Worker的可行方案 #

你要实现的「把长耗时查询放到独立线程、不阻塞主线程交互」的需求可以通过以下方式实现：

方案：Worker内直接调用Apollo Client原生查询方法 #

useLazyQuery只是Apollo Client对原生查询能力的React封装，你可以直接在Worker中调用无依赖的原生查询方法，步骤如下：

• 在Worker文件中初始化独立的Apollo Client实例，注意不要使用依赖DOM/主线程API的配置（比如需要依赖localStorage的持久化缓存要替换为内存缓存）
• 不使用Hook，直接调用client.query()方法发起查询请求
• 通过postMessage实现主线程和Worker的通信：主线程发送查询参数给Worker，Worker执行完成后把查询结果/错误信息回传给主线程，主线程接收后更新组件状态即可

代码示例

Worker侧代码（query.worker.js）：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
// 初始化Apollo Client
const client = new ApolloClient({
  link: createHttpLink({ uri: '/你的graphql接口地址' }),
  cache: new InMemoryCache()
})

// 监听主线程消息
self.onmessage = async (e) => {
  const { query, variables, queryId } = e.data
  try {
    const result = await client.query({ query, variables })
    self.postMessage({ type: 'success', queryId, data: result.data })
  } catch (err) {
    self.postMessage({ type: 'error', queryId, error: err.message })
  }
}

主线程React组件侧代码：

import { useEffect, useRef, useState } from 'react'

function MyComponent() {
  const workerRef = useRef(null)
  const [queryResult, setQueryResult] = useState(null)
  const [loading, setLoading] = useState(false)

  // 初始化Worker
  useEffect(() => {
    workerRef.current = new Worker(new URL('./query.worker.js', import.meta.url))
    workerRef.current.onmessage = (e) => {
      setLoading(false)
      if (e.data.type === 'success') setQueryResult(e.data.data)
      else console.error('查询错误:', e.data.error)
    }
    return () => workerRef.current.terminate()
  }, [])

  // 暴露和useLazyQuery一致的触发方法
  const triggerQuery = (variables) => {
    setLoading(true)
    workerRef.current.postMessage({
      query: YOUR_GRAPHQL_QUERY,
      variables,
      queryId: Date.now()
    })
  }

  return <div>
    <button onClick={() => triggerQuery({ id: 1 })}>发起查询</button>
    {loading && <p>查询中...</p>}
    {queryResult && <pre>{JSON.stringify(queryResult, null, 2)}</pre>}
  </div>
}

注意事项 #

• 跨线程无法直接共享Apollo Client缓存，如果需要主线程和Worker的缓存一致，需要自行实现缓存序列化后的同步逻辑，或者接受两个实例缓存独立的运行模式
• 将查询挪到Worker只能解决查询逻辑阻塞主线程渲染、交互的问题，不会解决接口本身的超时问题，如果是接口响应过慢导致的超时，需要调整Apollo Client的fetchOptions超时阈值，或者优化后端接口响应速度

内容的提问来源于stack exchange，提问作者Cory .D