diff --git a/AGENTS.md b/AGENTS.md index 026180a..2cf19fd 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -190,7 +190,7 @@ export const myTable = pgTable('my_table', { ├── apps/ │ ├── server/ # TanStack Start fullstack app │ │ ├── src/ -│ │ │ ├── client/ # ORPC client, Query client +│ │ │ ├── client/ # ORPC client + TanStack Query utils │ │ │ ├── components/ │ │ │ ├── routes/ # File-based routing │ │ │ └── server/ # API layer + database diff --git a/apps/server/AGENTS.md b/apps/server/AGENTS.md index 0bbe1a6..8a45d16 100644 --- a/apps/server/AGENTS.md +++ b/apps/server/AGENTS.md @@ -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()) diff --git a/apps/server/src/client/orpc.ts b/apps/server/src/client/orpc.ts index 69924fe..6b9abab 100644 --- a/apps/server/src/client/orpc.ts +++ b/apps/server/src/client/orpc.ts @@ -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(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() }) + }, + }, + }, + }, + }, +}) diff --git a/apps/server/src/client/query-client.ts b/apps/server/src/client/query-client.ts deleted file mode 100644 index fea2f07..0000000 --- a/apps/server/src/client/query-client.ts +++ /dev/null @@ -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() }) - }, - }, - }, - }, - }, -}) diff --git a/apps/server/src/routes/index.tsx b/apps/server/src/routes/index.tsx index 30ebef1..c6549d3 100644 --- a/apps/server/src/routes/index.tsx +++ b/apps/server/src/routes/index.tsx @@ -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,