From 34a016b4c21cb4e5075cd5ad031233230e77c191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thor=20=E9=9B=B7=E7=A5=9E=20Schaeff?= <5748289+thorwebdev@users.noreply.github.com> Date: Fri, 12 Jan 2024 18:30:48 +0800 Subject: [PATCH] feat(blog): Add React Query post. (#20254) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(blog): Add React Query post. * feat(examples): Add React Query example. * Apply suggestions from code review Thank you 💚 Co-authored-by: Philipp Steinrötter * chore: update og image. --------- Co-authored-by: Philipp Steinrötter --- ...-query-nextjs-app-router-cache-helpers.mdx | 341 ++ apps/www/lib/authors.json | 8 + .../react-query-nextjs-supabase.png | Bin 0 -> 86859 bytes .../.env.local.example | 3 + .../with-react-query-nextjs-14/.eslintrc.json | 3 + .../with-react-query-nextjs-14/.gitignore | 36 + .../with-react-query-nextjs-14/README.md | 36 + .../app/countries/[id]/page.tsx | 28 + .../app/favicon.ico | Bin 0 -> 25931 bytes .../app/globals.css | 27 + .../with-react-query-nextjs-14/app/layout.tsx | 25 + .../with-react-query-nextjs-14/app/page.tsx | 113 + .../app/ssrcountries/[id]/page.tsx | 30 + .../app/ssrcountries/country.tsx | 19 + .../components/ReactQueryClientProvider.tsx | 26 + .../with-react-query-nextjs-14/next.config.js | 4 + .../package-lock.json | 4656 +++++++++++++++++ .../with-react-query-nextjs-14/package.json | 31 + .../postcss.config.js | 6 + .../public/next.svg | 1 + .../public/vercel.svg | 1 + .../queries/get-country-by-id.ts | 15 + .../supabase/.gitignore | 4 + .../supabase/config.toml | 141 + .../20240108135434_remote_schema.sql | 4 + .../supabase/seed.sql | 6 + .../tailwind.config.ts | 20 + .../with-react-query-nextjs-14/tsconfig.json | 27 + .../utils/database.types.ts | 121 + .../utils/supabase-browser.ts | 25 + .../utils/supabase-server.ts | 19 + .../with-react-query-nextjs-14/utils/types.ts | 4 + 32 files changed, 5780 insertions(+) create mode 100644 apps/www/_blog/2024-01-12-react-query-nextjs-app-router-cache-helpers.mdx create mode 100644 apps/www/public/images/blog/2024-01-12-react-query/react-query-nextjs-supabase.png create mode 100644 examples/caching/with-react-query-nextjs-14/.env.local.example create mode 100644 examples/caching/with-react-query-nextjs-14/.eslintrc.json create mode 100644 examples/caching/with-react-query-nextjs-14/.gitignore create mode 100644 examples/caching/with-react-query-nextjs-14/README.md create mode 100644 examples/caching/with-react-query-nextjs-14/app/countries/[id]/page.tsx create mode 100644 examples/caching/with-react-query-nextjs-14/app/favicon.ico create mode 100644 examples/caching/with-react-query-nextjs-14/app/globals.css create mode 100644 examples/caching/with-react-query-nextjs-14/app/layout.tsx create mode 100644 examples/caching/with-react-query-nextjs-14/app/page.tsx create mode 100644 examples/caching/with-react-query-nextjs-14/app/ssrcountries/[id]/page.tsx create mode 100644 examples/caching/with-react-query-nextjs-14/app/ssrcountries/country.tsx create mode 100644 examples/caching/with-react-query-nextjs-14/components/ReactQueryClientProvider.tsx create mode 100644 examples/caching/with-react-query-nextjs-14/next.config.js create mode 100644 examples/caching/with-react-query-nextjs-14/package-lock.json create mode 100644 examples/caching/with-react-query-nextjs-14/package.json create mode 100644 examples/caching/with-react-query-nextjs-14/postcss.config.js create mode 100644 examples/caching/with-react-query-nextjs-14/public/next.svg create mode 100644 examples/caching/with-react-query-nextjs-14/public/vercel.svg create mode 100644 examples/caching/with-react-query-nextjs-14/queries/get-country-by-id.ts create mode 100644 examples/caching/with-react-query-nextjs-14/supabase/.gitignore create mode 100644 examples/caching/with-react-query-nextjs-14/supabase/config.toml create mode 100644 examples/caching/with-react-query-nextjs-14/supabase/migrations/20240108135434_remote_schema.sql create mode 100644 examples/caching/with-react-query-nextjs-14/supabase/seed.sql create mode 100644 examples/caching/with-react-query-nextjs-14/tailwind.config.ts create mode 100644 examples/caching/with-react-query-nextjs-14/tsconfig.json create mode 100644 examples/caching/with-react-query-nextjs-14/utils/database.types.ts create mode 100644 examples/caching/with-react-query-nextjs-14/utils/supabase-browser.ts create mode 100644 examples/caching/with-react-query-nextjs-14/utils/supabase-server.ts create mode 100644 examples/caching/with-react-query-nextjs-14/utils/types.ts diff --git a/apps/www/_blog/2024-01-12-react-query-nextjs-app-router-cache-helpers.mdx b/apps/www/_blog/2024-01-12-react-query-nextjs-app-router-cache-helpers.mdx new file mode 100644 index 00000000000..3d897524218 --- /dev/null +++ b/apps/www/_blog/2024-01-12-react-query-nextjs-app-router-cache-helpers.mdx @@ -0,0 +1,341 @@ +--- +title: 'Using React Query with Next.js App Router and Supabase Cache Helpers' +description: Learn how to use React Query in Next.js Client & Server Components for data fetching with Supabase. +categories: + - engineering +tags: + - react + - nextjs +date: '2024-01-12' +toc_depth: 3 +author: giancarlo,philipp,thor_schaeff +image: 2024-01-12-react-query/react-query-nextjs-supabase.png +thumb: 2024-01-12-react-query/react-query-nextjs-supabase.png +--- + +[TanStack Query](https://tanstack.com/query/latest), also known as React Query, is an open source state management library for React which handles caching, background updates and stale data out of the box with zero-configuration, which makes it an ideal tool to pair with [supabase-js](/docs/reference/javascript/introduction) and our auto-generated [REST API](/docs/guides/api)! + +If you prefer video guides, we've got a three-part video series for you! + +
+