Infer context from procedure after middleware

I'm using trpc version 10 on pnpm.

I I have my handler functions in separate files from the routers themselves.

I'm looking to type the context correctly based on the procedure the handler is used with.

Currently I am setting the ctxctx type from the ContextContext type that is inferred from the createContextcreateContext function.

export type GetPreferencesHandlerOptions = {
  ctx: Context;
};

export const getPreferencesHandler = async ({
  ctx,
}: GetPreferencesHandlerOptions) => {
  const { viewer } = ctx;
          // /\
          // ||
          // Viewer | undefined

  // ... rest of code
}

export type GetPreferencesHandlerOptions = {
  ctx: Context;
};

export const getPreferencesHandler = async ({
  ctx,
}: GetPreferencesHandlerOptions) => {
  const { viewer } = ctx;
          // /\
          // ||
          // Viewer | undefined

  // ... rest of code
}

The context type should rather be inferred from the privateProcedureprivateProcedure so the changes which are made to the context in middlewares will also be correctly typed.

I did see the inferProcedureBuilderResolverOptionsinferProcedureBuilderResolverOptions helper type, but it is only available in version 11, and version 11 hasn't been released yet. Is there a way to do this in v10?

https://trpc.io/docs/server/procedures#inferProcedureBuilderResolverOptions

Define Procedures | tRPC

A procedure is a function which is exposed to the client, it can be one of:

Solution

Okay I didn't come up with a direct solution, but I did solve it in a different way.
Instead of just having the handler functions be in separated files. These -> .mutation(handlerFunc).mutation(handlerFunc)
I moved the whole creation of the procedure into seprate files. This way you can put the handler function directly into the .mutation.mutation call. This way the options (so also the context) are correctly inferred and the need to import the ContextContext type becomes unnecessary.

export const getPreferencesProcedure = privateProcedure.query(
  async ({ ctx }) => {
    const { viewer } = ctx;
          // /\
          // ||
          // Viewer

    // ... rest of code
  }
);

export const getPreferencesProcedure = privateProcedure.query(
  async ({ ctx }) => {
    const { viewer } = ctx;
          // /\
          // ||
          // Viewer

    // ... rest of code
  }
);

Hope this helps other people witht he same problem :)

Jump to solution

Infer context from procedure after middleware

export type GetPreferencesHandlerOptions = {
  ctx: Context;
};

export const getPreferencesHandler = async ({
  ctx,
}: GetPreferencesHandlerOptions) => {
  const { viewer } = ctx;
          // /\
          // ||
          // Viewer | undefined

  // ... rest of code
}

export type GetPreferencesHandlerOptions = {
  ctx: Context;
};

export const getPreferencesHandler = async ({
  ctx,
}: GetPreferencesHandlerOptions) => {
  const { viewer } = ctx;
          // /\
          // ||
          // Viewer | undefined

  // ... rest of code
}

Define Procedures | tRPC

A procedure is a function which is exposed to the client, it can be one of:

Solution

export const getPreferencesProcedure = privateProcedure.query(
  async ({ ctx }) => {
    const { viewer } = ctx;
          // /\
          // ||
          // Viewer

    // ... rest of code
  }
);

export const getPreferencesProcedure = privateProcedure.query(
  async ({ ctx }) => {
    const { viewer } = ctx;
          // /\
          // ||
          // Viewer

    // ... rest of code
  }
);

Hope this helps other people witht he same problem :)

Jump to solution

Infer context from procedure after middleware

Infer context from procedure after middleware

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads