9 replies

TRPC async promise return type

Hello I am having some trouble with the types of the return values from the trpc router. I am unsure how to properly type and resolve this promise type error.

I have a navbar component that I am calling the trpc router for the categories I am pulling from my db and ive awaited that call

export const onloadRouter = createTRPCRouter({
  getCategories: publicProcedure
    .output(z.promise(z.array(CategorySchema)))
    .query(async ({ ctx }) => {
      const data = await ctx.prisma.productCategory.findMany({
        include: {
          subcategories: true,
        },
      });
      return data;
    }),
});

export const onloadRouter = createTRPCRouter({
  getCategories: publicProcedure
    .output(z.promise(z.array(CategorySchema)))
    .query(async ({ ctx }) => {
      const data = await ctx.prisma.productCategory.findMany({
        include: {
          subcategories: true,
        },
      });
      return data;
    }),
});

And I am calling the router here

function Navbar() {
  const { data: session } = useSession();

  const categoriesQuery = api.onload.getCategories.useQuery();

  const [pluginDropdownActive, setPluginDropdownActive] = useState(false);
  const handlePluginDropdown = () =>
    setPluginDropdownActive(!pluginDropdownActive);

  return (
    <nav className="top flex w-full max-w-3xl items-center justify-between gap-4 lg:max-w-5xl">
      ....
      </div>
      {pluginDropdownActive && categoriesQuery.data && (
        <PluginDropdown categories={categoriesQuery.data} />
      )}

function Navbar() {
  const { data: session } = useSession();

  const categoriesQuery = api.onload.getCategories.useQuery();

  const [pluginDropdownActive, setPluginDropdownActive] = useState(false);
  const handlePluginDropdown = () =>
    setPluginDropdownActive(!pluginDropdownActive);

  return (
    <nav className="top flex w-full max-w-3xl items-center justify-between gap-4 lg:max-w-5xl">
      ....
      </div>
      {pluginDropdownActive && categoriesQuery.data && (
        <PluginDropdown categories={categoriesQuery.data} />
      )}

In the plugin dropdown I also have already created an interface (although not sure if this is the right way to do it)

interface Subcategory {
  id: number;
  name: string;
  categoryId: number;
}

interface Category {
  id: number;
  name: string;
  subcategories: Subcategory[];
}

interface PluginDropdownProps {
  categories: Category[];
}
function PluginDropdown({ categories }: PluginDropdownProps) {
  return (

interface Subcategory {
  id: number;
  name: string;
  categoryId: number;
}

interface Category {
  id: number;
  name: string;
  subcategories: Subcategory[];
}

interface PluginDropdownProps {
  categories: Category[];
}
function PluginDropdown({ categories }: PluginDropdownProps) {
  return (

How can I resolve my type error on the categories prop? Any help is really appreciated!

TRPC async promise return type

export const onloadRouter = createTRPCRouter({
  getCategories: publicProcedure
    .output(z.promise(z.array(CategorySchema)))
    .query(async ({ ctx }) => {
      const data = await ctx.prisma.productCategory.findMany({
        include: {
          subcategories: true,
        },
      });
      return data;
    }),
});

export const onloadRouter = createTRPCRouter({
  getCategories: publicProcedure
    .output(z.promise(z.array(CategorySchema)))
    .query(async ({ ctx }) => {
      const data = await ctx.prisma.productCategory.findMany({
        include: {
          subcategories: true,
        },
      });
      return data;
    }),
});

And I am calling the router here

function Navbar() {
  const { data: session } = useSession();

  const categoriesQuery = api.onload.getCategories.useQuery();

  const [pluginDropdownActive, setPluginDropdownActive] = useState(false);
  const handlePluginDropdown = () =>
    setPluginDropdownActive(!pluginDropdownActive);

  return (
    <nav className="top flex w-full max-w-3xl items-center justify-between gap-4 lg:max-w-5xl">
      ....
      </div>
      {pluginDropdownActive && categoriesQuery.data && (
        <PluginDropdown categories={categoriesQuery.data} />
      )}

function Navbar() {
  const { data: session } = useSession();

  const categoriesQuery = api.onload.getCategories.useQuery();

  const [pluginDropdownActive, setPluginDropdownActive] = useState(false);
  const handlePluginDropdown = () =>
    setPluginDropdownActive(!pluginDropdownActive);

  return (
    <nav className="top flex w-full max-w-3xl items-center justify-between gap-4 lg:max-w-5xl">
      ....
      </div>
      {pluginDropdownActive && categoriesQuery.data && (
        <PluginDropdown categories={categoriesQuery.data} />
      )}

In the plugin dropdown I also have already created an interface (although not sure if this is the right way to do it)

interface Subcategory {
  id: number;
  name: string;
  categoryId: number;
}

interface Category {
  id: number;
  name: string;
  subcategories: Subcategory[];
}

interface PluginDropdownProps {
  categories: Category[];
}
function PluginDropdown({ categories }: PluginDropdownProps) {
  return (

interface Subcategory {
  id: number;
  name: string;
  categoryId: number;
}

interface Category {
  id: number;
  name: string;
  subcategories: Subcategory[];
}

interface PluginDropdownProps {
  categories: Category[];
}
function PluginDropdown({ categories }: PluginDropdownProps) {
  return (

How can I resolve my type error on the categories prop? Any help is really appreciated!

TRPC async promise return type

TRPC async promise return type

Similar Threads

Similar Threads

Similar Threads