Theo's Typesafe Cult•3y ago

How to Pass (Dynamic) Variables in trpc.useQuery()?

I know I can do this: const findSubscriber = trpc.useQuery(["subscriber.find", { email: "[email protected]" }]); But what if I want the user to type in an email & then see if that email exists with subscriber.find ? So I want to execute my query conditionally, that is, only in an onClick, as I don't have the user input before that.

17 Replies

awexis•3y ago

Enabled: false and use refetch prob

theo (t3.gg)•3y ago

const [email, setEmail] = useState();

const {data: subscriber} = trpc.useQuery(["subscriber.find", {email}]);

const [email, setEmail] = useState();

const {data: subscriber} = trpc.useQuery(["subscriber.find", {email}]);

plygltOP•3y ago

thanks a lot!!

theo (t3.gg)•3y ago

And if you want to delay: , {enabled: !!email} as mentioned above

plygltOP•3y ago

thanks, i'll try it out right now! 🙂 Is it correct that when I have enabled: false, there should not be an initial request to my trpc endpoint? Right now, when I reload, it will hit that endpoint every time initially.

theo (t3.gg)•3y ago

Other queries may have requested it, all the hooks are batched into one request

plygltOP•3y ago

hmmm ... I only have this one component, as I am trying to learn trpc right now. When I remove the component, no request is made. The component itself is pretty basic:

const CTAGetAccess = ({}) => {
  const [email, setEmail] = useState("");

  const findSubscriber = trpc.useQuery([
    "subscriber.find",
    { email },
    { enabled: false },
  ]);

  return <div>Test</div>;
};

export default CTAGetAccess;

const CTAGetAccess = ({}) => {
  const [email, setEmail] = useState("");

  const findSubscriber = trpc.useQuery([
    "subscriber.find",
    { email },
    { enabled: false },
  ]);

  return <div>Test</div>;
};

export default CTAGetAccess;

sorry I don't want to annoy you guys too much here, just a bit confused right now If anyone knows what I'm missing here, that would be appreciated! Otherwise thanks a lot already!!

theo (t3.gg)•3y ago

This should be "disabled", it's possible trpc fires the query with an empty body as part of the batching process But you should be confident that this won't touch your backend if the value passed to enabled is falsy

plygltOP•3y ago

Sorry, what should be disabled?

theo (t3.gg)•3y ago

The query you wrote

plygltOP•3y ago

Ah ok, so you mean that this should work?

theo (t3.gg)•3y ago

Yes that should be fine

plygltOP•3y ago

hmm okay! thanks a lot theo! 🙂

theo (t3.gg)•3y ago

npnp!