tRPC•17mo ago

Correct types and payload for the applyWSSHandler with createContext

Hey everyone,

I'm using t3 stack and trying to add websocket handler for my setup. I'm following this example - https://github.com/trpc/examples-next-prisma-websockets-starter.

My create context func looks like this:

import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
import type { CreateWSSContextFnOptions } from "@trpc/server/adapters/ws";
import { getSession } from "next-auth/react";

/**
 * Creates context for an incoming request
 * @link https://trpc.io/docs/v11/context
 */
export const createContext = async (
  opts: CreateNextContextOptions | CreateWSSContextFnOptions,
) => {
  const session = await getSession(opts);

  console.log("createContext for", session?.user?.name ?? "unknown user");

  return {
    session,
  };
};

export type Context = Awaited<ReturnType<typeof createContext>>;

import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
import type { CreateWSSContextFnOptions } from "@trpc/server/adapters/ws";
import { getSession } from "next-auth/react";

/**
 * Creates context for an incoming request
 * @link https://trpc.io/docs/v11/context
 */
export const createContext = async (
  opts: CreateNextContextOptions | CreateWSSContextFnOptions,
) => {
  const session = await getSession(opts);

  console.log("createContext for", session?.user?.name ?? "unknown user");

  return {
    session,
  };
};

export type Context = Awaited<ReturnType<typeof createContext>>;

import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
import type { CreateWSSContextFnOptions } from "@trpc/server/adapters/ws";
import { getSession } from "next-auth/react";

/**
 * Creates context for an incoming request
 * @link https://trpc.io/docs/v11/context
 */
export const createContext = async (
  opts: CreateNextContextOptions | CreateWSSContextFnOptions,
) => {
  const session = await getSession(opts);

  console.log("createContext for", session?.user?.name ?? "unknown user");

  return {
    session,
  };
};

export type Context = Awaited<ReturnType<typeof createContext>>;

import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
import type { CreateWSSContextFnOptions } from "@trpc/server/adapters/ws";
import { getSession } from "next-auth/react";

/**
 * Creates context for an incoming request
 * @link https://trpc.io/docs/v11/context
 */
export const createContext = async (
  opts: CreateNextContextOptions | CreateWSSContextFnOptions,
) => {
  const session = await getSession(opts);

  console.log("createContext for", session?.user?.name ?? "unknown user");

  return {
    session,
  };
};

export type Context = Awaited<ReturnType<typeof createContext>>;

and I'm using it like this:

const wss = new WebSocketServer({
  port: 3001,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext });

const wss = new WebSocketServer({
  port: 3001,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext });

const wss = new WebSocketServer({
  port: 3001,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext });

const wss = new WebSocketServer({
  port: 3001,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext });

unfortunately I see the following typing error in VSCode:

Type '(opts: CreateNextContextOptions | CreateWSSContextFnOptions) => Promise<{ session: Session | null; }>' is not assignable to type 'CreateWSSContextFn<Router<{ ctx: { session: Session | null; db: PrismaClient<{ log: ("error" | "query" | "warn")[]; }, never, DefaultArgs>; }; meta: object; errorShape: { data: { ...; }; message: string; code: TRPC_ERROR_CODE_NUMBER; }; transformer: true; }, {}>>'.

Type '(opts: CreateNextContextOptions | CreateWSSContextFnOptions) => Promise<{ session: Session | null; }>' is not assignable to type 'CreateWSSContextFn<Router<{ ctx: { session: Session | null; db: PrismaClient<{ log: ("error" | "query" | "warn")[]; }, never, DefaultArgs>; }; meta: object; errorShape: { data: { ...; }; message: string; code: TRPC_ERROR_CODE_NUMBER; }; transformer: true; }, {}>>'.

Type '(opts: CreateNextContextOptions | CreateWSSContextFnOptions) => Promise<{ session: Session | null; }>' is not assignable to type 'CreateWSSContextFn<Router<{ ctx: { session: Session | null; db: PrismaClient<{ log: ("error" | "query" | "warn")[]; }, never, DefaultArgs>; }; meta: object; errorShape: { data: { ...; }; message: string; code: TRPC_ERROR_CODE_NUMBER; }; transformer: true; }, {}>>'.

Type '(opts: CreateNextContextOptions | CreateWSSContextFnOptions) => Promise<{ session: Session | null; }>' is not assignable to type 'CreateWSSContextFn<Router<{ ctx: { session: Session | null; db: PrismaClient<{ log: ("error" | "query" | "warn")[]; }, never, DefaultArgs>; }; meta: object; errorShape: { data: { ...; }; message: string; code: TRPC_ERROR_CODE_NUMBER; }; transformer: true; }, {}>>'.

What needs to be fixed to make this work correctly?

renardeinsOP•8/15/24, 9:08 AM

Versions info:

    "@trpc/client": "^11.0.0-rc.446",
    "@trpc/next": "^11.0.0-rc.446",
    "@trpc/react-query": "^11.0.0-rc.446",
    "@trpc/server": "^11.0.0-rc.446",
    "next": "^14.2.4",
    "typescript": "^5.5.3"

    "@trpc/client": "^11.0.0-rc.446",
    "@trpc/next": "^11.0.0-rc.446",
    "@trpc/react-query": "^11.0.0-rc.446",
    "@trpc/server": "^11.0.0-rc.446",
    "next": "^14.2.4",
    "typescript": "^5.5.3"

Node:

> node -v 
v20.11.1

> node -v 
v20.11.1

renardeinsOP•8/15/24, 9:11 AM

upd:

adding dbdb to createContext fixed the problem:

export const createContext = async (
  opts: CreateNextContextOptions | CreateWSSContextFnOptions,
) => {
  const session = await getSession(opts);

  console.log("createContext for", session?.user?.name ?? "unknown user");

  return {
    session,
    db
  };
};

export const createContext = async (
  opts: CreateNextContextOptions | CreateWSSContextFnOptions,
) => {
  const session = await getSession(opts);

  console.log("createContext for", session?.user?.name ?? "unknown user");

  return {
    session,
    db
  };
};