Dynamic Client choice + typescript

[MartinP-C]

I have a component that can render data from multiple sources.
Each source is subtly different, but only ever contain the same type.

For example:

const data: Bus[] | Car[] = [];
// data WILL NOT be (Bus | Car)[]
<Layer data={data} />

I'm using react-query to fetch the data. I have created a client hook for each data type.

const useBusClient = (options) => {
  return useQueriesClient<Bus[]>('bus', arrayOfFetchFn);
}

const useCarClient = (options) => {
  return useQueriesClient<Car[]>('car', arrayOfFetchFn);
}

When I render the Layer component it is dynamic from a config, so I can't manually specify which query hook is used.
It needs to be dynamic based on the config:

const Layer = ({ type }) => {
  const client = type === 'bus' ? useBusClient : useCarClient;

  const responses = client(options);
  // Expect responses to be UseQueryResult<BusResponse>[] | UseQueryResult<CarResponse>[]

  return responses.flatMap( (response)  => { 
    if (response.success && response.data) {
      // Return another component using response.data which should be Bus[] | Car [];
    }
  });

 return null;
};

const Layers = () => {
  const config = [
    { type: 'bus', ... },
    { type: 'car', ... }
  ];

  return (
    <>
      { config.map((layer) => {
        return <Layer type={layer.type} />
      }) }
    </>
  )
}

I'm getting Typescript errors on response.data.
It's ending up as an array of the union of possible types: (Bus | Car)[]
instead of (as I was expecting) a union of arrays of single type: Bus[] | Car[]

What is the "proper" way to dynamically select a query/queries client?
As in the example, I can't manually specify the query client because it's from a config (that will be supplied by an API, so that rules out using JSX inside the config).

Or is there some kind of bug from distributive unions?

I will try to create a code sandbox for this.

[karol-janik]

I do believe that the result type should be UseQueryResult<Car[], Error> | UseQueryResult<Bus[], Error>. I don't think that the useQueriesClient is way to go... Maybe it's better to create custom hook for fetching data on top onuseQuery, which gives you control with states like isLoading & isError. There is example code, that may help you:

type Person = {
  name: string;
  height: string;
  mass: string;
};

type Houses = {
  url: string;
  name: string;
  region: string;
  coatOfArms: string;
};

const fetchPeople = async (): Promise<Person[]> => {
  const response = await fetch("https://swapi.dev/api/people/1");
  return response.json();
};

const fetchHouses = async (): Promise<Houses[]> => {
  const response = await fetch("https://anapioficeandfire.com/api/houses");

  return  response.json();
};

const usePeople = (): UseQueryResult<Person[], Error> => {
  return useQuery<Person[], Error>(["PEOPLE"], fetchPeople );
};

const useHouses = (): UseQueryResult<Houses[], Error> => {
  return useQuery<Houses[], Error>(["HOUSES"], fetchHouses);
};

interface LayerProps {
  data: Houses[] | Person[] | undefined;
}
const Layer: React.FC<LayerProps> = ({ data }) => {
 {....}
};

interface Props {
  type: "house" | "person";
}
const MyComponent: React.FC<Props> = ({ type }) => {
  const query = type === "person" ? usePeople : useHouses;
  const result:
   UseQueryResult<Person[], Error>
    | UseQueryResult<Houses[], Error> = query();

  if (result.isLoading) {
    return <p>Loading...</p>;
  }
if(result.isError){
    return <p>Error!</p>
}
  return <Layer data={response.data} /> // Use map
};


export function App() {
  const client = new QueryClient();
  return (
    <QueryClientProvider client={client}>
      <div className="App">
        <MyComponent type="person" /> // Do the magic with map or sth :P 
      </div>
    </QueryClientProvider>
  );
}

[TkDodo]

yep, that's definitely the way to go. and it also works without type annotations, here is a playground of your example, showing that result is properly inferred.