doc: notes about using context providers with RSC #408
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe pull request introduces enhancements to the documentation for the Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
docs/reference/plugins/tanstack-query.mdx (3)
186-209: Enhance RSC documentation with alternative approachesThe section accurately explains the RSC limitation and provides a good solution using a client component wrapper. However, it would be helpful to explicitly mention the alternative approach of using the
'use client'directive in the layout component, along with its trade-offs.Consider adding a note like:
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. +There are two approaches to handle this: +1. Create a separate client component for providers (recommended, as shown in the example below) +2. Convert the layout component to a client component by adding 'use client' directive + +The first approach is preferred as it maintains RSC benefits for the rest of your layout component.
Line range hint
583-589: Improve visibility and context of invalidation documentationWhile the information about automatic invalidation is accurate, its importance might be overlooked in the current info box placement.
Consider these improvements:
- Move this information higher up in the "Query Invalidation" section
- Add a brief example showing the default behavior in action:
The automatic invalidation is enabled by default, and you can use the `invalidateQueries` option to opt-out and handle revalidation by yourself. +For example: +```ts +// Queries are automatically invalidated (default behavior) +const { mutate: createPost } = useCreatePost(); + +// Opt-out of automatic invalidation +const { mutate: createPostManual } = useCreatePost({ invalidateQueries: false }); +```🧰 Tools
🪛 LanguageTool
[grammar] ~213-~213: It appears that a hyphen is missing in the noun “To-do” (= task) or did you mean the verb “to do”?
Context: ...ng app. You can find a fully functional Todo app example [here](https://github.com/z...(TO_DO_HYPHEN)
Line range hint
591-617: Add practical examples of query key usageThe query key documentation is clear and well-structured. However, it would be more helpful to include common use cases for query keys.
Consider adding examples like:
You can use the generated `getQueryKey` function to compute it. The query hooks also return the query key as part of the result object. ```ts const { data, queryKey } = useFindUniqueUser({ where: { id: '1' } });+Here are some common use cases for query keys:
+
+```ts
+// 1. Prefetching data
+const queryClient = useQueryClient();
+const queryKey = getQueryKey.findUniqueUser({ where: { id: '1' } });
+await queryClient.prefetchQuery({ queryKey, queryFn: () => fetchUser('1') });
+
+// 2. Manual cache invalidation
+queryClient.invalidateQueries({
- queryKey: ['zenstack', 'User'],
- exact: false // invalidate all User queries
+});+// 3. Accessing cached data
+const cachedUser = queryClient.getQueryData(queryKey);
+```<details> <summary>🧰 Tools</summary> <details> <summary>🪛 LanguageTool</summary> [grammar] ~213-~213: It appears that a hyphen is missing in the noun “To-do” (= task) or did you mean the verb “to do”? Context: ...ng app. You can find a fully functional Todo app example [here](https://github.com/z... (TO_DO_HYPHEN) </details> </details> </blockquote></details> </blockquote></details> <details> <summary>📜 Review details</summary> **Configuration used: CodeRabbit UI** **Review profile: CHILL** **Plan: Pro** <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 4a88ab4f9e98a0c3a8839ed67e91531f69f57be6 and 82c510dcd5cd5f3d6d86dcd78db69e4ab2b4fe39. </details> <details> <summary>📒 Files selected for processing (1)</summary> * `docs/reference/plugins/tanstack-query.mdx` (1 hunks) </details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
Summary by CodeRabbit
@zenstackhq/tanstack-queryplugin with Next.js, including context provider usage.