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 = api.<service>.<operation>.useSuspenseQuery(
  parameters,
  queryOptions
)

Arguments

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

   • Required only if OpenAPI specification defines required parameters
   • If the operation has no required parameters according to OpenAPI, you can omit this argument
   • 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

Returns

TData - the result from the query

Example

src/ApprovalPolicyName.tsx

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

import { requestFn } from '@openapi-qraft/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

const api = createAPIClient({
  requestFn,
  queryClient,
  baseUrl: 'https://api.sandbox.monite.com/v1',
});

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 =
    api.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 (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<div>Loading...</div>}>
        <ApprovalPolicyName />
      </Suspense>
    </QueryClientProvider>
  );
}