T

Usage of useQuery after pageload?

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 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 all hooks must be before any return statements

Nnlucas

5/11/2023

Above ^

Ppeternovak

5/11/2023

Wow, that was it! Thanks a lot guys! 🙏 I removed the return statement and everything just worked

Looking for more? Join the community!

T

Usage of useQuery after pageload?

T

Usage of useQuery after pageload?

Recommended Posts

Security question about tRCPIf I export the tRCP router as type in order to import that type in my client JS, wouldn't it mean t Real-world Large Application Examples?Are there any OSS examples (besides cal.com) demonstrating large tRPC code bases? I want to see how Scaling tRPCI’ve been seeing issues regarding tRPC routers and performance issues as routers grow. I’m wonderin what is the best way to update trpc and its dependencies?Hi all, as the title says, how can i best update trpc and its dependencies? TRPC stands at 10.25.1,Where i can read a journal about tRPC ?I use tRPC for my Final Task in my Bachelor Degree, but i can't found journal about tRPC. Can anyone Default Query Function to resume paused mutationsI'm building a React Native App with an offline mode. I implemented a PersistQueryProvider and a bui SuperJSON is wrapping results in type with keys "json" and "meta"How can I modify the transformer in SuperJSON library to only return the "json" property and ignore Caching(?) previous data until query returns new datawhen I update my useQuery inputs with new filters it instantly sets the data to `undefined` while th How to upload file not use S3 Next js? Please, examplefile: course.router.ts / import { CourseSchema } from "~/schema/post.schema"; import { createTRPC how can i send a request to specific route in trpc server, after mutation ?i am using trpc with next js ,Help in deploymentHey all, I am building an app which is having a 1 . vite-react frontend 2 . trpc-standalone how to persist the query client?I want to persist the trpc query client cache, but don't want to create a new query client, I want t How to infer type of a nested object from app router output?I have a tRPC router than returns a nested object through a db query. It looks like this: ```ts ILe What's the type of errorFormatter parameterI wanna know how could i get the type of the errorFormatter parameter, so i can move the errorFormat tRPC works only for monoliths environment?How can I works if typesafe in real time with a remote server? 🤔How to use createCaller() with lambda for testing?Has anyone successfully mocked a trpc caller that uses the AWS Lambda integration? trying to write s is there a way to call useQuery() from a callback and get the return value within that callback?I have a generic component that is effectively an autocomplete that fills in options from a web requ Using Response with the Next App RouterThe route handlers in the App Router, only receive the Request object, requiring you to use a Respon The only way to access useQuery options without input is passing undefined to it?Is there any other way? seems strange pass undefined to the input query How can I access the trpc context in zod's refine function?To do something like ```ts create: myProcedure .input(myInputSchema.refine(async ({ slug }, ctx)