# Using React Query with Next.js App Router and Supabase Cache Helpers

DevFeed: [Using React Query with Next.js App Router and Supabase Cache Helpers](<https://devfeed.tech/articles/using-react-query-with-next-js-app-router-and-supabase-cache-helpers-534.md>)

Original publisher: [Read original article](<https://supabase.com/blog/react-query-nextjs-app-router-cache-helpers>)

Author: Giancarlo Buomprisco; Philipp Steinrötter; Thor Schaeff

Published: 2024-01-12T07:00:00Z

Content type: tutorial

Language: en

Sources: [Supabase Blog](<https://devfeed.tech/sources/supabase-blog.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Next.js](<https://devfeed.tech/topics/next-js.md>), [Supabase](<https://devfeed.tech/topics/supabase.md>), [Cache](<https://devfeed.tech/topics/cache.md>), [Caching](<https://devfeed.tech/topics/caching.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [Databases](<https://devfeed.tech/topics/databases.md>), [API](<https://devfeed.tech/topics/api.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [article](<https://devfeed.tech/tags/article.md>), [cache](<https://devfeed.tech/tags/cache.md>), [caching](<https://devfeed.tech/tags/caching.md>), [database](<https://devfeed.tech/tags/database.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [react](<https://devfeed.tech/tags/react.md>), [typescript](<https://devfeed.tech/tags/typescript.md>)

## AI overview

A tutorial on using React Query, also known as TanStack Query, with Next.js App Router and Supabase. It covers caching, background updates, data fetching in client and server components, Supabase SSR helpers, cache helpers, database schema creation, and generated TypeScript types.

## Source excerpt

Learn how to use React Query in Next.js Client & Server Components for data fetching with Supabase.