Theo's Typesafe Cult•3y ago

TRPC query initial undefined

How can I get rid of the undefined issue, the initial trpc request returns undefined, which is causing an error what may I be doing wrong here?

export default function Clients() {
  const allClients = trpc.client.getAll.useQuery()
  console.log(allClients); // this is initial undefined but fill it later

  return (
      <h2>
        Posts
        {allClients.status === 'loading' && '(loading)'}
      </h2>

      {allClients?.data?.length > 0 ? ( // undefined error?
        <EmptyState
          name="There are currently no clients"
          icon={<UsersIcon className="mx-auto h-12 w-12 text-gray-400" />}
        />
      ) : (
        <ClientsTable data={allClients.data} />
      )}
    </MainContainer>
  )
}

export default function Clients() {
  const allClients = trpc.client.getAll.useQuery()
  console.log(allClients); // this is initial undefined but fill it later

  return (
      <h2>
        Posts
        {allClients.status === 'loading' && '(loading)'}
      </h2>

      {allClients?.data?.length > 0 ? ( // undefined error?
        <EmptyState
          name="There are currently no clients"
          icon={<UsersIcon className="mx-auto h-12 w-12 text-gray-400" />}
        />
      ) : (
        <ClientsTable data={allClients.data} />
      )}
    </MainContainer>
  )
}

4 Replies

cje•3y ago

it doesn't return undefined it is undefined because it hasnt returned yet

utdev•3y ago

@cje yes, whats a good way to check that? I mean I could do this meanwhile

const foo = allClients ?? []

const foo = allClients ?? []

but not sure if there is a better way

cje•3y ago

if (!allClients.data) return <LoadingSpinner /> look at what's on the object that the query returns you have a bunch of stuff like isLoading, isError, etc that you can work with

utdev•3y ago

oh right forgot about that thank you

Gaming

Programming

TRPC query initial undefined