useSuspenseQuery(...)

See the useSuspenseQuery(...) 🌴 documentation.

The Hook enables you to perform asynchronous data fetching operations, similar to useQuery Hook, but with the added benefit of Suspense support. See the TanStack useSuspenseQuery(...) 🌴 documentation for more details.

const result = qraft.<service>.<operation>.useSuspenseQuery(
  parameters,
  queryOptions,
  queryClient,
)

Arguments

1. parameters: { path, query, header } | QueryKey | {}

   • Required, OpenAPI request parameters for the query, strictly-typed ✨
   • parameters will be used to generate the QueryKey
   • Instead of an object with {path, query, header}, you can pass a QueryKey as an array which is also strictly-typed ✨
   • If operation does not require parameters, you must pass an empty object {} for strictness

2. queryOptions?: UseQueryOptions

   • Optional, represents the options of the useSuspenseQuery(...) 🌴 Hook
     • queryOptions.queryFn could be provided to override the default queryFn used by Qraft
     • queryOptions.queryKey is not allowed, as it will be generated from parameters

3. queryClient?: QueryClient

   • Optional QueryClient 🌴 to be used
   • If not provided
     • QraftContext.queryClient will be used if available
     • useQueryClient() 🌴 result will be used as a fallback

Returns

TData - the result from the query

Example

src/ApprovalPolicyName.tsx

import  { Suspense } from 'react';
import { createAPIClient } from './api'; // generated by OpenAPI Qraft CLI

const qraft = createAPIClient();

function ApprovalPolicyName() {
  /**
   * `<service>.<operation>.useSuspenseQuery(...)` initiates
   * the request for data retrieval:
   * ###
   * GET /approval_policies/321?items_order=asc&items_order=desc
   * x-monite-version: 1.0.0
   */
  const approvalPolicy =
    qraft.approvalPolicies.getApprovalPoliciesId.useSuspenseQuery(
      {
        header: {
          "x-monite-version": "1.0.0",
        },
        path: {
          approval_policy_id: "123",
        },
        query: {
          items_order: ["asc", "desc"],
        },
      },
    );

  return <div>Approval Policy: {approvalPolicy.name}</div>;
}

export default function() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ApprovalPolicyName />
    </Suspense>
  );
}