---
url: >-
  https://openapi-typesafe.github.io/openapi-typesafe/react-query/use-suspense-query.md
description: Typed useSuspenseQuery for OpenAPI endpoints
---

# {{ $frontmatter.title }}

The `useSuspenseQuery` method allows you to use the original [useSuspenseQuery](https://tanstack.com/query/latest/docs/framework/react/guides/suspense).

* The result is the same as the original function.
* The query key is the one of [`useQuery`](./use-query): `[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](https://tanstack.com/query/latest/docs/framework/react/guides/suspense).
:::

## Example

::: code-group

```tsx [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>
  );
};
```

```ts [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

```tsx
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](https://tanstack.com/query/latest/docs/framework/react/guides/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](https://tanstack.com/query/latest/docs/framework/react/guides/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](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information.
* `queryOptions`
  * The original `useSuspenseQuery` options.
  * [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery)
* `queryClient`
  * The original `queryClient` option.
  * [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery)