T
TanStack•2w ago
equal-jade

useSuspenseQuery

since solid-query does not have a useSuspenseQuery hook, is there a way to configure a query via its options so it acts like useSuspenseQuery? where i dont worry about no loading states, errors. query data is typed as T and not as T | undefined
1 Reply
equal-jade
equal-jadeOP•3d ago
i did my own work around, for anyone interested 
import type { DefaultError, OmitKeyof, QueryKey } from "@tanstack/query-core";
import {
  type SolidQueryOptions,
  type UseQueryResult,
  useQuery,
} from "@tanstack/solid-query";
import type { Accessor } from "solid-js";


type UseSuspenseQueryOptions<
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
> = Accessor<
  OmitKeyof<
    SolidQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
    "enabled" | "throwOnError" | "placeholderData" | "suspense"
  >
>;

type UseSuspenseQueryResult<TData = unknown, TError = DefaultError> = Omit<
  UseQueryResult<TData, TError>,
  "data" | "status" | "error" | "isError" | "isPending" | "isLoading"
> & {
  data: TData;
  status: "success";
  error: null;
  isError: false;
  isPending: false;
  isLoading: false;
};

export function useSuspenseQuery<
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
>(
  options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
): UseSuspenseQueryResult<TData, TError> {
  return useQuery((() => ({
    ...options(),
    enabled: true,
    suspense: true,
    throwOnError: true,
    placeholderData: undefined,
    initialData: undefined,
  })) as Parameters<typeof useQuery>[0]) as unknown as UseSuspenseQueryResult<
    TData,
    TError
  >;
}
import type { DefaultError, OmitKeyof, QueryKey } from "@tanstack/query-core";
import {
  type SolidQueryOptions,
  type UseQueryResult,
  useQuery,
} from "@tanstack/solid-query";
import type { Accessor } from "solid-js";


type UseSuspenseQueryOptions<
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
> = Accessor<
  OmitKeyof<
    SolidQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
    "enabled" | "throwOnError" | "placeholderData" | "suspense"
  >
>;

type UseSuspenseQueryResult<TData = unknown, TError = DefaultError> = Omit<
  UseQueryResult<TData, TError>,
  "data" | "status" | "error" | "isError" | "isPending" | "isLoading"
> & {
  data: TData;
  status: "success";
  error: null;
  isError: false;
  isPending: false;
  isLoading: false;
};

export function useSuspenseQuery<
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
>(
  options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
): UseSuspenseQueryResult<TData, TError> {
  return useQuery((() => ({
    ...options(),
    enabled: true,
    suspense: true,
    throwOnError: true,
    placeholderData: undefined,
    initialData: undefined,
  })) as Parameters<typeof useQuery>[0]) as unknown as UseSuspenseQueryResult<
    TData,
    TError
  >;
}
feedback appreciated i dont recommend to use. it does not actually trigger suspension. JSDoc says on suspense field in query options 
@deprecated
The suspense option has been deprecated in v5 and will be removed in the next major version. The data property on useQuery is a SolidJS resource and will automatically suspend when the data is loading. Setting suspense to false will be a no-op.
@deprecated
The suspense option has been deprecated in v5 and will be removed in the next major version. The data property on useQuery is a SolidJS resource and will automatically suspend when the data is loading. Setting suspense to false will be a no-op.

Did you find this page helpful?