Theo's Typesafe Cult•2y ago

Loading state when quering profile data

Hi people! Started with T3 stack and working on the profile page right now. I am trying to get the current logged in profile data and I am using a protected route/api for that. However, how can I make sure the 404 page is not shown when the data is not fully loaded yet?

const Profile: NextPage = ({}) => {
  const { data: profile } = api.user.me.useQuery();

  if (!profile) return <ErrorPage statusCode={404} />;
  console.log(profile);
  return (
    <>
      <Head>
        <title>My profile - FirstName</title>
      </Head>
      <div className="relative flex min-h-screen flex-col">
        <div className="flex-1">
          <DashboardLayout>
            <div className="max-w-5xl">
              <div className="max-w-2xl">
                <Heading className="uppercase">My profile</Heading>
              </div>
              <Spacer size="md" />
              {/* Account info */}
              <section>
                <div className="flex w-full justify-between">
                  <Heading as="h3" size="h3" className="uppercase">
                    Account info
                  </Heading>
                </div>

                <Spacer size="3xs" />
                <Separator />
                <Spacer size="3xs" />
                <div className="grid grid-cols-2 gap-x-4">
                  <AccountInfo showConfirmChanges={false} />
                </div>
              </section>
              <Spacer size="4xs" />
              {/* Personal details */}

const Profile: NextPage = ({}) => {
  const { data: profile } = api.user.me.useQuery();

  if (!profile) return <ErrorPage statusCode={404} />;
  console.log(profile);
  return (
    <>
      <Head>
        <title>My profile - FirstName</title>
      </Head>
      <div className="relative flex min-h-screen flex-col">
        <div className="flex-1">
          <DashboardLayout>
            <div className="max-w-5xl">
              <div className="max-w-2xl">
                <Heading className="uppercase">My profile</Heading>
              </div>
              <Spacer size="md" />
              {/* Account info */}
              <section>
                <div className="flex w-full justify-between">
                  <Heading as="h3" size="h3" className="uppercase">
                    Account info
                  </Heading>
                </div>

                <Spacer size="3xs" />
                <Separator />
                <Spacer size="3xs" />
                <div className="grid grid-cols-2 gap-x-4">
                  <AccountInfo showConfirmChanges={false} />
                </div>
              </section>
              <Spacer size="4xs" />
              {/* Personal details */}

3 Replies

Neto•2y ago

there should be a isLoading primitive on the query

Neto•2y ago

https://tkdodo.eu/blog/status-checks-in-react-query

Status Checks in React Query

How the wrong status check order can negatively impact user experience

DennisKOP•2y ago

Thanks! Look into that 🙂

Gaming

Programming

Loading state when quering profile data