nehalist Posts

nehalist

•Created by nehalist on 5/19/2023 in #❓-help

Implementing a "Prisma model converter middleware"

Bit of a fancy name, but if you've ever worked with Symfonys param converters (especially the DoctrineParamConverter) you get the idea. It's basically just automatically converting input to models. Currently trying to implement this, but can't find a way for proper types. Implementation so far:

export const modelConverter = middleware(async (opts) => {
  const ctx: Record<string, any> = {};
  if (typeof opts.rawInput === "object") {
    for await (const key of Object.keys(opts.rawInput)) {
      const prismaModelKey = Object.keys(prisma).find(
        (m) => m.toLowerCase() === key
      );
      if (!prismaModelKey) {
        continue;
      }
      opts.ctx[prismaModelKey] = prisma[prismaModelKey]; // this should actually be `model.findUniqueOrThrow(rawInputValue)`
    }
  }
  return opts.next({ ctx } as { ctx: { [key: keyof typeof ctx]: any } });
});

export const modelConverter = middleware(async (opts) => {
  const ctx: Record<string, any> = {};
  if (typeof opts.rawInput === "object") {
    for await (const key of Object.keys(opts.rawInput)) {
      const prismaModelKey = Object.keys(prisma).find(
        (m) => m.toLowerCase() === key
      );
      if (!prismaModelKey) {
        continue;
      }
      opts.ctx[prismaModelKey] = prisma[prismaModelKey]; // this should actually be `model.findUniqueOrThrow(rawInputValue)`
    }
  }
  return opts.next({ ctx } as { ctx: { [key: keyof typeof ctx]: any } });
});

Unfortunately I can't come up with a solution to knowing the types here. Anyone got some ideas 🙂 ?

2 replies

TtRPC

•Created by nehalist on 5/13/2023 in #❓-help

Is there a way to transform data server-side only?

I'd like to implement something like Symfonys ParamConverter that converts certain params, but server-side only, so that I can use Prisma and alike. Couldn't figure out how to use data transformers for this use case

3 replies

TtRPC

•Created by nehalist on 4/16/2023 in #❓-help

Type of createServerSideHelpers?

I'm currently trying to implement a helper for getServerSideProps to reduce duplication. It's still wip, but I'm encountering a problem I can't figure out:

export async function createServerSideProps(
  ctx: GetServerSidePropsContext,
  callback: (helpers/**: ???? */) => Record<string, any>
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: {
      user: await getServerSession(ctx.req, ctx.res, authOptions),
    },
    transformer: superjson,
  });

  const props = callback(helpers);

  return {
    props,
  };
}

export async function createServerSideProps(
  ctx: GetServerSidePropsContext,
  callback: (helpers/**: ???? */) => Record<string, any>
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: {
      user: await getServerSession(ctx.req, ctx.res, authOptions),
    },
    transformer: superjson,
  });

  const props = callback(helpers);

  return {
    props,
  };
}

What's the type of helpers in the callback?

6 replies

TtRPC

•Created by nehalist on 4/14/2023 in #❓-help

Has anyone ever used tRPC (with SSR) and i18n?

No matter the lib (next-intl, next-i18n, next-translate), I simply stumble from one problem to another - most of them simply solved by disabling SSR. Unfortunately, I need SSR and i18n. I know the GitHub issue that the problem here is on next.js, but anyone ever solved this? Hard to believe no one has ever used tRPC with i18n

35 replies

TtRPC

•Created by nehalist on 11/12/2022 in #❓-help

Request context from getServerSideProps

The docs of tRPC context https://trpc.io/docs/v10/context

export async function createContext(opts: trpcNext.CreateNextContextOptions) {

export async function createContext(opts: trpcNext.CreateNextContextOptions) {

But how to use this function from getServerSideProps (in order to use SSG helpers)?

2 replies

TtRPC

•Created by nehalist on 11/6/2022 in #❓-help

tRPC without SSR

When using tRPC with ssr it uses getInitialProps, which has kinda of a cool effect in terms how a page is rendered, since it's rendered server-side on initial requests and client-side on route transitions. Unfortunately, enabling ssr means that you can no longer use getServerSideProps (which I know is only fixable by next.js and not tRPC). But how to replicate the getInitialProps behaviour then? Let's say I'm building a blog; due to SEO it's basically necessary to render my posts server-side. But when navigating through the site loading posts on the fly would be totally fine. How to do that without ssr?

16 replies

TtRPC

•Created by nehalist on 11/1/2022 in #❓-help

Load data client-side via react-query while using tRPC with SSR

Is there any way to load data client-side when using tRPC? I want my page to be rendered and load data dynamically, since this data is not SEO-relevant. As far as I'm understanding as soon as I turn on SSR in tRPC queries must be done before the page is rendered.

11 replies

TtRPC

•Created by nehalist on 10/26/2022 in #❓-help

SSR and loading indicators - I don't get it

Guess I'm missing something here, but unfortunately I'm having a hard time with the docs: in https://trpc.io/docs/v10/nextjs the example utils/trcp.ts sets ssr: true, but the pages/index.tsx example uses

  const hello = trpc.hello.useQuery({ text: 'client' });
  if (!hello.data) {
    return <div>Loading...</div>;
  }

  const hello = trpc.hello.useQuery({ text: 'client' });
  if (!hello.data) {
    return <div>Loading...</div>;
  }

Since SSR would prevent the page from being rendered until the queries are done, how would this loading indicator ever been shown?

1 replies