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