TanStackT
TanStack•3y ago•
3 replies
cold-orange

Create typed wrapper for createQuery function

I have own configuration of createQuery (createAppQuery) and then I want to use this function for creating query in .svelte component. However I would like it to be typed exactly as original createQuery. Now I have just meaningless CreateAppQueryOptions and suppose, this should be integrated somehow with types from tanstack lib?

//types from tanstack package
export declare function createAppQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): CreateQueryResult<TData, TError>;
export declare function createAppQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): DefinedCreateQueryResult<TData, TError>;

type CreateAppQueryOptions = {
  queryKey: unknown[];
  queryFn: () => Promise<any>;
};

export function createAppQuery(options: CreateAppQueryOptions) {
  const query = createQuery(
    derived(dataRefetchIntervalS, ($dataRefetchIntervalS) => ({
      queryKey: options.queryKey,
      refetchInterval: $dataRefetchIntervalS * 1000,
      queryFn: options.queryFn
    }))
  );

  return derived(query, ($query) => {
    isAnyQueryLoading.update(() => $query.isRefetching);
    return $query;
  });
}

Have no idea how I can achieve this
Was this page helpful?