React Native 调用一次后重置useLazyQuery

ukqbszuj 于 2023-03-24 发布在 React

关注(0)|答案(1)|浏览(184)

我使用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?  <----------------------
    }
  })
/>

react-native

来源：https://stackoverflow.com/questions/64491441/reset-uselazyquery-after-called-once

1条答案

按热度按时间

7fyelxc51#

感谢@xadm指出解决方案：我必须在useLazyQuery选项中给予onCompleted和onError回调，并将变量传递给调用函数，而不是在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
    },
  })
}

赞(0）回复(0）举报 2023-03-24

我来回答

React Native 调用一次后重置useLazyQuery

1条答案

相关问题

热门标签

最新问答