G.A.S Comments - Answer Overflow

G.A.S

•Created by G.A.S on 11/4/2023 in #questions

Issue with 'use client' Directive and SSR in Next.js: Conflicting Errors and Resolution"

oh okay. I'll try the Next.js pages router for now and maybe come back to tRPC later when it works smoothly with the app router. It seems tricky to not use both server and client components in the same parent component. The new app router wants a clear separation between server and client components, so I might need to adjust my current approach.

21 replies

TTCTheo's Typesafe Cult

•Created by G.A.S on 11/4/2023 in #questions

Issue with 'use client' Directive and SSR in Next.js: Conflicting Errors and Resolution"

Yeah that was the same suggestion i got earlier , but doesn't that combat the whole purpose of using trpc ? or no ?

21 replies

TTCTheo's Typesafe Cult

•Created by G.A.S on 11/4/2023 in #questions

Issue with 'use client' Directive and SSR in Next.js: Conflicting Errors and Resolution"

import {
  createTRPCProxyClient,
  loggerLink,
  unstable_httpBatchStreamLink,
} from "@trpc/client";
import { headers } from "next/headers";

import { type AppRouter } from "~/server/api/root";
import { getUrl, transformer } from "./shared";

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    loggerLink({
      enabled: (op) =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error),
    }),
    unstable_httpBatchStreamLink({
      url: getUrl(),
      headers() {
        const heads = new Map(headers());
        heads.set("x-trpc-source", "rsc");
        return Object.fromEntries(heads);
      },
    }),
  ],
});

21 replies

TTCTheo's Typesafe Cult

•Created by G.A.S on 11/4/2023 in #questions

Issue with 'use client' Directive and SSR in Next.js: Conflicting Errors and Resolution"

the code earlier was just something to reproduce the error.

import React, { useState } from "react";
import { api } from "~/trpc/server";

export const AuthForm = () => {
  const [isSignUp, setIsSignUp] = useState(false);

  const handleAuth = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget as HTMLFormElement);
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;
    let name = "";
    if (isSignUp) {
      name = formData.get("name") as string;
    }

    if (isSignUp) {
      // Sign up logic
      const signupReq = await api.user.signup.mutate({
        name,
        email,
        password,
      });
      console.log(signupReq);
    } else {
      // Sign in logic
      console.log(

Perform sign in logic here ${email} ${password}

);
    }
  };

  const toggleAuthMode = () => {
    setIsSignUp((prev) => !prev);
  };

  return (
    <div>
      <button type="button" onClick={toggleAuthMode}>
        {isSignUp ? "Sign In" : "Sign Up"}
      </button>
      <form onSubmit={handleAuth}>
        {isSignUp && <input type="text" name="name" placeholder="Name" />}
        <input type="email" name="email" placeholder="Work Email" />
        <input type="password" name="password" placeholder="Password" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

This is the filtered code in question. While reviewing various examples, I found instances where the use of the "use client" directive and the API import in the same component appeared to work seamlessly , so i was thinking maybe i seemed to be doing something wrong

21 replies

Gaming

Programming