pandakas Posts - Answer Overflow

pandakas

Explore posts from servers

•Created by pandakas on 12/21/2023 in #❓-help

server-side helpers doesnt work with `Hydrate` and `QueryClient`

environtment: node v20.9.0, npm Hi i tried to implement server-side helpers but somehow it just doesnt work, the fetch is successful but i think it didn't dehydrate i think the issue happened because im also using react query outside tRPC (first vanilla react query -> trying to migrate over to TRPC) so my _app.tsx pretty much look like this

const App = () => {
...
 <QueryClientProvider client={queryClient}>
  <Hydrate state={pageProps.dehydratedState}>
    <Component {...pageProps} />
    <ReactQueryDevtools initialIsOpen={false} />
  </Hydrate>
</QueryClientProvider>;
}

export default  bff.withTRPC(App)

const App = () => {
...
 <QueryClientProvider client={queryClient}>
  <Hydrate state={pageProps.dehydratedState}>
    <Component {...pageProps} />
    <ReactQueryDevtools initialIsOpen={false} />
  </Hydrate>
</QueryClientProvider>;
}

export default  bff.withTRPC(App)

its working fine when i remove the QueryClientProvider is it okay to remove them ?

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: createTRPCContext({
      req: ctx.req as NextApiRequest,
      res: ctx.res as NextApiResponse,
    }),
    transformer: superjson,
  });

  const returned = await helpers.auth.session.fetch();

  console.log(returned);

  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
  };
};

function PlaygroundPage() {
  const { data } = bff.auth.session.useQuery();

  return (
    <div className="mx-auto my-auto">
      <div className="max-w-[400px]">{JSON.stringify(data?.accessToken)}</div>
      <button type="button">login</button>
    </div>
  );
}

export default PlaygroundPage;

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: createTRPCContext({
      req: ctx.req as NextApiRequest,
      res: ctx.res as NextApiResponse,
    }),
    transformer: superjson,
  });

  const returned = await helpers.auth.session.fetch();

  console.log(returned);

  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
  };
};

function PlaygroundPage() {
  const { data } = bff.auth.session.useQuery();

  return (
    <div className="mx-auto my-auto">
      <div className="max-w-[400px]">{JSON.stringify(data?.accessToken)}</div>
      <button type="button">login</button>
    </div>
  );
}

export default PlaygroundPage;

thanks!

3 replies

TTCTheo's Typesafe Cult

•Created by pandakas on 12/19/2023 in #questions

Drizzle column does not exist

4 replies

TTCTheo's Typesafe Cult

•Created by pandakas on 6/19/2023 in #questions

Linter & type check in nextjs app

hi if all the linter & typecheck is already done in each PR branch with CI, do i still need to do check lint & types in master branch before deployment ? is there any edge case that i dont think of ? contexts: nextjs app, 100k+loc, 3-5 engineers working on same repo i heard a lot about how theo improve the build time in nextjs app, but somehow i cant find the videos where he talks about these

7 replies

TTCTheo's Typesafe Cult

•Created by pandakas on 3/13/2023 in #questions

Modal in a list

11 replies

TTCTheo's Typesafe Cult

•Created by pandakas on 1/27/2023 in #questions

NextJS SSR on nested routes

hi i have this case/page where i need SSR for opengraph metatags which is dynamic for each page let say i have routes /[profileName] and /[profileName]/achievement im hitting getProfile in SSR block inside [profileName].tsx, the thing is i also hitting the same endpoint in /[profileName]/achievement.tsx SSR block bcs i want to keep the meta tags which slows me down because everytime i change route between them a SSR is executed anyone know how to improve this ? im using react query & prefetchQuery if thats help, thanks!

1 replies

TTCTheo's Typesafe Cult

•Created by pandakas on 1/5/2023 in #questions

nextauth deployed in gcp no_secret

Hi im currently deploying my app into gcp and somehow it keep saying NO_SECRET in the logs i tried setting up variables in .env with 1. NEXTAUTH_SECRET (and nextauth will automatically get the secret) 2. set custom variables like MY_SECRET then define it in [...nextauth].ts secret: process.env.MY_SECRET both of these doesnt work and keep saying NO_SECRET in production what i tried working is 1. hard coded the secret like secret: "mysupersecretkey" 2. exposing my env with NEXT_PUBLIC_MY_SECRET but i dont feel safe with exposing my secret anyone have any idea ? thanks!

3 replies

TTCTheo's Typesafe Cult

•Created by pandakas on 1/3/2023 in #questions

Protect certain route after auth ? NextAuth middleware

Hi is there any possible way to protect my pages after auth in middleware ? i dont want to do it in client side since it will flash the content for a second , and if i do it with unstable_getServerSession it feels kinda toomuch code duplication ? if i have auth i want to protect page A,B,C,D but if i dont have auth i want to protect page E,F,G,H this is currently how my code look like but is there any other way to do it way more cleverly ? Thanks

// middleware.ts
import { NextResponse } from 'next/server';
import { getToken } from 'next-auth/jwt';

const PROTECT_ROUTE_WITHOUT_AUTH = ['/private-route'];
const PROTECT_ROUTE_WITH_AUTH = ['/sign-in'];

export async function middleware(req) {
  const noAuthRedirectUrl = req.nextUrl.clone();
  noAuthRedirectUrl.pathname = '/sign-in';

  const withAuthRedirectUrl = req.nextUrl.clone();
  withAuthRedirectUrl.pathname = '/';

  if (PROTECT_ROUTE_WITHOUT_AUTH.includes(req.nextUrl.pathname)) {
    const session = await getToken({
      req,
    });
    if (!session) return NextResponse.redirect(noAuthRedirectUrl);
  }

  if (PROTECT_ROUTE_WITH_AUTH.includes(req.nextUrl.pathname)) {
    const session = await getToken({
      req,
    });
    if (session) return NextResponse.redirect(withAuthRedirectUrl);
  }

  return NextResponse.next();
}

// middleware.ts
import { NextResponse } from 'next/server';
import { getToken } from 'next-auth/jwt';

const PROTECT_ROUTE_WITHOUT_AUTH = ['/private-route'];
const PROTECT_ROUTE_WITH_AUTH = ['/sign-in'];

export async function middleware(req) {
  const noAuthRedirectUrl = req.nextUrl.clone();
  noAuthRedirectUrl.pathname = '/sign-in';

  const withAuthRedirectUrl = req.nextUrl.clone();
  withAuthRedirectUrl.pathname = '/';

  if (PROTECT_ROUTE_WITHOUT_AUTH.includes(req.nextUrl.pathname)) {
    const session = await getToken({
      req,
    });
    if (!session) return NextResponse.redirect(noAuthRedirectUrl);
  }

  if (PROTECT_ROUTE_WITH_AUTH.includes(req.nextUrl.pathname)) {
    const session = await getToken({
      req,
    });
    if (session) return NextResponse.redirect(withAuthRedirectUrl);
  }

  return NextResponse.next();
}

2 replies

Gaming

Programming