TTC
Theo's Typesafe Cult•3y ago
utdev

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
cje•3y ago
it doesn't return undefined it is undefined because it hasnt returned yet
utdev
utdevOP•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
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
utdevOP•3y ago
oh right forgot about that thank you

Did you find this page helpful?