React-Query-Checkx

react-query-checks.tsx

/*
Check this: https://tkdodo.eu/blog/status-checks-in-react-query
Check this: https://github.com/ivan-kleshnin/react-query-status-checks
*/

// TWO PARALLEL QUERIES, RESULTS ARE RENDERED SEPARATELY
export function Controller() : JSX.Element {
  const query1 = useQuery("...first")
  const query2 = useQuery("...second")

  return <>
    {query1.error &&
      <Message error={query1.error}/>
    }
    {query2.error &&
      <Message error={query2.error}/>
    }
    
    {query1.isLoading
      ? <Loading/>
      : <Data1 data={query1.data}/>
     }
    
    {query2.isLoading
      ? <Loading/>
      : <Data2 data={query2.data}/>
    }
  </>
}

// 1. When error and data are both present – both are rendered.
// 2. Don't mistakenly check for `.isError`.
// 3. in Data1, Data2 you typically first check for data and for all the necessary data props.
//    The whole `data` can be undefined if Error occured. Data props might be undefined due to BE errors
//    or naturally.

// TWO PARALLEL QUERIES, RESULTS ARE RENDERED TOGETHER
export function Controller() : JSX.Element {
  const query1 = useQuery("...first")
  const query2 = useQuery("...second")

  return <>
    {query1.error &&
      <Message error={query1.error}/>
    }
    {query2.error &&
      <Message error={query2.error}/>
    }
    
    {(query1.isLoading || query2.isLoading)
      ? <Loading/>
      : <Data12 data1={query1.data} data2={query2.data}/>
    }   
  </>
}

// Assertions for a single query (unfinished)

// #### Case-1
// 1. Loading: should render Loading 
// 2. Error: should render Error     

// #### Case-2
// 1. Loading: should render Loading 
// 2. Success: should render Data    

// #### Case-3
// 1. Loading: should render Loading 
// 2. Success: should render Data    
// 3. Refocus
// 4. Error: should render Error + Data         
// 5. Success (2nd attempt): should render Data 

// #### Case-4
// 1. Idle: should render nothing -- when query is {enabled: false} and no initialData is provided
// 2. ...

// #### Case-5
// TODO initialData case(s)