fetchQuery(...)

The method allows you to execute a Queries without React Hooks with the full power of QueryClient. To understand how fetchQuery handles data and cache management, refer to the TanStack queryClient.fetchQuery 🌴 documentation.

tip

fetchQuery is particularly useful for server-side data fetching (SSR). When used on the server, it automatically provides all the retry logic and caching capabilities inherent to TanStack Query. This makes it an excellent choice for efficient and robust server-side data retrieval, ensuring your application benefits from built-in error handling and performance optimizations.

const result = qraft.<service>.<operation>.fetchQuery(
  {
    parameters,
    requestFn,
    baseUrl,
    ...fetchQueryOptions,
  },
  queryClient
);

Arguments

1. • parameters: { path, query, header } | QueryKey | {}
     • Required, OpenAPI request parameters for the query, strictly-typed ✨
     • parameters will be used to generate the QueryKey
     • If operation does not require parameters, you must pass an empty object {} for strictness
     • requestFn: RequestFn
       • Optional, a function that will be used to execute the request
       • The function should be provided, otherwise it will throw an error if default queryFn is not set previously using QueryClient.setDefaultOptions(...) method
   • baseUrl: string
     • Required if requestFn is set, the base URL of the API
   • ...fetchQueryOptions?: FetchQueryOptions
     • Optional, represents the rest options of the fetchQuery(...) 🌴 method
       • queryOptions.queryFn could be provided instead of requestFn
       • queryOptions.queryKey could be provided instead of parameters

2. queryClient: QueryClient

   • Required QueryClient 🌴 to be used
   • If not provided
     • QraftContext.queryClient will be used if available
     • useQueryClient() 🌴 result will be used as a fallback

Returns

result: Promise<T> - The result of the query execution

Examples

With requestFn

/**
 * Will execute the request:
 * ###
 * GET /posts?limit=10
 **/
import { requestFn } from '@openapi-qraft/react';
import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

const posts = await qraft.posts.getPosts.fetchQuery(
  {
    parameters: { query: { limit: 10 } },
    /**
     * Request function should be provided, otherwise it will throw an error
     * if default `queryFn` is not set previously using
     * `QueryClient.setDefaultOptions(...)` method
     */
    requestFn: requestFn,
    baseUrl: 'https://api.sandbox.monite.com/v1', // must be provided if `requestFn` is set
  },
  queryClient
);

With queryFn

import { QueryClient } from '@tanstack/react-query';
import { myCustomQueryFn } from './myCustomQueryFn';

const queryClient = new QueryClient();

/**
 * Will execute the request:
 * ###
 * GET /posts?limit=10
 **/
const posts = await qraft.posts.getPosts.fetchQuery(
  {
    // ⬇︎ `queryKey` could be provided instead of `parameters`
    queryKey: qraft.posts.getPosts.getQueryKey({ query: { limit: 10 } }),
    // ⬇︎ `queryFn` could be provided instead of `requestFn`
    queryFn: myCustomQueryFn,
  },
  queryClient
);

With default queryFn

import { QueryClient } from '@tanstack/react-query';
import { myCustomQueryFn } from './myCustomQueryFn';

const queryClient = new QueryClient();

/**
 * Set default `queryFn` for the `getPosts` Queries
 */
queryClient.setQueryDefaults(
  qraft.posts.getPosts.fetchQuery.getQueryKey(),
  { queryFn: myCustomQueryFn } // `myCustomQueryFn` will be used for all `getPosts` Queries
);

/**
 * Will execute the request:
 * ###
 * GET /posts?limit=10
 **/
const posts = await qraft.posts.getPosts.fetchQuery(
  { parameters: { query: { limit: 10 } } },
  queryClient
);