chore: use trpc queryOptions in example #1153
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
WalkthroughThe changes refactor the data-handling approach by replacing TRPC utilities and providers with the React Query library. In the application layout and components, TRPC’s context and hooks (like Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant HS as HomeScreen Component
participant QC as QueryClient
participant S as Server
U->>HS: Visit HomeScreen
HS->>QC: Call useQuery(trpc.getFiles.queryOptions())
QC->>S: Fetch file data
S-->>QC: Return files data
QC-->>HS: Deliver data
sequenceDiagram
participant U as User
participant FI as FileItem Component
participant QC as QueryClient
participant S as Server
U->>FI: Trigger delete file action
FI->>QC: Call useMutation(trpc.deleteFile.mutationOptions)
QC->>S: Execute delete file request
S-->>QC: Acknowledge deletion
QC-->>FI: Update cache data via setQueryData
FI->>QC: Invalidate queries (queryClient.invalidateQueries)
Suggested labels
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
Scope: all 3 workspace projects This error happened while installing a direct dependency of /tmp/eslint/packages/uploadthing Packages found in the workspace: 🪧 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 (
|
📦 Bundle size comparison
|
![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
🧹 Nitpick comments (2)
examples/minimal-expo/lib/trpc.tsx (2)
9-15: Defining a global QueryClient for the app.Centralizing the query client is a solid approach. If you foresee advanced features (like SSR, offline support, or caching strategies), ensure you configure the default options accordingly or conditionally override them. Otherwise, this looks good.
18-33: Constructing the TRPC proxy with a shared QueryClient.This approach neatly integrates TRPC with React Query by passing the
queryClient. The creation of the TRPC client is straightforward and should work seamlessly.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
examples/minimal-expo/app/_layout.tsx(3 hunks)examples/minimal-expo/app/index.tsx(3 hunks)examples/minimal-expo/components/file-item.tsx(2 hunks)examples/minimal-expo/components/upload-drawer.tsx(4 hunks)examples/minimal-expo/lib/trpc.tsx(1 hunks)examples/minimal-expo/package.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: bundle-analyze-result
- GitHub Check: e2e-node (backend-adapters)
- GitHub Check: build
🔇 Additional comments (10)
examples/minimal-expo/lib/trpc.tsx (2)
1-4: Imports look consistent with the new React Query integration.These additions align well with the planned shift to
@tanstack/react-queryand@trpc/tanstack-react-query. No immediate issues noted.
41-41: Refactoring resolveUrl into a function declaration.This change is stylistic but clear. The try-catch block is sufficient for runtime errors, so no issues there.
examples/minimal-expo/app/_layout.tsx (2)
5-15: Introducing QueryClientProvider and removing TRPCProvider.Replacing
TRPCProviderwithQueryClientProvideris consistent with the new data-fetching pattern. The import references to your exportedqueryClientare correctly set up.
19-35: Wrapping the app with QueryClientProvider.Providing the
queryClientat the root ensures all nested components access the same query context. Looks good for your shifted approach to React Query.examples/minimal-expo/app/index.tsx (3)
3-3: Swapping in React Query imports.Using
useQueryanduseQueryClientaligns perfectly with the new architecture.
12-13: Using the shared query client and query options.This pattern streamlines fetching while retaining type safety via
trpc.getFiles.queryOptions(). No immediate concerns.
38-40: Invalidating queries with React Query’s approach.Replacing
utils.getFiles.invalidate()withqueryClient.invalidateQueries(trpc.getFiles.queryFilter())is correct. Remember to handle error states or data staleness if it arises.examples/minimal-expo/components/file-item.tsx (1)
3-3: LGTM! Clean transition to React Query.The changes effectively migrate from TRPC to React Query while maintaining type safety through
trpc.deleteFile.mutationOptions. The cache management is properly handled with optimistic updates and invalidation.Also applies to: 21-34
examples/minimal-expo/components/upload-drawer.tsx (1)
8-8: LGTM! Consistent cache invalidation with React Query.The changes properly migrate cache invalidation from TRPC utils to React Query's queryClient, maintaining consistency across both image and PDF upload handlers.
Also applies to: 19-19, 30-30, 50-50
examples/minimal-expo/package.json (1)
19-21: LGTM! Dependencies are properly aligned.The TRPC packages are consistently updated to version 11.0.0-rc.772, and the new @trpc/tanstack-react-query package is added to support the migration to React Query.
Summary by CodeRabbit