server side calls trpc

Hi, is there someone who can explain to me how do I make server side call with trpc in t3 ??

25 Replies

cje•3y ago

did you check the docs

cje•3y ago

Yes Since I use the t3 boilerplate I cant use the examples there So i just want to execute an mutation User.update How would I do that with the T3 config? For example, I have the appRouter with all my routes And I just want to do something like ‘appRouter.createCaller()’ However I need some context there and when i try to add it the app crashes.. tried a few stuff but nothing helped I also tried something like appRouter.mutation… but also a dead end How would you inmplement it using the T3 boilerplate? @cje

julius•3y ago

You use the createContext from server/tRPC/context.ts

Finn•3y ago

Fetching lots of data ss is rough. Page loads so slowly if prisma is involved

julius•3y ago

for example, if you want to expose an endpoint publically, create a normal next api handler:

// pages/api/example.ts
import { NextApiRequest, NextApiResponse } from "next";
import { createContext } from "../../server/trpc/context";
import { appRouter } from "../../server/trpc/router";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const caller = appRouter.createCaller({
    ctx: await createContext({ req, res }),
  });

  const data = await caller.example.hello();

  res.json(data);
};

export default handler;

// pages/api/example.ts
import { NextApiRequest, NextApiResponse } from "next";
import { createContext } from "../../server/trpc/context";
import { appRouter } from "../../server/trpc/router";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const caller = appRouter.createCaller({
    ctx: await createContext({ req, res }),
  });

  const data = await caller.example.hello();

  res.json(data);
};

export default handler;

or maybe you want to do some ssg instead:

import { createProxySSGHelpers } from "@trpc/react/ssg";
import { appRouter } from "../server/trpc/router";
import { trpc } from "../utils/trpc";
import { createContextInner } from "../server/trpc/context";
import superjson from "superjson";

export const getStaticProps = async () => {
  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: await createContextInner(),
    transformer: superjson,
  });

  await ssg.greeting.fetch({ name: 'client' });

  return {
    props: {
      trpcState: ssg.dehydrate(),
    },
    revalidate: 1,
  };
};

const SomePage() {
  const result = trpc.greeting.useQuery({ name: 'client' });
  ...
};
export default SomePage;

import { createProxySSGHelpers } from "@trpc/react/ssg";
import { appRouter } from "../server/trpc/router";
import { trpc } from "../utils/trpc";
import { createContextInner } from "../server/trpc/context";
import superjson from "superjson";

export const getStaticProps = async () => {
  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: await createContextInner(),
    transformer: superjson,
  });

  await ssg.greeting.fetch({ name: 'client' });

  return {
    props: {
      trpcState: ssg.dehydrate(),
    },
    revalidate: 1,
  };
};

const SomePage() {
  const result = trpc.greeting.useQuery({ name: 'client' });
  ...
};
export default SomePage;

neochromeOP•3y ago

let me try this, I want to execute a simple mutation in backend I want to input data Can I do this

const caller = appRouter.createCaller({
    ctx: await createContext({ req, res }),
  });

const caller = appRouter.createCaller({
    ctx: await createContext({ req, res }),
  });

without endpoing? endpoint*

julius•3y ago

yea anywhere on the server

neochromeOP•3y ago

await createContext({ req, res }), what would be here instead of req / res ?

julius•3y ago

oh no thats where you use the createContextInner sorry if you dont have access to the req/res

neochromeOP•3y ago

Got an error now that it wants a session.. ok it says to use ssgHelpers

julius•3y ago

yea so you would need to get the session, you need the request object for that, or if you dont need the user authed you can pass session: null to the createContextInner

neochromeOP•3y ago

yes.. thanks let me try to hack something now I think I got all the info I needed thank you very much!

julius•3y ago

you have the req/res in gSSP but note that you cant use that if you use ssr: true for trpc

neochromeOP•3y ago

Essentially I have a method on the server which calculates 2 users from the DB some stats.. after the calculation is over, I want to do a mutation instead of going back to the frontend and doing a mutation there

julius•3y ago

alright where do you do the calculation

neochromeOP•3y ago

server/common/calculation.ts

julius•3y ago

yea but where do you call it

neochromeOP•3y ago

Frontend I think Ye

julius•3y ago

huh? in a query or smth or just straight up calling server code from the frontend?

neochromeOP•3y ago

I do have trpc call sorry where i have input the 2 users and now that you ask me this, I could use just the IDs of the users, do a prisma.find then calculate and result of calculation could call a prisma update? in the TRPC call?

julius•3y ago

yea thats what i think initially

neochromeOP•3y ago

yeah, so I just have 1 call and that handles all the logic in one go

julius•3y ago

yea i don't see any reason to do the query and then a mutation straight after if you can just call it in the query directly

neochromeOP•3y ago

so its the same pattern as with REST in that regard?

Gaming

Programming

server side calls trpc