gpt4 book ai didi

react-native - 调用一次后重置 useLazyQuery

转载 作者:行者123 更新时间:2023-12-04 02:30:30 25 4
gpt4 key购买 nike

我正在使用 useLazyQuery单击按钮时触发查询。查询被调用一次后,结果(数据、错误等)会在每次渲染时传递给组件渲染。例如,当用户输入新的文本输入来更改导致错误的原因时,这是有问题的:错误消息不断重复出现。因此,我想“清除”查询(例如,当用户在 TextInput 中键入新数据时),以便查询结果返回到初始状态(所有内容 undefined )并且错误消息消失。
我在 Apollo 文档中找不到任何明确的方法来做到这一点,那我该怎么做呢?
(我虽然将查询放在父组件中,因此它不会在每次重新渲染时更新,但我宁愿不这样做)
这是我当前设置组件的方式:

import { useLazyQuery } from 'react-apollo'

// ...

const [inputValue, setInputValue] = useState('')

const [getUserIdFromToken, { called, loading, data, error }] = useLazyQuery(deliveryTokenQuery, {
variables: {
id: inputValue.toUpperCase(),
},
})

useEffect(() => {
if (data && data.deliveryToken) {
onSuccess({
userId: data.deliveryToken.vytal_user_id,
token: inputValue,
})
}
}, [data, inputValue, onSuccess])

// this is called on button tap
const submitToken = async () => {
Keyboard.dismiss()
getUserIdFromToken()
}

// later in the render...

<TextInput
onChangeText={(val) => {
setInputValue(val)
if (called) {
// clean/reset query here? <----------------------
}
})
/>

最佳答案

感谢@xadm 指出解决方案:我不得不给 onCompletedonError在 useLazyQuery 选项中回调,并将变量传递给调用函数,而不是在 useLazyQuery 选项中。最后,工作代码如下所示:


const [inputValue, setInputValue] = useState('')
const [codeError, setCodeError] = useState<string | undefined>()

const [getUserIdFromToken, { loading }] = useLazyQuery(deliveryTokenQuery, {
onCompleted: ({ deliveryToken }) => {
onSuccess({
userId: deliveryToken.vytal_user_id,
token: inputValue,
})
},
onError: (e) => {
if (e.graphQLErrors && e.graphQLErrors[0] === 'DELIVERY_TOKEN_NOT_FOUND') {
return setCodeError('DELIVERY_TOKEN_NOT_FOUND')
}
return setCodeError('UNKNOWN')
},
})

const submitToken = () => {
Keyboard.dismiss()
getUserIdFromToken({
variables: {
id: inputValue
},
})
}

关于react-native - 调用一次后重置 useLazyQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64491441/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com