TRPC query initial undefined

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