How to handle undefined that passing to useQuery on first render in Typescript?

[qkreltms]

Imagine that you have two useQuery(useQuery A which is in Component A and B which is in Component B) on Page A.

const PageA = () => {
  const [selectedId, setSelectedId] = useState<undefined | number>(undefined)

  return (
  <ComponentA setSelectedId={setSelectedId} />
  <ComponentB selectedDataId={selectedId} />
  )
}
//...

const ComponentA = ({setSelectedId}: any) => {
  const { isLoading, data: A } = useQuery(["useQueryB"], api)

  // lists all data
  <Table data={A} selectOne={(id: number) => (e)=>setSelectedId(id) }/>
//...

const ComponentB = ({ selectedDataId }: {selectedDataId: number | undefined } ) => {
   // ERROR: selectedDataId is undefined
  const { isLoading, data: B } = useQuery(["useQueryB", selectedDataId], api)

  // lists selected data
  <Table data={B} />
//...

useQuery A fetches data(A) from server when onMount and lists it on table.
useQuery B fetches one data(B) by A.id when onMount and you click one of data of A

When you get to Page A then useQuery A fetches data, but also useQuery B does, but you did't click anything of A so undefined will be passed to useQuery B. In this case I tried simple solution:

{selectedDataId && <ComponentB selectedDataId={selectedDataId} />}

It's quite simple, but what if we want to handle undefined value inside of ComponentB?

I takes some time and finally figure it out, but ugly way:

const ComponentB = ({ selectedDataId }: { selectedDataId: number | undefined ) => {
  const { isLoading, data: B } = useQuery(["useQueryB", selectedDataId], api)

  // lists all data
  <Table data={B} />

export const api= (
  key: string,
  id: number | undefined,
) => {
  if (!id) {
     return Promise.reject()
  }
  return api
    .get(`/getSomething`, {
      id,
    })

It looks ugly for me. Because of

 if (!id) {
     return Promise.reject()
  }

Any ideas? 🤗

[qkreltms]

I found a way! the solution was enabled

import { useInfiniteQuery, useMutation } from 'react-query'
import { PagingResponse, ErrorResponse } from '../apis/util'
import {
  AnalysisListPatientQuery,
  getAnalysisListByPatientIdApi,
  AnalysisListPatientResponse,
  cancleAnalysisApi,
  retryAnalysisApi,
  deleteAnalysisApi,
} from '../apis/analysis'

export default (selectedPatientId?: number) =>
  useInfiniteQuery<
    PagingResponse<AnalysisListPatientResponse>,
    [string, Query],
    number | boolean | undefined,
    ErrorResponse
  >(['/analysis/list/patient', { patientId: selectedPatientId }], getApi, {
      enabled: !(selectedPatientId === undefined),   // When false is passed to enabled, it will not call query on first render
     ...
  })

export const getApi= (
  key: string,
  query: Query,
  page?: number | boolean,
) => {
  return api
    .post<PagingResponse<AnalysisListPatientResponse>>(`/analysis/list/`, {
      page: query.page ? query.page : page || 1,
      size: query.size || 9,
      patientId: query.patientId,
    })
    .then(({ data }) => data || [])
}

Hope this helps someone...

[qkreltms]

I think combining both would be good idea when some queries are required at the API

export default (id?: number) =>
  useInfiniteQuery(['/analysis/list', { id}], getApi, {
      enabled: !(selectedPatientId === undefined),   // When false is passed to enabled, it will not call query on first render
     ...

export const getApi= (
  key: string,
  id?: number
) => {
 if (!id) {
     return Promise.reject()
  }
  return api
    .post<PagingResponse<AnalysisListPatientResponse>>(`/analysis/list`, {
       id
    })
    .then(({ data }) => data || [])