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;
    }),
});

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} />
      )}

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 (

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!

Neto•4/6/23, 6:48 PM

when you use a query, the response isn't immediate

Neto•4/6/23, 6:48 PM

if you have check if there is data for the component to accept

Neto•4/6/23, 6:48 PM

you can check if isnt loading and has data

Neto•4/6/23, 6:49 PM

or use categoriesQuery.data ?? []categoriesQuery.data ?? []

samuelhoOP•4/6/23, 6:51 PM

Yeah I think thats the part where im struggling a little bit . I tried using the

?? []

?? []

but i wasnt able to resolve the error via that.

I am trying to check if it has data before it passes the data to the component but im still getting the same results

{pluginDropdownActive && categoriesQuery.data && (
        <PluginDropdown categories={categoriesQuery.data ?? []} />
      )}

{pluginDropdownActive && categoriesQuery.data && (
        <PluginDropdown categories={categoriesQuery.data ?? []} />
      )}

Type 'Promise<{ id: number; name: string; subcategories: { id: number; name: string; categoryId: number; }[]; }[]>' is missing the following properties from type 'Category[]': length, pop, push, concat, and 31 more.ts(2740)
Navbar.tsx(23, 3): The expected type comes from property 'categories' which is declared here on type 'IntrinsicAttributes & PluginDropdownProps'
(property) PluginDropdownProps.categories: Category[]

Type 'Promise<{ id: number; name: string; subcategories: { id: number; name: string; categoryId: number; }[]; }[]>' is missing the following properties from type 'Category[]': length, pop, push, concat, and 31 more.ts(2740)
Navbar.tsx(23, 3): The expected type comes from property 'categories' which is declared here on type 'IntrinsicAttributes & PluginDropdownProps'
(property) PluginDropdownProps.categories: Category[]

Neto•4/6/23, 6:52 PM

try removing the z.promise

Neto•4/6/23, 6:52 PM

you "cant ship" a promise with trpc

samuelhoOP•4/6/23, 6:53 PM

Ahh understood! That actually resolved it for me. Really appreciate you chiming in

was going in circles

Neto•4/6/23, 6:53 PM

glad to help

TRPC async promise return type

Similar Threads

Similar Threads

Similar Threads