> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/tanstack/query/llms.txt
> Use this file to discover all available pages before exploring further.

# Community Resources

> Discover articles, videos, utilities, and community projects built around TanStack Query

## Blog Articles

<CardGroup cols={1}>
  <Card title="TkDodo's Blog Posts" href="https://tkdodo.eu/blog/practical-react-query" icon="book">
    TkDodo, a maintainer of TanStack Query, writes a series of blog posts about the library. These articles offer general best practices and often present opinionated perspectives on using TanStack Query.
  </Card>
</CardGroup>

## Video Content

<CardGroup cols={2}>
  <Card title="React Query: Break up with Global State" href="https://www.youtube.com/watch?v=seU46c6Jz7E" icon="youtube">
    Get the lowdown on "global state" and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to. - Tanner Linsley
  </Card>

  <Card title="All About React Query" href="https://www.youtube.com/watch?v=DocXo3gqGdI" icon="youtube">
    Learn all about React Query with its creator Tanner Linsley on Learn With Jason.
  </Card>

  <Card title="Hooks for Fetching with ReactQuery" href="https://www.youtube.com/watch?v=PPvWXbSCtBU" icon="youtube">
    Learn how React Query simplifies asynchronous data fetching in React applications.
  </Card>

  <Card title="TanStack Query v4" href="https://www.youtube.com/watch?v=SPPQm0dvEes" icon="youtube">
    Dominik Dorfmeister covering TanStack Query v4 on Learn With Jason.
  </Card>

  <Card title="React Query Exposed" href="https://www.youtube.com/watch?v=8-RTNnn9GR8" icon="youtube">
    Dominik Dorfmeister explores the less favorable aspects of React Query and situations where it may not be the best fit.
  </Card>

  <Card title="React Query API Design: Lessons Learned" href="https://www.youtube.com/watch?v=l3PxErcKeAI" icon="youtube">
    Dominik Dorfmeister walks through some of the API design choices that were made in React Query.
  </Card>
</CardGroup>

## Utilities & Tools

### Code Generation & Type Safety

<CardGroup cols={2}>
  <Card title="GraphQL Code Generator" href="https://the-guild.dev/graphql/codegen" icon="code">
    Generate React Query hooks from your GraphQL schema with full type safety.
  </Card>

  <Card title="Orval" href="https://orval.dev/" icon="code">
    Generate TypeScript client from OpenAPI specifications, including TanStack Query hooks.
  </Card>

  <Card title="OpenAPI React Query Codegen" href="https://github.com/7nohe/openapi-react-query-codegen" icon="code">
    Generate TanStack Query hooks based on an OpenAPI specification file.
  </Card>

  <Card title="Hey API" href="https://heyapi.dev/openapi-ts/plugins/tanstack-query" icon="code">
    The OpenAPI to TypeScript codegen. Generate clients, SDKs, validators, and more.
  </Card>
</CardGroup>

### Developer Experience

<CardGroup cols={2}>
  <Card title="Query Key Factory" href="https://github.com/lukemorales/query-key-factory" icon="key">
    A library for creating typesafe standardized query keys, useful for cache management in @tanstack/query.
  </Card>

  <Card title="React Query Kit" href="https://github.com/liaoliao666/react-query-kit" icon="toolbox">
    A toolkit for ReactQuery that makes ReactQuery hooks reusable and typesafe.
  </Card>

  <Card title="React Query Rewind" href="https://reactqueryrewind.com/" icon="clock-rotate-left">
    Time travel and visualize state during development.
  </Card>

  <Card title="Suspensive React Query" href="https://suspensive.org/docs/react-query/motivation" icon="react">
    Enhances React Query with Suspense support, allowing for simpler and more declarative data fetching.
  </Card>
</CardGroup>

### Data Management

<CardGroup cols={2}>
  <Card title="batshit" href="https://github.com/yornaath/batshit" icon="layer-group">
    A batch manager that will deduplicate and batch requests for a certain data type made within a window.
  </Card>

  <Card title="Normy" href="https://github.com/klis87/normy" icon="database">
    Automatic normalization and data updates for data fetching libraries.
  </Card>
</CardGroup>

## End-to-End Type Safety

<CardGroup cols={2}>
  <Card title="tRPC" href="https://trpc.io/" icon="bolt">
    End-to-end typesafe APIs made easy. Built with TanStack Query integration.
  </Card>

  <Card title="Connect" href="https://connectrpc.com/docs" icon="plug">
    A family of libraries for building browser and gRPC-compatible HTTP APIs.
  </Card>

  <Card title="ts-rest" href="https://ts-rest.com/" icon="code">
    Incrementally adoptable type-safety for your new and existing APIs.
  </Card>

  <Card title="zodios" href="https://www.zodios.org/" icon="shield-check">
    End-to-end typesafe REST API toolbox with Zod validation.
  </Card>

  <Card title="oRPC" href="https://orpc.unnoq.com/docs/integrations/tanstack-query" icon="server">
    Easy to build APIs that are end-to-end type-safe and adhere to OpenAPI standards.
  </Card>
</CardGroup>

## Framework Integrations

<CardGroup cols={2}>
  <Card title="Blitz" href="https://blitzjs.com/" icon="bolt">
    The Missing Fullstack Toolkit for Next.js with built-in Query integration.
  </Card>

  <Card title="wagmi" href="https://wagmi.sh/" icon="ethereum">
    React Hooks for Ethereum based on @tanstack/react-query.
  </Card>

  <Card title="Kubb" href="https://www.kubb.dev/" icon="cube">
    Generate SDKs for all your APIs with TanStack Query support.
  </Card>
</CardGroup>

## Visualization & Debugging

<Card title="Tanstack Query Visualizer" href="https://tanstack-query-visualizer.sofi.coop/" icon="diagram-project">
  An interactive sandbox that visualizes the relationship between mutations and query keys.
</Card>

<Note>
  These resources are maintained by the community. If you have a project or resource to add, please contribute to the TanStack Query repository.
</Note>