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

Returns

UseQueryResult object, see the TanStack UseQueryResult 🌴

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

2. queryOptions?: UseQueryOptions

   • Optional, represents the options of the useQuery(...) 🌴 Hook
     • queryOptions.queryFn could be provided to override the default queryFn used by Qraft

Example

by parameters

src/ApprovalPolicyName.tsx

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>.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 } =
    api.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>;
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ApprovalPolicyName />
    </QueryClientProvider>
  );
}

by QueryKey

Using the Query Key (array) as an arguments for the useQuery is useful with combination of api.<service>.<operation>.getQueryKey(...) method when shared Query Key is needed.

src/ApprovalPolicyName.tsx

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>.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 } =
    api.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>;
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ApprovalPolicyName />
    </QueryClientProvider>
  );
}