REACT查询 - 将使用USEQUERY与类型安全的多个自定义钩中的属性结合在一起

Question

我有一个任意数量的自定义钩子，可以返回usequery的查询结果。我要做的是将这些钩子的返回值与此结构结合到一个对象中：

{
  data,
  isLoading,
  isFetching,
  isSuccess,
}

数据属性将是通过在所有结果上组合数据属性创建的数组。 这是我当前的代码：

export function isAnyProperty(
  property: keyof QueryObserverBaseResult<unknown, unknown>,
  ...queries: UseQueryResult<unknown, unknown>[]
) {
  return queries.some((query) => query[property]);
}

export function combineQueryResults<TData extends unknown[], TQueries extends UseQueryResult<TData>[]>(
  ...queries: TQueries
) {
  const data = queries.reduce<TData[]>((acc, query) => {
    if (query.data === undefined) {
      return acc;
    }

    return [...acc, query.data];
  }, []);

  return {
    data,
    isLoading: isAnyProperty('isLoading', ...queries),
    isFetching: isAnyProperty('isFetching', ...queries),
    isSuccess: isAnyProperty('isSuccess', ...queries),
  };
}

当我使用REST参数时，我无法获得Typescript来推断tdata的值，我不确定为什么。要注意的一件事是，当data是usequeryResult时，我确实设法使Typescript推断正确的类型/代码>。

为了参考，我目前从数据是未知[] [] []中返回的内容。我期望回来的情况当然是一个带有数据值的元组，useQueryResult。我认为也许减少函数删除所有未定义的值可能会使Typescript能够推断出正确的值 - 因此我也使用简单的映射尝试了它，这导致data ：（ Unknown [] | Undefined）[] [] - 因此也无效。

我还尝试了以下操作：

export function combineQueryResults<TData extends unknown[]>(...queries: UseQueryResult<TData>[]) {
  const data = queries.map((query) => query.data);

  return {
    data,
    isLoading: isAnyProperty('isLoading', ...queries),
    isFetching: isAnyProperty('isFetching', ...queries),
    isSuccess: isAnyProperty('isSuccess', ...queries),
  };
}

但是使用此代码，Typescript只会推断第一个变量传递给combineQueryResult的类型，并在中结果'type'typeOne []'''不可分配给type'typeTwo []'错误。

看起来TypeScript将在与使用useQueryResult时推断tdata，但不会自行：

，vod.constructedAsset []和group.union []都是tdata。

Answer 1

我创建了此功能以结合我的查询：

const combineResults = <T extends object>(
  data: UseQueryResult<T[], unknown>[]
): T[] =>
  data.reduce((acc, curr) => {
    if (!curr.data) return acc;

    return [...acc, ...curr.data];
  }, []);
  
  
//my hook
const useMyHook = (teams: TeamInfo[]) => {
  const result = useQueries(
    //Your queries here...
  );

  return {
    data: combineResults<MyInterface>(result),
    isLoading: result.some((query) => query.isLoading),
    isFetching: result.some((query) => query.isFetching),
  };
};

希望这对您有所帮助。