From 3775e4e50a84f8802adb61128f6d0fd2380bd896 Mon Sep 17 00:00:00 2001 From: JohnBakhmat Date: Mon, 16 Jan 2023 23:39:56 +0300 Subject: [PATCH] docs(ru): ru translation update (#1089) * docs(ru): update docker.md * docs(ru): update vercel * docs(ru): next-auth update * docs(ru): update prisma * docs(ru): faq update * docs(ru): t3 collection update * docs(ru): folder-structure update * docs(ru): trpc update * docs(ru): Fixed netlify page not being shown * Apply suggestions from Ronan's code review Co-authored-by: Matvey Ryabchikov <35634442+ronanru@users.noreply.github.com> * Apply Amadeus's suggestions from code review Co-authored-by: Maxim Valiantsiuk * docs(ru): fixed prettier breaking the list Co-authored-by: Matvey Ryabchikov <35634442+ronanru@users.noreply.github.com> Co-authored-by: Maxim Valiantsiuk --- www/src/config.ts | 1 + www/src/pages/ru/deployment/docker.md | 1 + www/src/pages/ru/deployment/vercel.md | 2 +- www/src/pages/ru/faq.md | 6 +-- www/src/pages/ru/folder-structure.mdx | 57 +++++++++--------------- www/src/pages/ru/t3-collection.md | 1 + www/src/pages/ru/usage/next-auth.md | 34 +++++++++++--- www/src/pages/ru/usage/prisma.md | 2 +- www/src/pages/ru/usage/trpc.md | 64 +++++++++++++++------------ 9 files changed, 92 insertions(+), 76 deletions(-) diff --git a/www/src/config.ts b/www/src/config.ts index 71e7bac261..2f6a203989 100644 --- a/www/src/config.ts +++ b/www/src/config.ts @@ -246,6 +246,7 @@ export const SIDEBAR: Sidebar = { Deployment: [ { text: "Vercel", link: "ru/deployment/vercel" }, { text: "Docker", link: "ru/deployment/docker" }, + { text: "Netlify", link: "ru/deployment/netlify" }, ], }, no: { diff --git a/www/src/pages/ru/deployment/docker.md b/www/src/pages/ru/deployment/docker.md index 823c345e73..bd7e30ac3e 100644 --- a/www/src/pages/ru/deployment/docker.md +++ b/www/src/pages/ru/deployment/docker.md @@ -130,6 +130,7 @@ CMD ["node", "server.js"] > > - _Эмуляция `--platform=linux/amd64` может не быть необходимой после перехода на Node 18._ > - _Посмотрите [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) чтобы понять, почему `libc6-compat` может быть необходим._ +> - _Использование образов, основанных на Alpine 3.17 [может привести к проблемам с Prisma](https://github.com/t3-oss/create-t3-app/issues/975). Установка `engineType = "binary"` решает проблему с Alpine 3.17, [но имеет связанные с этим затраты производительности](https://www.prisma.io/docs/concepts/components/prisma-engines/query-engine#the-query-engine-at-runtime)._ > - _Next.js собирает [анонимные данные о телеметрии общего использования](https://nextjs.org/telemetry). Раскомментируйте первый экземпляр `ENV NEXT_TELEMETRY_DISABLED 1`, чтобы отключить телеметрию во время сборки. Раскомментируйте второй экземпляр, чтобы отключить телеметрию во время выполнения._ diff --git a/www/src/pages/ru/deployment/vercel.md b/www/src/pages/ru/deployment/vercel.md index 7f065337e7..3e1351d902 100644 --- a/www/src/pages/ru/deployment/vercel.md +++ b/www/src/pages/ru/deployment/vercel.md @@ -9,7 +9,7 @@ lang: ru ## Конфигурация проекта -Скорее всего Vercel настроит вашу команду сборки и каталог публикации автоматически. Однако вы также можете уточнить эту информацию вместе с другими конфигурациями, создав файл [`vercel.json`](https://vercel.com/docs/project-configuration) и включив в него следующие команды: +Скорее всего Vercel настроит вашу команду сборки и каталог публикации автоматически. Однако вы также можете уточнить эту информацию вместе с другими конфигурациями, создав файл [`vercel.json`](https://vercel.com/docs/project-configuration) и включив в него следующие команды. **В большинстве проектов это делать необязательно.** ```json { diff --git a/www/src/pages/ru/faq.md b/www/src/pages/ru/faq.md index 5ce2049237..9c359d0b45 100644 --- a/www/src/pages/ru/faq.md +++ b/www/src/pages/ru/faq.md @@ -29,8 +29,8 @@ lang: ru ### Статьи -- [Build a full stack app with create-t3-app](https://www.nexxel.dev/blog/ct3a-guestbook) -- [A first look at create-t3-app](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f) +- [Build a full stack app with Create T3 App](https://www.nexxel.dev/blog/ct3a-guestbook) +- [A first look at Create T3 App](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f) - [Migrating your T3 App into a Turborepo](https://www.jumr.dev/blog/t3-turbo) - [Integrating Stripe into your T3 App](https://blog.nickramkissoon.com/posts/integrate-stripe-t3) @@ -40,7 +40,7 @@ lang: ru - [Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod](https://www.youtube.com/watch?v=syEWlxVFUrY) - [Build a Live Chat Application with the T3 Stack - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk) - [The T3 Stack - How We Built It](https://www.youtube.com/watch?v=H-FXwnEjSsI) -- [An overview of the create T3 App (Next, Typescript, Tailwind, tRPC, Next-Auth)](https://www.youtube.com/watch?v=VJH8dsPtbeU) +- [An overview of the Create T3 App (Next, Typescript, Tailwind, tRPC, Next-Auth)](https://www.youtube.com/watch?v=VJH8dsPtbeU) ## Почему в проекте есть файлы `.js`? diff --git a/www/src/pages/ru/folder-structure.mdx b/www/src/pages/ru/folder-structure.mdx index 5c25a45d67..74b36c8b6e 100644 --- a/www/src/pages/ru/folder-structure.mdx +++ b/www/src/pages/ru/folder-structure.mdx @@ -63,7 +63,7 @@ import Diagram from "../../components/docs/folderStructureDiagram.astro"; Файл `[trpc].ts` - это точка входа tRPC API. Он используется для обработки запросов tRPC. Смотрите [Использование tRPC](/ru/usage/trpc#-pagesapitrpctrpcts) для получения дополнительной информации об этом файле и [документацию Next.js о динамических маршрутах](https://nextjs.org/docs/routing/dynamic-routes) для получения информации о маршрутах catch-all/slug. -
+
### `src/server` @@ -72,72 +72,57 @@ import Diagram from "../../components/docs/folderStructureDiagram.astro";
-### `src/server/common` +#### `src/server/auth.ts` -Папка `common` содержит общий код, используемый на стороне сервера. - -
-
- -#### `src/server/common/get-server-auth-session.ts` - -Файл `get-server-auth-session.ts` используется для получения сеанса NextAuth.js на стороне сервера. Смотрите [Использование NextAuth.js](/ru/usage/next-auth#usage-with-trpc) для получения дополнительной информации. +Содержит утилиты для аутентификации, такие как получение сеанса пользователя на стороне сервера. Смотрите [Использование NextAuth.js](/ru/usage/next-auth#usage-with-trpc) для получения дополнительной информации.
-#### `src/server/db/client.ts` +#### `src/server/db.ts` -Файл `client.ts` используется для создания экземпляра клиента Prisma в глобальной области видимости. Смотрите [Использование Prisma](/ru/usage/prisma#prisma-client) для получения дополнительной информации. +Файл `db.ts` используется для создания клиента Prisma на глобальном уровне. Смотрите [Использование Prisma](/ru/usage/prisma#prisma-client) и [лучшие практики по использованию Prisma с Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) для получения дополнительной информации.
-### `src/server/trpc` +### `src/server/api` -Папка `trpc` содержит серверный код tRPC. +Папка `api` содержит серверный код tRPC.
-#### `src/server/trpc/context.ts` +#### `src/server/api/routers` -Файл `context.ts` используется для создания контекста, используемого в запросах tRPC. Смотрите [Использование tRPC](/ru/usage/trpc#-servertrpccontextts) для получения дополнительной информации. +Папка `routers` содержит все ваши под-маршрутизаторы tRPC.
-#### `src/server/trpc/trpc.ts` - -Файл `trpc.ts` используется для экспорта помощников процедур. Смотрите [Использование tRPC](/ru/usage/trpc#-servertrpctrpcts) для получения дополнительной информации. - -
-
+#### `src/server/api/routers/example.ts` -### `src/server/trpc/router` +Файл `example.ts` - это пример маршрутизатора tRPC, использующий вспомогательную функцию `publicProcedure` для демонстрации того, как создать публичный маршрут tRPC. -Папка `router` содержит маршрутизаторы tRPC. +Основываясь на выбранных вами пакетах, этот маршрутизатор содержит больше или меньше маршрутов для лучшего демонстрирования использования ваших потребностей.
-#### `src/server/trpc/router/_app.ts` +#### `src/server/api/trpc.ts` -Файл `_app.ts` используется для объединения маршрутизаторов tRPC и экспорта их в виде единого маршрутизатора, а также определений типов. Смотрите [Использование tRPC](/ru/usage/trpc#-servertrpcrouterts) для получения дополнительной информации. +Файл `trpc.ts` - это основной файл конфигурации для вашего tRPC-бэкэнда. В нем мы: -
-
- -#### `src/server/trpc/router/auth.ts` - -Файл `auth.ts` является примером маршрутизатора tRPC, использующего вспомогательную функцию `protectedProcedure` для демонстрации защиты маршрута tRPC с помощью NextAuth.js. +1. Определяем контекст используемый в запросах tRPC. Смотрите [Использование tRPC](/ru/usage/trpc#-servertrpccontextts) для получения дополнительной информации. +2. Экспортируем вспомогательные функции процедур. Смотрите [Использование tRPC](/ru/usage/trpc#-servertrpctrpcts) для получения дополнительной информации.
+
-#### `src/server/trpc/router/example.ts` +#### `src/server/api/root.ts` -Файл `example.ts` является примером маршрутизатора tRPC, использующего вспомогательую функцию `publicProcedure` для демонстрации создания публичного маршрута tRPC. +Файл `root.ts` используется для слияния маршрутизаторов tRPC и экспорта их как единого маршрутизатора, а также определения типа маршрутизатора. Смотрите [Использование tRPC](/ru/usage/trpc#-servertrpcrouterts) для получения дополнительной информации.
@@ -170,9 +155,9 @@ import Diagram from "../../components/docs/folderStructureDiagram.astro";
-#### `src/utils/trpc.ts` +#### `src/utils/api.ts` -Файл `trpc.ts` является точкой входа для tRPC на стороне клиента. Смотрите [Использование tRPC](/ru/usage/trpc#-utilstrpcts) для получения дополнительной информации. +Файл `api.ts` является точкой входа для tRPC на стороне клиента. Смотрите [Использование tRPC](/ru/usage/trpc#-utilstrpcts) для получения дополнительной информации.
diff --git a/www/src/pages/ru/t3-collection.md b/www/src/pages/ru/t3-collection.md index 538dc748e2..e45abd0330 100644 --- a/www/src/pages/ru/t3-collection.md +++ b/www/src/pages/ru/t3-collection.md @@ -27,6 +27,7 @@ lang: ru | KARA Shop - Ecommerce website | [mehrabmp/kara-shop](https://github.com/mehrabmp/kara-shop) | [karashop.vercel.app](https://karashop.vercel.app/) | | Tauri T3 App - Tauri App using T3 Stack | [tauri-t3-app](https://github.com/AyanavaKarmakar/tauri-t3-app) | [tauri-t3-app.docs](https://github.com/AyanavaKarmakar/tauri-t3-app#readme) | | Azon - E-Commerce website | [andrewsolonets/Azon-Shop](https://github.com/andrewsolonets/Azon-Shop) | [azon-shop.vercel.app](https://azon-shop.vercel.app/) | +| Analyzemyrepo.com - Useful insights for **any** GitHub repo | [CrowdDotDev/analyzemyrepo](https://github.com/CrowdDotDev/analyzemyrepo) | [analyzemyrepo.com](https://analyzemyrepo.com) | ## Компании использующие T3 стек diff --git a/www/src/pages/ru/usage/next-auth.md b/www/src/pages/ru/usage/next-auth.md index 40cecf771f..22fa987da3 100644 --- a/www/src/pages/ru/usage/next-auth.md +++ b/www/src/pages/ru/usage/next-auth.md @@ -34,6 +34,29 @@ const User = () => { }; ``` +## Получение сессии на сервере + +Иногда вам может понадобиться запросить сессию на сервере. Чтобы сделать это, предварительно получите сессию с помощью функции-помощника `getServerAuthSession`, которую предоставляет `create-t3-app`, и передайте ее на клиент с помощью `getServerSideProps`: + +```tsx:pages/users/[id].tsx +import { getServerAuthSession } from "../server/auth"; +import type { GetServerSideProps } from "next"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const session = await getServerAuthSession(ctx); + return { + props: { session }, + }; +}; + +const User = () => { + const { data: session } = useSession(); + // NOTE: `session` wont have a loading state since it's already prefetched on the server + + ... +} +``` + ## Включение `user.id` в сессию `create-t3-app` настроен для использования [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) в конфигурации NextAuth.js для включения ID пользователя в объект `session`. @@ -73,7 +96,7 @@ declare module "next-auth" { 1. Возьмите сессию из заголовков запроса с помощью функции [`unstable_getServerSession`](https://next-auth.js.org/configuration/nextjs#unstable_getserversession). Не беспокойтесь, эта функция безопасна для использования - имя включает `unstable` только потому, что реализация API может измениться в будущем. Преимущество использования `unstable_getServerSession` вместо обычного `getSession` заключается в том, что это server-side функция и она не вызывает ненужных вызовов fetch. `create-t3-app` создает вспомогательную функцию, которая абстрагирует этот особый API. -```ts:server/common/get-server-auth-session.ts +```ts:server/auth.ts export const getServerAuthSession = async (ctx: { req: GetServerSidePropsContext["req"]; res: GetServerSidePropsContext["res"]; @@ -84,8 +107,8 @@ export const getServerAuthSession = async (ctx: { Используя эту вспомогательную функцию, мы можем получить сессию и передать ее в контекст tRPC: -```ts:server/trpc/context.ts -import { getServerAuthSession } from "../common/get-server-auth-session"; +```ts:server/api/trpc.ts +import { getServerAuthSession } from "../auth"; export const createContext = async (opts: CreateNextContextOptions) => { const { req, res } = opts; @@ -98,7 +121,7 @@ export const createContext = async (opts: CreateNextContextOptions) => { 2. Создайте tRPC middleware, которое проверяет, аутентифицирован ли пользователь. Затем мы используем middleware в `protectedProcedure`. Любой вызывающий эти процедуры должен быть аутентифицирован, иначе будет сгенерирована ошибка, которую можно правильно обработать на стороне клиента. -```ts:server/trpc/trpc.ts +```ts:server/api/trpc.ts const isAuthed = t.middleware(({ ctx, next }) => { if (!ctx.session || !ctx.session.user) { throw new TRPCError({ code: "UNAUTHORIZED" }); @@ -116,7 +139,7 @@ export const protectedProcedure = t.procedure.use(isAuthed); Обект сессии - это легкое, минимальное представление пользователя и содержит только несколько полей. При использовании `protectedProcedures` у вас есть доступ к идентификатору пользователя, который можно использовать для получения большего количества данных из базы данных. -```ts:server/trpc/router/user.ts +```ts:server/api/routers/user.ts const userRouter = router({ me: protectedProcedure.query(async ({ ctx }) => { const user = await prisma.user.findUnique({ @@ -164,7 +187,6 @@ const userRouter = router({ - Возле Client Secret нажмите "Reset Secret" и скопируйте эту строку в `DISCORD_CLIENT_SECRET` в `.env`. Будьте осторожны, поскольку вы больше не сможете увидеть этот секрет, и сброс его приведет к тому, что существующий истечет. - Нажмите "Add Redirect" и вставьте `/api/auth/callback/discord` (пример для локальной разработки: http://localhost:3000/api/auth/callback/discord) - Сохраните изменения -- It is possible, but not recommended, to use the same Discord Application for both development and production. You could also consider [Mocking the Provider](https://github.com/trpc/trpc/blob/next/examples/next-prisma-starter-websockets/src/pages/api/auth/%5B...nextauth%5D.ts) during development. - Возможно, но не рекомендуется, использовать одно и то же приложение Discord для разработки и продакшена. Вы также можете рассмотреть [Mocking the Provider](https://github.com/trpc/trpc/blob/next/examples/next-prisma-starter-websockets/src/pages/api/auth/%5B...nextauth%5D.ts) во время разработки. ## Полезные ресурсы diff --git a/www/src/pages/ru/usage/prisma.md b/www/src/pages/ru/usage/prisma.md index ecff1b6a2d..c4fe668b91 100644 --- a/www/src/pages/ru/usage/prisma.md +++ b/www/src/pages/ru/usage/prisma.md @@ -39,7 +39,7 @@ Prisma это ORM для TypeScript, который позволяет опре ``` ```ts:prisma/seed.ts -import { prisma } from "../src/server/db/client"; +import { prisma } from "../src/server/db"; async function main() { const id = "cl9ebqhxk00003b600tymydho"; diff --git a/www/src/pages/ru/usage/trpc.md b/www/src/pages/ru/usage/trpc.md index 3d80447072..19afa5dff0 100644 --- a/www/src/pages/ru/usage/trpc.md +++ b/www/src/pages/ru/usage/trpc.md @@ -16,7 +16,7 @@ tRPC позволяет нам писать типобезопасные API о Avatar of @alexdotjs
@@ -41,24 +41,29 @@ tRPC требует много шаблонного кода, который `cr Этот файл является точкой входа для вашего API и экспортирует ваш tRPC роутер. Обычно, вам не придется трогать этот файл, но если вам нужно, например, включить CORS middleware или что то подобное, полезно знать, что экспортируемый `createNextApiHandler` - это [Next.js API handler](https://nextjs.org/docs/api-routes/introduction) который принимает [request](https://developer.mozilla.org/en-US/docs/Web/API/Request) и [response](https://developer.mozilla.org/en-US/docs/Web/API/Response) объект. Это означает, что вы можете обернуть `createNextApiHandler` в любой middleware, который вам нужен. См. ниже для [примера](#enabling-cors) добавления CORS. -### 📄 `server/trpc/context.ts` +### 📄 `server/api/trpc.ts` -Этот файл - это то место, где вы определяете контекст, который передается вашим tRPC процедурам. Контекст - это данные, к которым у вас есть доступ во всех ваших tRPC процедурах, и это отличное место, чтобы поместить вещи, такие как соединения с базой данных, информация об аутентификации и т.д. В create-t3-app мы используем две функции, чтобы включить использование подмножества контекста, когда у нас нет доступа к объекту запроса. +Этот файл разделен на две части: создание контекста и инициализация tRPC. -- `createContextInner`: Это то место, где вы определяете контекст, который не зависит от запроса, например, ваше соединение с базой данных. Вы можете использовать эту функцию для [интеграционного тестирования](#sample-integration-test) или [ssg-помощников](https://trpc.io/docs/v10/ssg-helpers), где у вас нет объекта запроса. -- `createContext`: Это то место, где вы определяете контекст, который зависит от запроса, например, сессия пользователя. Вы запрашиваете сессию с помощью объекта `opts.req`, а затем передаете сессию в функцию `createContextInner` для создания окончательного контекста. +1. Мы определяем контекст, который передается вашим tRPC процедурам. Контекст - это данные, к которым у вас есть доступ во всех ваших tRPC процедурах, и это отличное место, чтобы поместить вещи, такие как соединения с базой данных, информация об аутентификации и т.д. В create-t3-app мы используем две функции, чтобы включить использование подмножества контекста, когда у нас нет доступа к объекту запроса. -### 📄 `server/trpc/trpc.ts` +- `createInnerTRPCContext`: Это то место, где вы определяете контекст, который не зависит от запроса, например, ваше соединение с базой данных. Вы можете использовать эту функцию для [интеграционного тестирования](#sample-integration-test) или [ssg-помощников](https://trpc.io/docs/v10/ssg-helpers), где у вас нет объекта запроса. -Это то место где вы инициализируете tRPC и определяете повторно используемые [процедуры](https://trpc.io/docs/v10/procedures) и [посредники](https://trpc.io/docs/v10/middlewares). По соглашению, вы не должны экспортировать весь объект `t`, а вместо этого создавать повторно используемые процедуры и посредники и экспортировать их. +- `createTRPCContext`: Здесь вы определяете контекст, который зависит от запроса: например, сессия пользователя. Вы запрашиваете сессию с помощью объекта `opts.req`, а затем передаете сессию в функцию `createInnerTRPCContext` для создания окончательного контекста. + +2. Мы инициализируем tRPC и определяем повторно используемые [процедуры](https://trpc.io/docs/v10/procedures) и [посредники](https://trpc.io/docs/v10/middlewares). По соглашению, вы не должны экспортировать весь объект `t`, а вместо этого создавать повторно используемые процедуры и посредники и экспортировать их. Вы заметите что мы используем `superjson` как [преобразователь данных](https://trpc.io/docs/v10/data-transformers). Это позволяет сохранять типы данных, когда они достигают клиента, поэтому если вы, например, отправляете объект `Date`, клиент вернет `Date`, а не строку, что является случаем для большинства API. -### 📄 `server/trpc/router/*.ts` +### 📄 `server/api/routers/*.ts` + +Это то место, где вы определяете маршруты и процедуры вашего API. Вы [создаете отдельные маршрутизаторы](https://trpc.io/docs/v10/router) для связанных процедур. + +### 📄 `server/api/root.ts` -Это то место, где вы определяете маршруты и процедуры вашего API. Вы [создаете отдельные маршрутизаторы](https://trpc.io/docs/v10/router) для связанных процедур, а затем [сливаете](https://trpc.io/docs/v10/merging-routers) все их в единый маршрутизатор приложения в `server/trpc/router/_app.ts`. +Здесь мы [объединяем](https://trpc.io/docs/v10/merging-routers) все под-маршрутизаторы, определенные в `routers/**` в единый маршрутизатор приложения. -### 📄 `utils/trpc.ts` +### 📄 `utils/api.ts` Это точка входа для tRPC на фронтенде. Здесь вы импортируете **определение типов** маршрутизатора и создаете клиент tRPC вместе с хуками react-query. Поскольку мы включили `superjson` в качестве преобразователя данных на бэкенде, нам также нужно включить его на фронтенде. Это связано с тем, что сериализованные данные с бэкенда десериализуются на фронтенде. @@ -76,9 +81,9 @@ tRPC контрибьютор [trashh_dev](https://twitter.com/trashh_dev) [вы С tRPC вы пишете функции TypeScript на бэкенде, а затем вызываете их из фронтенда. Простая процедура tRPC может выглядеть так: -```ts:server/trpc/router/user.ts -const userRouter = t.router({ - getById: t.procedure.input(z.string()).query(({ ctx, input }) => { +```ts:server/api/routers/user.ts +const userRouter = createTRPCRouter({ + getById: publicProcedure.input(z.string()).query(({ ctx, input }) => { return ctx.prisma.user.findFirst({ where: { id: input, @@ -94,8 +99,8 @@ const userRouter = t.router({ Вы определяете свои процедуры в `роутерах` которые представляют собой коллекцию связанных процедур с общим пространством имен. У вас может быть один роутер для `пользователей`, один для `постов` и еще один для `сообщений`. Эти роутеры затем можно объединить в единый централизованный `appRouter`: -```ts:server/trpc/router/_app.ts -const appRouter = t.router({ +```ts:server/api/root.ts +const appRouter = createTRPCRouter({ users: userRouter, posts: postRouter, messages: messageRouter, @@ -110,10 +115,11 @@ export type AppRouter = typeof appRouter; ```tsx:pages/users/[id].tsx import { useRouter } from "next/router"; +import { api } from "../../utils/api"; const UserPage = () => { const { query } = useRouter(); - const userQuery = trpc.users.getById.useQuery(query.id); + const userQuery = api.users.getById.useQuery(query.id); return (
@@ -135,12 +141,12 @@ const UserPage = () => { ```ts:pages/api/users/[id].ts import type { NextApiRequest, NextApiResponse } from "next"; -import { appRouter } from "../../../server/trpc/router/_app"; -import { createContext } from "../../../server/trpc/context"; +import { appRouter } from "../../../server/api/root"; +import { createTRPCContext } from "../../../server/api/trpc"; const userByIdHandler = async (req: NextApiRequest, res: NextApiResponse) => { // Create context and caller - const ctx = await createContext({ req, res }); + const ctx = await createTRPCContext({ req, res }); const caller = appRouter.createCaller(ctx); try { const { id } = req.query; @@ -175,7 +181,7 @@ tRPC взаимодействует через HTTP, поэтому также ```ts:pages/api/users/[id].ts import type { NextApiRequest, NextApiResponse } from "next"; -import { prisma } from "../../../server/db/client"; +import { prisma } from "../../../server/db"; const userByIdHandler = async (req: NextApiRequest, res: NextApiResponse) => { if (req.method !== "GET") { @@ -236,8 +242,8 @@ const UserPage = () => { ```ts:pages/api/trpc/[trpc].ts import type { NextApiRequest, NextApiResponse } from "next"; import { createNextApiHandler } from "@trpc/server/adapters/next"; -import { appRouter } from "~/server/trpc/router/_app"; -import { createContext } from "~/server/trpc/context"; +import { appRouter } from "~/server/api/root"; +import { createTRPCContext } from "~/server/api/trpc"; import cors from "nextjs-cors"; const handler = async (req: NextApiRequest, res: NextApiResponse) => { @@ -247,7 +253,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => { // Create and call the tRPC handler return createNextApiHandler({ router: appRouter, - createContext, + createContext: createTRPCContext, })(req, res); }; @@ -260,10 +266,10 @@ export default handler; ```tsx const MyComponent = () => { - const listPostQuery = trpc.post.list.useQuery(); + const listPostQuery = api.post.list.useQuery(); - const utils = trpc.useContext(); - const postCreate = trpc.post.create.useMutation({ + const utils = api.useContext(); + const postCreate = api.post.create.useMutation({ async onMutate(newPost) { // Cancel outgoing fetches (so they don't overwrite our optimistic update) await utils.post.list.cancel(); @@ -295,12 +301,12 @@ const MyComponent = () => { ```ts import { type inferProcedureInput } from "@trpc/server"; -import { createContextInner } from "~/server/router/context"; -import { appRouter, type AppRouter } from "~/server/router/_app"; +import { createInnerTRPCContext } from "~/server/api/trpc"; +import { appRouter, type AppRouter } from "~/server/api/root"; import { expect, test } from "vitest"; test("example router", async () => { - const ctx = await createContextInner({ session: null }); + const ctx = await createInnerTRPCContext({ session: null }); const caller = appRouter.createCaller(ctx); type Input = inferProcedureInput;