Skip to main content

Short Polling

Overview​

  • What: keep fetching data until some conditions are met
  • Where: transaction details page
  • How: short polling using refetchInterval
    • if status is not final (success, cancelled) --> refetch in X miliseconds
    • otherwise --> stop refetching

Implementation​

  • BE API: tnx list
  • New API file: transaction details
  • New hook: useTnxDetails() --> useQuery()
    • Fetch every 3s until status is final (success, cancelled)
  • New page: TnxDetailsPage - Display transaction data
    • Get tnxId from url params
    • Use new hook to get data and render on UI
GPT - useTnxDetails()

change code to integrate with tnxApi.getDetails receive a new params tnxId as the first position enabled only if tnxId is truthy refetchInterval - keep fetching until status is completed or cancelled or failed

GPT - TnxDetailsPage

setup a new component to get tnxId from search url params use tnxId to call useTnxDetails() and render data to UI

Easy Frontend - Code xịn hơn mỗi ngày