Usage of useQuery after pageload?

Ppeternovak

5/11/2023

Hi all!
I am new to TRPC so my apologies in advance for a very nooby question: In my [id].tsx file I would like to use the 'id' parameter in my query. Since that takes a fraction of a second to load, I get an unhanded runtime error. What is the proper way to first call my query once the 'id' parameter has been identified, or for that matter later on when the user does something on the page?

Nnlucas

5/11/2023

You cannot call a hook conditionally

Nnlucas

5/11/2023

This is a react error

Ppeternovak

5/11/2023

Thanks, yeah I was trying to figure out whether there was some convenient trpc workaround. All I want is to pass in the [id] from the slug of the page to my trpc query.

Nnlucas

5/11/2023

useQuery has an enabled:boolean flag

Ppeternovak

5/11/2023

Thanks, let me have a look!

Ppeternovak

5/11/2023

Getting the same error despite trying this. Am I missing something?

Nnlucas

5/11/2023

Can you share the rest of the component?

Ppeternovak

5/11/2023

import type { NextPage } from "next";

import Image from "next/image";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { api } from "@/utils/api";
import { LoadingSpinner } from "@/components/loading";

const EvaluationPage: NextPage = () => {
  const { data: session } = useSession();
  const router = useRouter();
  const { id } = router.query;

  if (!id || Array.isArray(id)) return <LoadingSpinner />;

  const { data } = api.image.getEvaluation.useQuery(
    {
      id,
    },
    {
      enabled: false,
    }
  );

  return (
    <>
      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-blue-400 to-indigo-800">
        {session ? (
          <div className="container flex flex-col items-center justify-center gap-12 px-4 py-12 ">
            <h1 className="font-base text-3xl tracking-tight text-gray-100 sm:text-3xl">
              Image evaluation
            </h1>

            <>{data && <p className="text-white">{data.response}</p>}</>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center gap-4 py-4">
            <h3 className="text-center text-2xl text-gray-100">
              Please sign in to continue.
            </h3>
          </div>
        )}
      </main>
    </>
  );
};

Ppeternovak

5/11/2023

Ppeternovak

5/11/2023

Could it be that TRPC does not pick up the disabled setting like in this post?
https://stackoverflow.com/questions/73940139/trpc-doesnt-react-to-config-variables-passed-e-g-enabled-false

Ccaalyx

5/11/2023

you still have the hook called conditionally just fyi

Ccaalyx

5/11/2023

all hooks must be before any return statements

Nnlucas

5/11/2023

Above ^

Ppeternovak

5/11/2023

Wow, that was it!

Ppeternovak

5/11/2023

Thanks a lot guys! 🙏

Ppeternovak

5/11/2023

I removed the return statement and everything just worked