useSuspenseQuery.mdx

sidebar_label	useSuspenseQuery()

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, body } | 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
   • For operations generated with --queryable-write-operations, query parameters may also include body
   • In that mode, body is part of the query key and cache identity for query hooks and query-client methods
   • Mutation calls keep body as a separate top-level argument
   • Instead of an object with { path, query, header, body }, you can pass a QueryKey as an array which is also strictly-typed ✨

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

:::tip By default, useSuspenseQuery hooks are only generated for read operations (GET method). If you want to use query hooks for write operations (POST, PUT, PATCH methods), use the --queryable-write-operations CLI option during code generation. :::

Example

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