SuspenseQuery.tsx

import { useQuery, UseQueryOptions } from "@tanstack/react-query";
import { type ReactNode } from "react";

interface SuspenseQuery<TData> {
  queryOption: UseQueryOptions<T>;
  fallback?: ReactNode;
  pending?: ReactNode;
  children: (data: TData) => ReactNode;
}

export function SuspenseQuery<TData>(props: SuspenseQuery<TData>) {
  const { isPending, error, data } = useQuery<TData>(props.queryOption);

  if (isPending && props.pending) {
    return props.pending;
  }

  if (!error && data) {
    return props.children(data);
  }

  return props.fallback;
}

import type { ReactNode } from "react";
import { useQuery, type QueryOptions } from "react-query";

export interface SuspenseQueryProps<TData> {
  queryOptions: QueryOptions<TData>;
  fallback?: ReactNode;
  loadingElement?: ReactNode;
  errorElement?: (error: unknown) => ReactNode;
  children: (data: TData) => ReactNode;
}

export function SuspenseQuery<TData>({
  children,
  errorElement,
  loadingElement,
  queryOptions,
  fallback,
}: SuspenseQueryProps<TData>) {
  const { isLoading, isError, error, data } = useQuery<TData>(queryOptions);

  if (isLoading) {
    return loadingElement;
  }

  if (isError || !data) {
    return errorElement && error ? errorElement(error) : fallback;
  }

  return children(data);
}