T
TanStack•2y ago
flat-fuchsia

StrictNullCheck and dependant queries

Hi, me again ! I am working with typescript strict mode, and I am not sure what would be an elegant solution to handle dependant queries. I have typesafe abstracted queries that require data to be set: - useGetDetails - useGetBillingInfoById requires pathParams.location_group_id to be a string Here is an example: 
export const App = () => {
  const detailsQuery = billingService.account.useGetDetails()
  const infoQuery = billingService.locationGroup.useGetBillingInfoById(
    {
      pathParams: {
        location_group_id: detailsQuery.data?.default_location_group_id // Type string | null | undefined  is not assignable to type string.
      }
    },
    { enabled: Boolean(detailsQuery.data?.default_location_group_id) }
  )
}
export const App = () => {
  const detailsQuery = billingService.account.useGetDetails()
  const infoQuery = billingService.locationGroup.useGetBillingInfoById(
    {
      pathParams: {
        location_group_id: detailsQuery.data?.default_location_group_id // Type string | null | undefined  is not assignable to type string.
      }
    },
    { enabled: Boolean(detailsQuery.data?.default_location_group_id) }
  )
}
(1) Making weird condition that satisfy typesafety 
export const App = () => {
  const detailsQuery = billingService.account.useGetDetails()
  const infoQuery = billingService.locationGroup.useGetBillingInfoById(
    {
      pathParams: {
        location_group_id: detailsQuery.data?.default_location_group_id || '' // HERE
      }
    },
    { enabled: Boolean(detailsQuery.data?.default_location_group_id) }
  )
}
export const App = () => {
  const detailsQuery = billingService.account.useGetDetails()
  const infoQuery = billingService.locationGroup.useGetBillingInfoById(
    {
      pathParams: {
        location_group_id: detailsQuery.data?.default_location_group_id || '' // HERE
      }
    },
    { enabled: Boolean(detailsQuery.data?.default_location_group_id) }
  )
}
(2) Have optional types on useGetBillingInfoById for the property pathParams.location_group_id (3) Define initialData, but usually I have to define the whole data 
export const App = () => {
  const detailsQuery = billingService.account.useGetDetails({ 
    initialData: {default_location_group_id: ''} // Error as the Type is not complete
  })
  const infoQuery = billingService.locationGroup.useGetBillingInfoById(
    {
      pathParams: {
        location_group_id: detailsQuery.data?.default_location_group_id
      }
    },
    { enabled: Boolean(detailsQuery.data?.default_location_group_id) }
  )
}
export const App = () => {
  const detailsQuery = billingService.account.useGetDetails({ 
    initialData: {default_location_group_id: ''} // Error as the Type is not complete
  })
  const infoQuery = billingService.locationGroup.useGetBillingInfoById(
    {
      pathParams: {
        location_group_id: detailsQuery.data?.default_location_group_id
      }
    },
    { enabled: Boolean(detailsQuery.data?.default_location_group_id) }
  )
}
(4) ? Thank a lot ! :))
3 Replies
conscious-sapphire
conscious-sapphire•2y ago
4: extract whatever depends on "infoQuery" into a separate component with "default_location_group_id" prop?
flat-fuchsia
flat-fuchsiaOP•2y ago
@wlnt its a solution yes and most of the times we want to achieve that. However that's not always possible, or at least it reduces the flexibility of composition of your components / hooks.
stuck-chocolate
stuck-chocolate•2y ago
use the skipToken: https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries#typesafe-disabling-of-queries-using-skiptoken
Disabling/Pausing Queries | TanStack Query React Docs
If you ever want to disable a query from automatically running, you can use the enabled = false option. The enabled option also accepts a callback that returns a boolean. When enabled is false:

Did you find this page helpful?