如何多次调用useLazyQuery并传入不同变量获取对应结果？

你遇到的问题核心是useLazyQuery返回的data是React状态变量，状态更新是异步的。在同一个async函数里，即使await了getMessage的Promise，组件此时还没完成重新渲染，data依然是当前渲染周期的旧值。两次请求完成后，data最终会被更新为最后一次请求的结果，导致两次打印的都是同一个值。

最直接的解决方式是直接使用getMessage函数返回的Promise结果——这个Promise会在本次查询完成后resolve，返回的对象里包含了本次查询的data，完全不受组件状态更新的异步性影响。

修改后的代码如下：

const [getMessage, { data, loading, subscribeToMore }]
    = useLazyQuery(CHATBOX_QUERY, {
            fetchPolicy: 'network-only'
    });
useEffect(() => {
        async function f() {
            // 直接获取本次查询的结果
            const firstResult = await getMessage({variables: { name1: "Bonny", name2: "Mary" }})
            console.log(firstResult.data)
            
            const secondResult = await getMessage({variables: { name1: "Bonny", name2: "John" }})
            console.log(secondResult.data)
        }
        f()
}, [])

如果后续需要在组件中持久化这两次查询的结果，建议将它们存储在独立的状态变量中，避免被后续查询覆盖：

const [getMessage, { loading, subscribeToMore }]
    = useLazyQuery(CHATBOX_QUERY, {
            fetchPolicy: 'network-only'
    });
// 用独立状态存储两次查询结果
const [chat1Data, setChat1Data] = useState(null)
const [chat2Data, setChat2Data] = useState(null)

useEffect(() => {
        async function f() {
            const firstResult = await getMessage({variables: { name1: "Bonny", name2: "Mary" }})
            setChat1Data(firstResult.data)
            
            const secondResult = await getMessage({variables: { name1: "Bonny", name2: "John" }})
            setChat2Data(secondResult.data)
        }
        f()
}, [])

内容的提问来源于stack exchange，提问作者Adi_Hsiao_0410