Update the authentication guide to use useQuery within the AuthProvider context.

[Callumk7]

The guide on authentication implies that useServerFn has a similar api to useQuery:

export function AuthProvider({ children }: { children: ReactNode }) {
  const { data: user, isLoading, refetch } = useServerFn(getCurrentUserFn)

  return (
    <AuthContext.Provider value={{ user, isLoading, refetch }}>
      {children}
    </AuthContext.Provider>
  )
}

But this is not the correct return shape if the guide is followed; instead useServerFn will be returning a promise here. As such I have updated this component by wrapping the userServerFn with useQuery, to avoid any confusion.

I am not sure if this is deliberate sudo-code here - but I think this suggestion is correct for the example provided, and also aligns with the useage guide on using server functions in components: https://tanstack.com/start/latest/docs/framework/react/guide/server-functions#where-to-call-server-functions

Summary by CodeRabbit

• Documentation
  • Updated authentication guide to reflect improved data loading with enhanced support for caching, refetching, and loading state management in authentication flows.

[coderabbitai]

Walkthrough

A documentation example in the React authentication guide has been updated to demonstrate using TanStack Query's useQuery hook instead of directly calling useServerFn for fetching current user data, illustrating query-managed data loading.

Changes

Cohort / File(s)	Change Summary
React Authentication Guide Documentation docs/start/framework/react/guide/authentication.md	Updated code example to replace direct useServerFn(getCurrentUserFn) call with TanStack Query useQuery pattern, enabling query lifecycle management while maintaining the same returned values (user, isLoading, refetch).

Sequence Diagram(s)

sequenceDiagram
    participant AuthProvider
    participant useQuery as TanStack Query
    participant useServerFn as useServerFn
    participant Server

    rect rgb(200, 220, 255)
    Note over AuthProvider,Server: New Pattern with useQuery
    AuthProvider->>useQuery: useQuery({ queryKey, queryFn })
    useQuery->>useServerFn: call wrapped queryFn
    useServerFn->>Server: getCurrentUserFn()
    Server-->>useServerFn: user data
    useServerFn-->>useQuery: return data
    useQuery-->>AuthProvider: { data, isLoading, refetch }<br/>(+ cache, retry, stale time)
    end

Loading

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Verify the TanStack Query pattern accurately reflects current API and best practices
• Confirm the example maintains backward compatibility with the same interface shape

Poem

🐰 A query hopped into the docs so fine,
With caching and retries, now perfectly aligned,
No more bare calls, just structured delight,
TanStack's gentle touch makes auth feel right!
*~ CodeRabbit*

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "Update the authentication guide to use useQuery within the AuthProvider context" directly and accurately reflects the main change in the pull request. The changeset modifies the authentication guide example to replace a direct useServerFn call with a useQuery wrapper within the AuthProvider component. The title is concise, clear, and specific enough that a teammate scanning history would immediately understand the primary change without requiring additional context. It avoids vague terminology and accurately represents the documentation update being made.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

docs/start/framework/react/guide/authentication.md (1)

126-164: Consider adding a comment explaining the queryFn pattern.

The pattern queryFn: useServerFn(getCurrentUserFn) is noteworthy—it wraps the server function call. Adding a brief inline comment would help readers understand why useQuery is used here instead of calling useServerFn directly (i.e., for query caching, automatic refetching, and lifecycle management).

Consider this addition:

 export function AuthProvider({ children }: { children: ReactNode }) {
+  // useQuery wraps the server function to provide caching, refetch, and loading state management
   const { data: user, isLoading, refetch } = useQuery({
     queryKey: ["auth"],
     queryFn: useServerFn(getCurrentUserFn),
   })

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6a62499 and 658aa2c.

📒 Files selected for processing (1)

• docs/start/framework/react/guide/authentication.md (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

docs/**/*.{md,mdx}

📄 CodeRabbit inference engine (AGENTS.md)

Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)

Files:

• docs/start/framework/react/guide/authentication.md

docs/{router,start}/**

📄 CodeRabbit inference engine (AGENTS.md)

Place router docs under docs/router/ and start framework docs under docs/start/

Files:

• docs/start/framework/react/guide/authentication.md

🔇 Additional comments (1)

docs/start/framework/react/guide/authentication.md (1)

145-155: No issues found – the useQuery API usage is correct.

The project uses @tanstack/react-query v5.90.0, which returns properties including data, isLoading (derived from isPending && isFetching), and refetch. The code's destructuring of { data: user, isLoading, refetch } matches the actual v5.x return type and requires no changes.

Likely an incorrect or invalid review comment.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Missing useQuery import statement.

The example uses useQuery at line 146 but the code block doesn't import it. This will cause a runtime error for developers copying the example. Add the import at the top of the code block.

Apply this diff to add the missing import:

 // contexts/auth.tsx
 import { createContext, useContext, ReactNode } from 'react'
 import { useServerFn } from '@tanstack/react-start'
+import { useQuery } from '@tanstack/react-query'
 import { getCurrentUserFn } from '../server/auth'

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents

In docs/start/framework/react/guide/authentication.md around lines 146 to 149,
the example uses useQuery but does not import it; add an import for useQuery
from the React Query package (e.g., @tanstack/react-query) at the top of the
code block so the example runs without a runtime error.