Question about enabled: false

[csantos-nydig]

From #1196

here is a quick and dirty example: https://codesandbox.io/p/sandbox/elegant-cdn-5hhvhh

const useDataQuery = (props) => {
  return useSuspenseQuery({
    queryFn: () => {
      return { a: 1, b: 2, c: 3 };
    },
    queryKey: ["test"],
    ...props,
  });
};

const ComponentOne = () => {
  const { data } = useDataQuery();

  return <div>ComponentOne {JSON.stringify(data)} </div>;
};

const ComponentTwo = () => {
  const { data } = useDataQuery({
    enabled: false,
    select: (data) => {
      console.log("inside Component2 select method");
      return data.a + data.b;
    },
  });

  return <div>ComponentTwo {JSON.stringify(data)} </div>;
};

The query in ComponentTwo is forever enabled: false, yet the select method is executed and data is returned.

I'd expect ComponentTwo data to be undefined for ever until I change enabled to true; but it might be misunderstanding how it's supposed to work?

---

Original response from @TkDodo #7721 (comment) (because I messed up and posted it in the wrong issue)

But yes, you are misunderstanding how enabled works. When calling useQuery, you are always subscribing to the queryKey. If data changes, your component re-renders. enabled just makes sure that this query is "read-only", meaning it won't trigger any refetches by itself.

[csantos-nydig]

The follow up question I had (in the wrong thread, and why I decided to create this discussion instead)

is there any way to have the query in ComponentTwo to not execute the select at all if the query is disabled?

To me it's kind of suboptimal that the logic in select function is executed when the query is disabled

[TkDodo]

no. you would to have your component return null if the query is not enabled. I'm wondering what the use-case for something like that would be ?

[csantos-nydig]

Sure, here is a pseudo code for a more "realistic" example:

const useProductsQuery = (props) => {
  return useSuspenseQuery({
    queryFn: fetch('/api/products'),
    queryKey: ['products'],
    ...props
  })
}

const ProductsList = () => {
  const { data = [] } = useProductsQuery();

  // list of products
  return <ul><li /></ul>
}

const ProductDetails = ({ id }) => {
  const { data: productDetails } = useProductsQuery({
    enabled: !!id, // <----- this
    select: (products) => products.find(x => x.productId === id)
  })
}

<>
  <ProductList />
  <ProductDetails id="existing" />
  <ProductDetails id="not-existing" />
  <ProductDetails />

So I was expecting to save some time in ProductDetails to not execute the query (or at least not execute the select method) when the id isn't provided.

[csantos-nydig]

btw, I'm getting this expectation from the docs: https://tanstack.com/query/latest/docs/framework/react/guides/dependent-queries
(I know this is from dependent queries, but it's the same concept imo)

[TkDodo]

or at least not execute the select method

sorry, that's just not how it works. It also seems to be an "optimization" that isn't necessary. There is nothing to optimize here. Just remove the enabled and you're fine 🤷

Btw: enabled doesn't exist on useSuspenseQuery.

[kristian-nst]

Same here. Just testing with enabled: false and it still runs (originally enabled: !!someDataExist)

const {
  data: maxAmountData,
  isFetching: isMaxAmountFetching,
  error: maxAmountError,
  refetch: refetchMaxAmount,
} = apiClient.campaigns.maxAmount.useQuery({
  queryKey: [campaignsContract.maxAmount.path, slug],
  queryData: {
    query: {
      id: slug,
      walletId: walletData?.[0]?.id ?? '',
    },
  },
  enabled: false // example: !!walletData?.[0]?.id
})

[TkDodo]

same what? the original question was about running select, which your example doesn’t have ...

[kristian-nst]

Sorry, then I misunderstood :)