P
Prisma•4mo ago
TJ

TypeScript error when using select argument type

Hi, The following code snippet is working fine, 
const results = await prisma.orders.findMany({
  select: {
    ...,
    products_orders_order_product_idToproducts: {
      select: {
        orders: {
          select: {
            clients: {
              select: {
                name: true,
              },
            },
          },
        },
      },
    },
  },
});
return results.map((row) => ({
  ...
  name:
    row.products_orders_order_product_idToproducts?.orders
      .clients?.name, // No TypeScript error
}));
const results = await prisma.orders.findMany({
  select: {
    ...,
    products_orders_order_product_idToproducts: {
      select: {
        orders: {
          select: {
            clients: {
              select: {
                name: true,
              },
            },
          },
        },
      },
    },
  },
});
return results.map((row) => ({
  ...
  name:
    row.products_orders_order_product_idToproducts?.orders
      .clients?.name, // No TypeScript error
}));
and TypeScript started to complaint when I tried to extract the query options out to a options variable like this, 
const options: Prisma.ordersFindManyArgs  = {
  select: {
    ...,
    products_orders_order_product_idToproducts: {
      select: {
        orders: {
          select: {
            clients: {
              select: {
                name: true,
              },
            },
          },
        },
      },
    },
  },
});

const results = await prisma.orders.findMany(options)
return results.map((row) => ({
  ...
  name:
    row.products_orders_order_product_idToproducts?.orders
      .clients?.name, // TypeScript error here 
}));
const options: Prisma.ordersFindManyArgs  = {
  select: {
    ...,
    products_orders_order_product_idToproducts: {
      select: {
        orders: {
          select: {
            clients: {
              select: {
                name: true,
              },
            },
          },
        },
      },
    },
  },
});

const results = await prisma.orders.findMany(options)
return results.map((row) => ({
  ...
  name:
    row.products_orders_order_product_idToproducts?.orders
      .clients?.name, // TypeScript error here 
}));
The error looks like this, Property 'products_orders_order_product_idToproducts' does not exist on type { ... } Do you have any idea how to resolve this?
4 Replies
RaphaelEtim
RaphaelEtim•4mo ago
Hi @TJ Can you try this code 
const options = {
  select: {
    // ... your other selections
    products_orders_order_product_idToproducts: {
      select: {
        orders: {
          select: {
            clients: {
              select: {
                name: true,
              },
            },
          },
        },
      },
    },
  },
} as const satisfies Prisma.ordersFindManyArgs;

const results = await prisma.orders.findMany(options);
return results.map((row) => ({
  // ... your other mappings
  name: row.products_orders_order_product_idToproducts?.orders.clients?.name, 
}));
const options = {
  select: {
    // ... your other selections
    products_orders_order_product_idToproducts: {
      select: {
        orders: {
          select: {
            clients: {
              select: {
                name: true,
              },
            },
          },
        },
      },
    },
  },
} as const satisfies Prisma.ordersFindManyArgs;

const results = await prisma.orders.findMany(options);
return results.map((row) => ({
  // ... your other mappings
  name: row.products_orders_order_product_idToproducts?.orders.clients?.name, 
}));
TJ
TJOP•4mo ago
That is working but, why?
RaphaelEtim
RaphaelEtim•4mo ago
When you use Prisma.ordersFindManyArgs to describe your options in TypeScript, it tells TypeScript, This is a valid input for findMany. but the downside is that TypeScript forgets the exact details about the fields you're selecting (like which ones you want). To fix this, we use a technique called as const satisfies. 1. as const tells TypeScript to treat your options exactly as you've written them, with all the details about selected fields. 2. satisfies Prisma.ordersFindManyArgs double-checks that your options follow the rules for findMany. This keeps the exact information about the fields you selected, so TypeScript won’t complain when you use them later in your code. You can also look at this previous Github discussion.
GitHub
Typescript throw error when abstracting nested select · prisma pris...
Bug description It is very easy to reproduce this, I don't know if it work as intended or not. So I have this simple prisma schema, basically just a 3 relation table, A have B children, B have ...
vanHessler
vanHessler•2w ago
Hey - sorry to necro here, but i'm having a further issue here:
lets say that i want to pass a select object to a function as an argument. How would i type that parameter? If i set the type on the parameter as Prisma.fooSelect (to let the consumer of the function know what type its expecting), it isn't wanting to be cast as const satisfies Prisma.fooSelect.. It still throws type errors when i try to access the nested properties from the result. ok - my issue might be unrelated: This works: 
function manyFoo(select?: Prisma.fooSelect) {
  const builtSelect = {
    ...select,
    id: true,
    name: true,
    Bar: {
      select: {
        id: true,
        name: true,
        Baz: {
          select: {
            id: true,
            name: true
          }
        }
      }
    }
  } as const satisfies Prisma.fooSelect;
  // find many foo
  const results = await prisma.foo.findMany({
    select: builtSelect,
  });
  return results.map((foo) => {
    return {
      ...foo,
      bar: foo.Bar.name,
      baz: foo.Bar.Baz.name,
    };
  });
}
function manyFoo(select?: Prisma.fooSelect) {
  const builtSelect = {
    ...select,
    id: true,
    name: true,
    Bar: {
      select: {
        id: true,
        name: true,
        Baz: {
          select: {
            id: true,
            name: true
          }
        }
      }
    }
  } as const satisfies Prisma.fooSelect;
  // find many foo
  const results = await prisma.foo.findMany({
    select: builtSelect,
  });
  return results.map((foo) => {
    return {
      ...foo,
      bar: foo.Bar.name,
      baz: foo.Bar.Baz.name,
    };
  });
}
This does not: 
function manyFoo(select?: Prisma.fooSelect) {
  const builtSelect = {
    id: true,
    name: true,
    Bar: {
      select: {
        id: true,
        name: true,
        Baz: {
          select: {
            id: true,
            name: true,
          },
        },
      },
    },
    ...select,
  } as const satisfies Prisma.fooSelect;


  // find many foo
  const results = await prisma.foo.findMany({
    select: builtSelect,
  });
  return results.map((foo) => {
    return {
      ...foo,
      bar: foo.Bar.name,
      baz: foo.Bar.Baz.name, //<-- ERROR HERE
    };
  });
}
function manyFoo(select?: Prisma.fooSelect) {
  const builtSelect = {
    id: true,
    name: true,
    Bar: {
      select: {
        id: true,
        name: true,
        Baz: {
          select: {
            id: true,
            name: true,
          },
        },
      },
    },
    ...select,
  } as const satisfies Prisma.fooSelect;


  // find many foo
  const results = await prisma.foo.findMany({
    select: builtSelect,
  });
  return results.map((foo) => {
    return {
      ...foo,
      bar: foo.Bar.name,
      baz: foo.Bar.Baz.name, //<-- ERROR HERE
    };
  });
}
When i move the select param to the bottom after a multiple nested relation lookup, it throws errors for the nested relation. Also, if i move the ...select to just above the Bar part, it works.. Its only if i move it after the relation lookup.

Did you find this page helpful?