flat-fuchsia

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;
  });
}

//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

3 Replies

foreign-sapphire•3y ago

@kaszakukus CreateQueryOptions is exported from svelte-query 🙂

flat-fuchsiaOP•3y ago

ah, ok. But how im able to use this?

flat-fuchsiaOP•3y ago

@Raytuzio @Maintainer - Query could anyone please provide me some hints how I should declare own createAppQuery function, which returns createQuery result and is typed exactly as original createQuery function?

Gaming

Programming

Create typed wrapper for createQuery function

Did you find this page helpful?