forked from imbytecat/fullstack-starter
refactor(client): 合并 orpc.ts 和 query-client.ts 为单文件,遵循 ORPC 官方模式
This commit is contained in:
@@ -54,8 +54,7 @@ bun test -t "pattern" # Run tests matching pattern
|
||||
```
|
||||
src/
|
||||
├── client/ # Client-side code
|
||||
│ ├── orpc.ts # ORPC isomorphic client (internal)
|
||||
│ └── query-client.ts # TanStack Query utils (used by components)
|
||||
│ └── orpc.ts # ORPC client + TanStack Query utils (single entry point)
|
||||
├── components/ # React components
|
||||
├── routes/ # TanStack Router file routes
|
||||
│ ├── __root.tsx # Root layout
|
||||
@@ -126,7 +125,7 @@ export const router = os.router({ feature })
|
||||
### 4. Use in Components
|
||||
```typescript
|
||||
import { useSuspenseQuery, useMutation } from '@tanstack/react-query'
|
||||
import { orpc } from '@/client/query-client'
|
||||
import { orpc } from '@/client/orpc'
|
||||
|
||||
const { data } = useSuspenseQuery(orpc.feature.list.queryOptions())
|
||||
const mutation = useMutation(orpc.feature.create.mutationOptions())
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createORPCClient } from '@orpc/client'
|
||||
import { RPCLink } from '@orpc/client/fetch'
|
||||
import { createRouterClient } from '@orpc/server'
|
||||
import { createTanstackQueryUtils } from '@orpc/tanstack-query'
|
||||
import { createIsomorphicFn } from '@tanstack/react-start'
|
||||
import { getRequestHeaders } from '@tanstack/react-start/server'
|
||||
import { router } from '@/server/api/routers'
|
||||
@@ -21,4 +22,32 @@ const getORPCClient = createIsomorphicFn()
|
||||
return createORPCClient<RouterClient>(link)
|
||||
})
|
||||
|
||||
export const orpc: RouterClient = getORPCClient()
|
||||
const client: RouterClient = getORPCClient()
|
||||
|
||||
export const orpc = createTanstackQueryUtils(client, {
|
||||
experimental_defaults: {
|
||||
todo: {
|
||||
create: {
|
||||
mutationOptions: {
|
||||
onSuccess: (_, __, ___, ctx) => {
|
||||
ctx.client.invalidateQueries({ queryKey: orpc.todo.list.key() })
|
||||
},
|
||||
},
|
||||
},
|
||||
update: {
|
||||
mutationOptions: {
|
||||
onSuccess: (_, __, ___, ctx) => {
|
||||
ctx.client.invalidateQueries({ queryKey: orpc.todo.list.key() })
|
||||
},
|
||||
},
|
||||
},
|
||||
remove: {
|
||||
mutationOptions: {
|
||||
onSuccess: (_, __, ___, ctx) => {
|
||||
ctx.client.invalidateQueries({ queryKey: orpc.todo.list.key() })
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import { createTanstackQueryUtils } from '@orpc/tanstack-query'
|
||||
import { orpc as client } from './orpc'
|
||||
|
||||
export const orpc = createTanstackQueryUtils(client, {
|
||||
experimental_defaults: {
|
||||
todo: {
|
||||
create: {
|
||||
mutationOptions: {
|
||||
onSuccess: (_, __, ___, ctx) => {
|
||||
ctx.client.invalidateQueries({ queryKey: orpc.todo.list.key() })
|
||||
},
|
||||
},
|
||||
},
|
||||
update: {
|
||||
mutationOptions: {
|
||||
onSuccess: (_, __, ___, ctx) => {
|
||||
ctx.client.invalidateQueries({ queryKey: orpc.todo.list.key() })
|
||||
},
|
||||
},
|
||||
},
|
||||
remove: {
|
||||
mutationOptions: {
|
||||
onSuccess: (_, __, ___, ctx) => {
|
||||
ctx.client.invalidateQueries({ queryKey: orpc.todo.list.key() })
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -2,7 +2,7 @@ import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import type { ChangeEventHandler, SubmitEventHandler } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { orpc } from '@/client/query-client'
|
||||
import { orpc } from '@/client/orpc'
|
||||
|
||||
export const Route = createFileRoute('/')({
|
||||
component: Todos,
|
||||
|
||||
Reference in New Issue
Block a user