useSuspenseQuery

The useSuspenseQuery method allows you to use the original useSuspenseQuery.

• The result is the same as the original function.
• The query key is the one of useQuery: [method, path, options], or [method, path] without options.
• data and error are fully typed.
• You can pass query options as fourth parameter.

TIP

You can find more information about useSuspenseQuery on the @tanstack/react-query documentation.

Example

src/app.tsx

import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { $api } from "./api";

const MyComponent = () => {
  const { data } = $api.useSuspenseQuery("get", "/users/{user_id}", {
    params: {
      path: { user_id: 5 },
    },
  });

  return <div>{data.firstname}</div>;
};

export const App = () => {
  return (
    <ErrorBoundary fallback="Could not load the user.">
      <Suspense fallback="Loading...">
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
};

src/api.ts

import createFetchClient from "openapi-typesafe-fetch";
import createClient from "openapi-typesafe-react-query";
import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typesafe

const fetchClient = createFetchClient<paths>({
  baseUrl: "https://myapi.dev/v1/",
});
export const $api = createClient(fetchClient);

Api

const query = $api.useSuspenseQuery(method, path, options, queryOptions, queryClient);

Arguments

• method (required)
  • The HTTP method to use for the request.
  • The method is used as key. See Query Keys for more information.
• path (required)
  • The pathname to use for the request.
  • Must be an available path for the given method in your schema.
  • The pathname is used as key. See Query Keys for more information.
• options
  • The fetch options to use for the request.
  • Only required if the OpenApi schema requires parameters.
  • The whole options object (params, headers, body and the rest) is part of the key. See Query Keys for more information.
• queryOptions
  • The original useSuspenseQuery options.
  • See more information
• queryClient
  • The original queryClient option.
  • See more information