From 82c510dcd5cd5f3d6d86dcd78db69e4ab2b4fe39 Mon Sep 17 00:00:00 2001
From: ymc9 <104139426+ymc9@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:54:28 +0800
Subject: [PATCH] doc: notes about using context providers with RSC

---
 docs/reference/plugins/tanstack-query.mdx | 25 +++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/docs/reference/plugins/tanstack-query.mdx b/docs/reference/plugins/tanstack-query.mdx
index d443b79b..a35ff848 100644
--- a/docs/reference/plugins/tanstack-query.mdx
+++ b/docs/reference/plugins/tanstack-query.mdx
@@ -183,6 +183,31 @@ provideHooksContext({
 
 </Tabs>
 
+:::info Notes about Next.js app router
+
+Next.js's app router renders components as React Server Components (RSC) by default. React context providers are not supported in RSC. If you're configuring the context providers in such a setup, please make sure to wrap them inside a client component, or set the containing layout as client component.
+
+```tsx title='providers.tsx'
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Provider as ZenStackHooksProvider } from "@/hooks/generated";
+import type { ReactNode } from 'react';
+
+const queryClient = new QueryClient();
+
+export default function Providers({ children }: { children: ReactNode }) {
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ZenStackHooksProvider value={{ endpoint: '/api/model' }}>
+                {children}
+            </ZenStackHooksProvider>
+        </QueryClientProvider>
+    );
+}
+```
+:::
+
 ### Example
 
 Here's a quick example with a ReactJs blogging app. You can find a fully functional Todo app example [here](https://github.com/zenstackhq/sample-todo-nextjs-tanstack).