api icon indicating copy to clipboard operation
api copied to clipboard

useStream refactoring

Open peersky opened this issue 4 years ago • 1 comments

Right now useStream hook contains inside various logic components:

  • Paging for loading big data by chunks
  • StreamBoundary logic that sets time frames
  • Setting search query for stream request

All these three logic blocks are quite and it might have sense to make them generic in separate files.

Possible issues to work on:

  • [ ] StreamBoundary - is not working perfectly right now. @Andrei-Dolgolev reported: there is overlapping in boundaries, it laggs behind server by about 3 minutes, Load newer event moves cursor but does not update data correctly,
  • [ ] Search query is not fully supported and we don't store search query keys.
  • [ ] Paging is done by using context provider to store data received from the backend. Due to this we lose all features that react query cache would give.
    • We can't set data stale time
    • We can't preserve cache when component mount/dismount
    • We WILL do refetch when stream page is loaded again and this increases load on database/backend side

To solve it we should use react query instead.

Beside that there are code style that has to be fixed:

if (!ignoreStart) {
      if (
        !newBoundary.start_time ||
        (extensionBoundary.start_time &&
          extensionBoundary.start_time <= newBoundary.start_time)
      ) {
        newBoundary.start_time = extensionBoundary.start_time;
        newBoundary.include_start =
          newBoundary.include_start || extensionBoundary.include_start;
      }
      newBoundary.include_start =
        newBoundary.include_start || extensionBoundary.include_start;
    }

This code has lint warning: Property 'start_time' does not exist on type '{}'.ts(2339)

This can potentially crash frontend if later code changes and function is called before start_time is defined in object.

Possible solution: Define object fields in constructor

  1. In react-query v3 better practice is to define query object as one const.
 const streamCache = useQuery(...)
return {streamCache}
// component.js
const { streamCache } = useStream()
if(streamCache.isLoading) ....

peersky avatar Sep 16 '21 14:09 peersky

Okay finally: The problem of stream_boundary is that stream_boundary is not depend on data wich it requested.

Andrei-Dolgolev avatar Sep 16 '21 15:09 Andrei-Dolgolev