Nextjs 14 Form Submit with tRPC

Introdution

In this article,we are gonna enumerate some kinds of form submitting with trpc concretely, globally in detail. If need, please see 《NextJs 14 从入门到精通之tRPC快速入门》

Prepare trpc base enviroment

Form component typically is used in Client Component, you can submmit with http request or call server action directly. So we start along this thought

We need to create tRPC appRouter at first

bun add @trpc/server@next @trpc/client@next

ts 复制代码
import { initTRPC } from '@trpc/server';
import { db } from '@/server/db';

export const createTRPCContext = async (opts: {
  req?: NextRequest;
}) => {
  // get session
  const session = { user: {userId: 'xxx'}, sessionId: 'xxxx' };

  return {
    db,
    session,
    ...opts,
  };
};

const t = initTRPC.context<typeof createTRPCContext>().create()

const publicProcedure = t.procedure;

const protectedProcedure = t.procedure.use(({ ctx, next }) => {
    if (!ctx.session || !ctx.session.userId) {
      throw new TRPCError({ code: 'UNAUTHORIZED' });
    }

    return next({
      ctx: {
        // infers the `session` as non-nullable
        session: {
          ...ctx.session,
          userId: ctx.session.userId,
        },
      },
    });
});

export const appRouter = t.router({
    createUser: protectedProcedure
        .input(z.object({
          name: z.string(),
          password: z.string()
        }))
        .mutation(async ({ ctx, input }) => {
            const { userId } = ctx;
            const data = await ctx.db.user.create({
              data: {...input, userId }
            })
            return { status: 200, data, message: 'success' }
        })
})

Http Request with tRPC

Firstly, make tRPC appRouter match NextJs api-router

ts 复制代码
// src/app/api/trpc/[...trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '@/server/api/root';
import { createTRPCContext } from '@/server/api/trpc';

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext: () => createTRPCContext(),
    onError: ({ path, error }) => {
      console.log('------', error);
    },
  });

export { handler as GET, handler as POST };

Secondly, Create tRPC Client with react-query

bun add @trpc/react-query@next @tanstack/react-query

tsx 复制代码
// tRPCReact.ts
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createTRPCReact } from '@trpc/react-query';
import { unstable_httpBatchStreamLink } from '@trpc/client';
import { useState } from 'react';

const createQueryClient = () => new QueryClient();

let clientQueryClientSingleton: QueryClient | undefined = undefined;

const getQueryClient = () => {
  if (typeof window === 'undefined') {
    return createQueryClient();
  }
  return (clientQueryClientSingleton ??= createQueryClient());
};

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

  const [trpcClient] = useState(() =>
    api.createClient({
      links: [
        unstable_httpBatchStreamLink({
          url: 'http:localhost:3000/api/trpc',
        }),
      ],
    })
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

Thirdly, used in form component

  • To use react-query, your component must be wrapped with TRPCReactProvider before.
ts 复制代码
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <TRPCReactProvider>{children}</TRPCReactProvider>
            </body>
        </html>
    )
}
  • In form component.
tsx 复制代码
'use client';
import { api } from 'tRPCReact';
export function Form() {
    const create = api.createUser.useMutation({
      onSuccess: () => {}
      onError: (e) => {}
    })
    
    return (
        <form>
            {/* ... */}
            <button onClick={() => create.mutate({
                name, password
            })} >Submit</button>
        </form>
    )
}

Server Action with tRPC's createCaller

NextJs 14 supports calling server action directly for form submmiting. And similarly,tRPC supports server side calls. so we can do following this:

  • Go back to the file of appRouter, export default createCallerFactory
ts 复制代码
// ...
const t = initTRPC.context<typeof createTRPCContext>().create()
// ...

export const createCallerFactory = t.createCallerFactory;
  • Create trpc caller
ts 复制代码
// tRPCServer
const createCaller = createCallerFactory(appRouter);
export const api = createCaller(() => createTRPCContext());
  • Used in form component
tsx 复制代码
'use client';
import { api } from 'tRPCServer';

export function Form() {
    const create = async (formData, FormData) {
        'use server'
        try {
            api.createUser(formData)
        } catch (e) {}
    }

    return (
        <form action={create}>
            {/* ... */}
        </form>
    )
}

Server Action with tRPC's experimental_caller

This is an experimental feature, we should not better to use it. it's based on top of procedure, likely a middleware, finally return a new procedure.

And we will not use the previous defined appRouter. we should re-write the inner logic.

so we can do by following:

  • Export default createCallerFactory
ts 复制代码
// ....
const t = initTRPC.context<typeof createTRPCContext>().create();
// ....
// experimental: form action
export const createActionCaller = protectedProcedure.experimental_caller;
  • Create a file for createActionCaller
ts 复制代码
// tRPCAction
import { experimental_nextAppDirCaller } from '@trpc/server/adapters/next-app-dir';

export const tRPCAction = createActionCaller(
  experimental_nextAppDirCaller({
    createContext: () => createTRPCContext()
  })
);
  • Define a Server Action as a file and write business logic
ts 复制代码
'use server';
import { tRPCAction } from 'tRPCAction';
import { z } from 'zod';

export const createUserAction = tRPCAction
        .input(z.object({
          name: z.string(),
          password: z.string()
        }))
        .mutation(async ({ ctx, input }) => {
            const { userId } = ctx;
            const data = await ctx.db.user.create({
              data: {...input, userId }
            })
            return { status: 200, data, message: 'success' }
        })
  • Used in form component
tsx 复制代码
'use client';
import { createUserAction } from 'actions';

export function Form() {
    return (
        <form action={createUserAction}>
            {/* ... */}
        </form>
    )
}

Summarize

In Next.js 14, using server Actions to submit a form and call tRPC's createCaller is a straightforward way. Both offer different ways to invoke server-side code, depending on your needs and development style. Here is an explanation of the two ways:

  • createCaller is a way to call the server-side tRPC endpoint directly. It is suitable for situations where you need to call the tRPC endpoint directly in server-side code, such as during server Actions or other server-side processing.

  • experimental_caller provides an experimental method for calling tRPC methods on the server side. It is a more straightforward API, but because it is experimental, it may change in future releases

In fact, I suggest to use createCaller, because this way is used directly and once appRouter logic is defined. we can use server side call and server action.

相关推荐
高兴达21 分钟前
Spring boot入门工程
java·spring boot·后端
伍哥的传说36 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783838 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript