T
TanStack•7mo ago
other-emerald

Suggested pattern for optional props that are required in api request?

I constantly find myself doing this: 
// fooId is an optional prop to this component

  const foo = trpc.getFoo.useQuery(
    {
      // query only enabled if fooId is defined
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      patientId: fooId!,
    },
    {
      enabled: fooId != null,
    },
  );
// fooId is an optional prop to this component

  const foo = trpc.getFoo.useQuery(
    {
      // query only enabled if fooId is defined
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      patientId: fooId!,
    },
    {
      enabled: fooId != null,
    },
  );
I know I can move stuff into a nested component (where fooId is required), but wondering if there's another recommended pattern to avoid needing to use the ! operator?
2 Replies
helpful-purple
helpful-purple•7mo ago
that's what skipToken is for
other-emerald
other-emeraldOP•7mo ago
ooooh amazing thanks!!

Did you find this page helpful?