useQuery(...)

The Hook enables you to perform asynchronous data fetching operations. It automatically handles loading states, caching, and data invalidation, significantly simplifying request in React. See the TanStack useQuery(...) 🌴 documentation for more details.

const query = qraft.<service>.<operation>.useQuery(
  parameters,
  queryOptions,
  queryClient,
)

Returns

UseQueryResult object, see the TanStack UseQueryResult 🌴

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 useQuery(...) 🌴 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

Example

by parameters

src/ApprovalPolicyName.tsx

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

const qraft = createAPIClient();

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

  if (isPending) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

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

by QueryKey

src/ApprovalPolicyName.tsx

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

const qraft = createAPIClient();

function ApprovalPolicyName() {
  /**
   * `<service>.<operation>.useQuery(...)` initiates the request to retrieve data:
   * ###
   * GET /approval_policies/123?items_order=asc&items_order=desc
   * x-monite-version: 2.0.0
   */
  const { data, error, isPending } =
    qraft.approvalPolicies.getApprovalPoliciesId.useQuery(
      [
        {
          method: "get",
          url: "/approval_policies/{approval_policy_id}",
        },
        {
          header: {
            "x-monite-version": "2.0.0",
          },
          path: {
            approval_policy_id: "321",
          },
          query: {
            items_order: ["asc", "desc"],
          },
        },
      ],
    );


  if (isPending) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

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