# Integrations

> Data fetching for every TanStack Query framework, React and Next.js, and the libraries tRPC works with.

The core client works anywhere ([The client](https://v12.trpc.io/docs/client/overview.md)). These pages cover the packages and recipes that fit it into a framework or a library.

## Data fetching

[TanStack Query](https://v12.trpc.io/docs/integrations/tanstack-query.md) is the stable way to fetch in a UI: `@trpc12/tanstack-query` makes query, mutation and subscription options, and a package per framework provides the client to components.

- Frameworks: [React](https://v12.trpc.io/docs/integrations/tanstack-query/react.md), [Preact](https://v12.trpc.io/docs/integrations/tanstack-query/preact.md), [Vue](https://v12.trpc.io/docs/integrations/tanstack-query/vue.md), [Solid](https://v12.trpc.io/docs/integrations/tanstack-query/solid.md), [Svelte](https://v12.trpc.io/docs/integrations/tanstack-query/svelte.md), [Angular](https://v12.trpc.io/docs/integrations/tanstack-query/angular.md) and [Lit](https://v12.trpc.io/docs/integrations/tanstack-query/lit.md).
- Topics: [query keys and filters](https://v12.trpc.io/docs/integrations/tanstack-query/keys.md), [subscriptions](https://v12.trpc.io/docs/integrations/tanstack-query/subscriptions.md), [streamed mutations](https://v12.trpc.io/docs/integrations/tanstack-query/streamed-mutations.md), [hydration and offline mutations](https://v12.trpc.io/docs/integrations/tanstack-query/hydration.md) and [TanStack DB](https://v12.trpc.io/docs/integrations/tanstack-query/tanstack-db.md).

## React and Next.js

[React and Next.js](https://v12.trpc.io/docs/integrations/react.md) compares the ways to fetch in React, and covers the server side:

- [React Server Components](https://v12.trpc.io/docs/integrations/rsc.md): prefetch in server components, stream pending queries to the browser, and tag Next's data cache by query key.
- [Server Actions](https://v12.trpc.io/docs/integrations/server-actions.md): procedures as Server Actions that take typed input or `FormData`.
- [React without TanStack Query](https://v12.trpc.io/docs/integrations/experimental-react.md): render-as-you-fetch with `use()` and Suspense, where cache features are links. Experimental.
- [React atoms](https://v12.trpc.io/docs/integrations/experimental-react-atom.md): query, mutation and subscription atoms on Effect Atom. Experimental.

## Libraries

- [AI SDK](https://v12.trpc.io/docs/integrations/ai-sdk.md): stream `useChat` responses from a procedure, and give procedures to the model as tools.
- [Better Auth](https://v12.trpc.io/docs/integrations/better-auth.md): read the session in a middleware and type `ctx.user` with Better Auth's user.
- [NestJS](https://v12.trpc.io/docs/integrations/nestjs.md): serve a contract from Nest controllers with `@trpc12/nest`.

For OpenAPI tools and REST clients, see [OpenAPI](https://v12.trpc.io/docs/openapi/overview.md).