useQuery with query params

const RecipeDetailPage: NextPageWithLayout = () => {
  const router = useRouter();

  const querySchema = z.object({ id: z.string() });
  const query = querySchema.safeParse(router.query);

  const recipe = api.recipes.getRecipeById.useQuery(query.data?.id, {
    enabled: query.success,
  });

  if (!recipe.data) return null;

  return <RecipeDetail recipe={recipe.data} />;
};