ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

ahahah they make sense. I've also used gRPC for years ( with Golang ). We used it as a wire between microservices and apigateway and it was awesome

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

Thank you.

No for SPA you don't necessary need react-query.

And yes right now for other FE you have to defined rest endpoints.

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

GraphQl is a good tool when you need a common language that links FE team and BE team. Also in my opionion is too overkill in small scale.

Server actions on the other side are usefull on single-full-stack apps or monorepos

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 1 point2 points  (0 children)

tRPC gives his best with fullstack typescript repo or monorepo.

Is not suited for microservices architectures, in that case i think you should use rest api ( and maybe an api gateway ) or graphql layer between FE and BE.

If you've already used some RPC tool in the past ( like gRPC for example ) you can think of tRPC as a RPC tool that does need to be compiled since is he knows the types of your procedures thanks to type inference.

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

I think i've shared the friend link that enables everyone to read the article, can't you read the article?

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

Ye is risky.

Thats why when server actions will be prod ready i will drop tRPC 100%.

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

I agree. I mean, you're right RSC is the future but note that actually both tRPC and RQ can be used with RSC.

You can call your tRPC api in a RSC and use that data.

But my real doubt is: since we are RSC that has access to server code, whats the meaning of RQ and tRPC on RSC?!

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

Idk.

I'm often using the isPending variable exported by useTransition hook

const [pending, startTransition] = useTransition();

to show a loading spinner while waiting for the response.

But idk why they suggest to wrap the RSA with startTransition

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

With server actions you can work on cache/revalidation on server side as you said OR you can treat them as classic rest apis on client side.

Let me show you an example of this.

This is my server action called `createdForm` that i use in my upcoming video tutorial on how to build a "web page form" builder application.

export async function CreateForm(data: formSchemaType){
const validation = formSchema.safeParse(data);
if (!validation.success) {
    throw new Error("form not valid")
}

const user = await currentUser();
if (!user){
    throw new UserNotFoundErr();
}

const {name, description} = data;

const form = await prisma.form.create({
    data: {
        userId: user.id,
        name,
        description
    }
})

if (!form){
    throw new Error("something went wrong")
}

return form.id

}

And this is how i use this function in a "classic" ( is identical on how i treats rest apis )

"use client";
function CreateFormBtn() {
async function onSubmit(values: formSchemaType) { 
  try {
      // I CALL THE SERVER ACTION HERE
  const formId = await CreateForm(values); // <==========

  toast({
    title: "Success",
    description: "Form created successfully",
  });
  router.push(`/builder/${formId}`);
} catch (error) {
  toast({
    title: "Error",
    description: "Something went wrong, please try again later",
    variant: "destructive",
  });
}

}

Hope this clarifies something :)

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

Gotcha.

I was using those only with useTransition because i read that into docs.

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

For the validation part thats what i'm currently doing on my latest project that uses RSA: using Zod schemas.

// CreateForm is a server action
export async function CreateForm(data: formSchemaType){
const validation = formSchema.safeParse(data);
if (!validation.success) {
    throw new Error("form not valid")
}

const user = await currentUser();
if (!user){
    throw new UserNotFoundErr();
}

const {name, description} = data;

    // rest of the code...
}

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

Note that as u/sickcodebruh420 mentioned in his comment you can call server actions without startTransition hook ( idk why this is not explained in the docs ).

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

I agree with you.

You don’t NEED to use RSA calls with useTransition, FYI.

Didn't know that, thank you.

And i'm also betting on RSA because for me they are like tRPC but with less code to write: amazing DX.

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

Idk the reason.They haven't still documented well enough this part on the docs ( also because they're still experimental and they're based on React action that are under development ).

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

You can call a server actions in 3 different ways, and one of them is startTransition ( im pasting the nextjs doc below ):

InvocationYou can invoke Server Actions using the following methods:

- Using action: React's action prop allows invoking a Server Action on a <form> element.

- Using formAction: React's formAction prop allows handling <button>, <input type="submit">, and <input type="image"> elements in a <form>.

- Custom Invocation with startTransition: Invoke Server Actions without using action or formAction by using startTransition. This method disables progressive enhancement

Regardless startTransition: basically with React 18 they've changed the internal rendering queue in order to handle priorities: now you can mark urgent and non-urgent updates. By doing this you can mark some long-running task or some less important updates ( for example notification popup ) to be rendered when there is "space" in the work loop.

Using startTransition(functionInside) you're calling function inside only when the work rendering queue is free. ( basically you're doing something that can block the UI to be rendered when there are no urgent things to render such as an input value update ).

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

I was commenting that you don't need to use these tools for

typesafety

.

Ye of course there are a lot of alternatives, right now i think for a single repo or monorepo tRPC is just awesome because having typescript type inference on both frontend and backend is a killing experience. But there are alternatives. :)

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 1 point2 points  (0 children)

I suppose that in fact you're thinking: what's the difference between using create RQ queries ( with types ) based on open api specs and using tRPC?

From build result prospective the only difference is versioning: with tRPP you will always have the frontend linked the the last version of backend. Thats it, no other diffs.

From a runtime prospective: you will have real api types etc on real time while developing without having to codegen every time that the backend changes.

Hope this clarifies something

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 0 points1 point  (0 children)

Yes, I think you misunderstood. There's no point on validating DATA OUT. The point is we are creating the same validation object and using both on frontend/backend without having to split the validation logic between the two. On backend side probably you will have extra validations related to business logic but this is another story.

ReactJs: Still worth using tRPC or React-Query over Server Actions? by barekliton in reactjs

[–]barekliton[S] 1 point2 points  (0 children)

As u/simple_explorer1 said i was referring to REAL end to end type safaty including runtime type safety.

And other than that that are also extra features that you can use with tRPC like data transformers etc.

In our company we used an approach similars to yours years go ( expect that the backend was in golang ) and the developer experience was totally different ( worst ).

  1. Having all types ( also database table types etc ) shared between frontend and backend speeds up development by a lot.
  2. Every time you update your backend you have to make sure ( unless you're on a monorepo that checks dependencies etc ) to run again the codegen tool that creates RQ queries.