React Query with Next.js App Router
Learn how to use TanStack Query[0] (fka React Query) with the new Next.js 14 App Router to manage data fetching from Supabase.
Supabase and Next.js 14: https://supabase.com/blog/supabase-is...
Read @gc_psk's blog post: https://makerkit.dev/blog/saas/supaba...
Presented by Thor Schaeff (@thorwebdev https://go.thor.bio/x)
[0] https://tanstack.com/query/latest
Chapters
00:00 Intro
00:42 Create a new Next.js app
01:45 Install the required dependencies
02:30 Create a React Query client provider in the root layout
04:30 Set up a client component for the query client provider
07:37 Create a Supabase client
10:55 Set up the environment variables
11:54 Create database types from a remote project
13:15 Import the types and provide them to the client
14:24 Create a hook to fetch data
15:30 Organizing queries in a query folder
19:50 Construct the React Query from supabase-js query
20:24 Use the query in a next.js page
23:44 Make env variables available in client components
24:28 Create Row Level security policy
25:23 Next time: Advanced Next.js Server Rendering (SSR)
