How can I fetch different queries in switch statement?

[buglessir]

For example, I've a switch statement to check type then, fetch the required API:

switch(type) {
  case 'products':
    fetch('/products').then(....);
    break;
  case 'news':
    fetch('/news').then(....);
    break;
  case 'gallery':
    fetch('/gallery').then(....);
    break;
  .
  .
  .
}

If I define a query for each request like this:

const [enableProductsQuery, setEnableProductsQuery ] = useState(null);
const products = useQuery('products', fetcher, { enabled: !!enableProductsQuery });

useEffect(() => {
  // doing something like computing or using helper function...
}, [products.data]);

I have to define specific state and useEffect for each query...
I mean, one state to handle enabled and useEffect to handle data changes, because { data } is not Async and I can't use await before that to use it in another functions or somewhere like helper function eg.
I think this scenario makes my code unreadable... But what do you think? Is there any way to write it better and readable? or current scenario is better one?

[TkDodo]

I don't understand what the switch statement has to do with state and effect. To get rid of the switch statement, you can use the default query function: https://react-query.tanstack.com/guides/default-query-function

it would be best if you can create a codesandbox example because I have no idea what the effect is doing / should be doing, or what you mean regarding { data } and async ... :/

[buglessir]

OK, let me to explain it clear and well ;-)
suppose that, I've a select-box to show some categories:

<select onChange={handleCategory}>
  <option value="1">Category 1</option>
  <option value="2">Category 2</option>
  <option value="3">Category 3</option>
  .
  .
  .
</select>

If client change this select-box, I've to fetch a list then, fill the second select-box for the sub-categories. But I've to add switch statement to check the selected category ID then fetch the required API. Because each category ID has different API and I can't handle data by one API and only pass ID to get required data:

const handleCategory = (categoryID) => {
 switch(categoryID) {
   case 1:
     fetch('/sub-categories-for-one........').then(....);
     break;
   case 2:
     fetch('/sub-categories-for-two........').then(....);
     break;
   case 3:
     fetch('/sub-categories-for-three........').then(....);
     break;
   .
   .
   .
 }
}

So my main question: If I define an useQuery for each API, I've to define one state to handle { enabled: !!state } and one useEffect to fill data in sub-categories items after each changes on the query data: (suppose that, I should define a couple of state and useEffect for each query, even if it's 10 or 20 queries)

const [subCategoryItems, setSubCategoryItems] = useState([]);

const [SubCategoryOneEnabledState , setSubCategoryOneEnabledState ] = useState(false);
.
.

const SubCategoryOne = useQuery(......., { enabled: !!SubCategoryOneEnabledState });
const SubCategoryTwo = useQuery(......., { enabled: !!SubCategoryTwoEnabledState });
.
.

useEffect(() => {
  setSubCategoryItems(SubCategoryOne.data);
}, [SubCategoryOne.data]);
.
.

const handleCategory = (categoryID) => {
  switch(categoryID) {
   case 1:
     setSubCategoryOneEnabledState(true); // to start fetching data
     break;
   .
   .
   .
  }
}

Because I can't set { enabled: true } or prefetch data for all APIs, maybe there were 10 or 20 APIs and it will be a performance issue for the App to fetch many APIs at run-time...
In fact, I want to execute queries by switch statement after each changes on the category select-box... but all queries should be disabled or OFF at run-time and user execute them by changing category select-box.
I Hope I could to explain well :-)