useSuspenseQueries(...)

See the useSuspenseQueries(...) 🌴 documentation.

The Hook enables you to concurrently execute multiple asynchronous data fetching operations. The functionality is similar to the useQueries hook, but with the added benefit of Suspense support. For more detailed information, explore the TanStack useSuspenseQueries(...) 🌴 documentation.

const result = api.<service>.<operation>.useSuspenseQueries(
  options
)

Arguments

1. options: UseQueriesOptions
   • Required, represents the options for queries, see useSuspenseQueries(...) 🌴 documentation
   • options.queries: QueryOptions[]
     • Required array of Queries to be executed
     • parameters: { path, query, header } will be used for the request
     • queryKey: QueryKey will be used for the request instead of the parameters
       • queryKey and parameters are mutually exclusive
   • options.combine?: (result: UseQueriesResults) => TCombinedResult
     • Optional, a function to select the data from the mutation

Returns

Array with all the query results. The order returned is the same as the input order.

Example

src/Entities.tsx

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

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 Entities() {
  /**
   * Initiates two GET requests for entity details:
   * ###
   * GET /entities/3e3e-3e3e-3e3e
   * x-monite-version: 2023-09-01
   * ###
   * GET /entities/5c5c-5c5c-5c5c
   * x-monite-version: 2023-09-01
   **/
  const entities = api.entities.getEntities.useSuspenseQueries({
    queries: [
      {
        parameters: {
          header: {
            'x-monite-version': '2023-09-01',
          },
          path: {
            entity_id: '3e3e-3e3e-3e3e',
          },
        },
      },
      {
        parameters: {
          header: {
            'x-monite-version': '2023-09-01',
          },
          path: {
            entity_id: '5c5c-5c5c-5c5c',
          },
        },
      },
    ],
    combine: (results) => results.map((result) => result.data),
  });

  return (
    <p>
      {entities.map(({id}) => id).join(', ')}
    </p>
  )
}

export default function() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<div>Loading...</div>}>
        <Entities />
      </Suspense>
    </QueryClientProvider>
  )
}