useQuery enabled option with TypeScript

[jackbcodes]

I've got this custom hook which fetches all the players in a game using the gameId in the route params.

import { useRouter } from 'next/router'
import { trpc } from '~/utils/trpc'

export const usePlayers = () => {
  const router = useRouter()
  return trpc.player.getAllByGameId.useQuery(router.query.gameId as string, {
    enabled: router.isReady && Boolean(router.query.gameId),
  })
}

Issue is, I have to wait for the router to be ready and to make sure it's got the gameId. I've passed that through to enabled (and it works perfectly) but TS complains at router.query.gameId as the first argument for useQuery as it could be undefined.

I get round this by just casting it like so - trpc.player.getAllByGameId.useQuery(router.query.gameId as string, ...). Is there a better solution?

[louis-young]

Hi 👋

Type safety with the enabled option can be achieved in various ways. Please see: https://tkdodo.eu/blog/react-query-and-type-script#type-safety-with-the-enabled-option