TRPC doesn't react to config / variables passed (e.g.: enabled : false)

Question

New to trpc and am trying to understand how to use useQuery (which I am familiar with from react-query):

const IndexPage = () => {

  const { isLoading, data, isIdle } = trpc.useQuery([
    "subscriber.add",
    { email: "elsa@prisma.io" },
    {
      enabled: false,
      refetchOnWindowFocus: false,
      refetchOnmount: false,
      refetchOnReconnect: false,
      retry: false,
      staleTime: 1000 * 60 * 60 * 24, //24h
    },
  ]);

  return (
    <>
      <pre>{JSON.stringify(isIdle)}</pre>
    </>
  );
};

export default IndexPage;

It does hit the endpoint and works fine, but it doesn't seem to take in any of the config options. So even though enabled is false, it still hits the endpoint on load and even though refetchOnWindowFocus is false, it will refetch on re-focus.

Not sure why ?

Answer 1

Just figured it out: The options / config comes after the square brackets, not inside them:

  const { isLoading, data, isIdle } = trpc.useQuery([
    "subscriber.add",
    { email: "elsa@prisma.io" }], <======= closing the square brackets here
    {
      enabled: false,
      refetchOnWindowFocus: false,
      refetchOnmount: false,
      refetchOnReconnect: false,
      retry: false,
      staleTime: 1000 * 60 * 60 * 24, //24h
    },
  );