zeph1665 Posts

zeph1665

•Created by zeph1665 on 4/13/2023 in #❓-help

web socket keeps on disconnecting and connecting

Hi! Its my first time using web sockets. The first code snippet is my socket code. The second code snippet is where I create context to use in the applyWSSHandler. My issue is that in my createContext function. When I try to use the getUser function, the socket keeps on connecting and disconnecting rapidly (like every few milliseconds). But the moment I remove that function, everything works fine. Any idea what could be issue? The create context has no issue without running the socket. Thank you!

import { createContext } from "./context";
import { appRouter } from "./router";
import { applyWSSHandler } from "@trpc/server/adapters/ws";
import ws from "ws";
const wss = new ws.Server({
  port: 3002,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext });

wss.on("connection", (ws) => {
  console.log(`➕➕ Connection (${wss.clients.size})`);
  ws.once("close", () => {
    console.log(`➖➖ Connection (${wss.clients.size})`);
  });
});

wss.on("error", (err) => {
  console.error("WebSocket error", err);
});
console.log("✅ WebSocket Server listening on ws://localhost:3002");

process.on("SIGTERM", () => {
  console.log("SIGTERM");
  handler.broadcastReconnectNotification();
  wss.close();
});

import { createContext } from "./context";
import { appRouter } from "./router";
import { applyWSSHandler } from "@trpc/server/adapters/ws";
import ws from "ws";
const wss = new ws.Server({
  port: 3002,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext });

wss.on("connection", (ws) => {
  console.log(`➕➕ Connection (${wss.clients.size})`);
  ws.once("close", () => {
    console.log(`➖➖ Connection (${wss.clients.size})`);
  });
});

wss.on("error", (err) => {
  console.error("WebSocket error", err);
});
console.log("✅ WebSocket Server listening on ws://localhost:3002");

process.on("SIGTERM", () => {
  console.log("SIGTERM");
  handler.broadcastReconnectNotification();
  wss.close();
});

import { auth } from "@clerk/nextjs/app-beta";
type IUserProps = {
  user: User | null;
};

const ee = new EventEmitter();
export const createContextInner = async ({ user }: IUserProps) => {
  return {
    ee,
    user,
    prisma,
  };
};

async function getUser() {
  // get userId from request
  const { userId } = auth();
  // get full user object
  const user = userId ? await clerkClient.users.getUser(userId) : null;
  return user;
}

export const createContext = async () => {
  const user = await getUser();
  return await createContextInner({ user });
};

export type Context = inferAsyncReturnType<typeof createContext>;

import { auth } from "@clerk/nextjs/app-beta";
type IUserProps = {
  user: User | null;
};

const ee = new EventEmitter();
export const createContextInner = async ({ user }: IUserProps) => {
  return {
    ee,
    user,
    prisma,
  };
};

async function getUser() {
  // get userId from request
  const { userId } = auth();
  // get full user object
  const user = userId ? await clerkClient.users.getUser(userId) : null;
  return user;
}

export const createContext = async () => {
  const user = await getUser();
  return await createContextInner({ user });
};

export type Context = inferAsyncReturnType<typeof createContext>;

6 replies

TtRPC

•Created by zeph1665 on 11/28/2022 in #❓-help

Testing with React Testing Library

Hi! I am trying to test my

DestinationForm

DestinationForm

component using react testing library. My test is simply rendering the component:

test('contains 2 input fields and a submit button', () => {
  const view = render(<DestinationForm />)
})

test('contains 2 input fields and a submit button', () => {
  const view = render(<DestinationForm />)
})

But I get this error:

TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null.
const { mutateAsync, error, isLoading } = trpc.itinerary.create.useMutation()

TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null.
const { mutateAsync, error, isLoading } = trpc.itinerary.create.useMutation()

My guess is that I have to somehow wrap the DestinationForm component with some context so that it is aware of the query client but I'm not sure how to. I'm super new to testing so any help is appreciated(: Thank you!

2 replies

TtRPC

•Created by zeph1665 on 11/24/2022 in #❓-help

Clearing Cache

How do I clear the queryCache for a particular query using the trpc context? If that's not possible, how can I do that using queryClient?

queryClient.getQueryCache().clear()

queryClient.getQueryCache().clear()

I've tried the above but it clears the entire cache. I just want to clear the cache of particular key. Thank you!

16 replies

TtRPC

•Created by zeph1665 on 10/28/2022 in #❓-help

Query keys

Hi! I'm super new to TRPC and based on my understanding, TRPC has a thin wrapper around react query. So, I'm wondering how to include the query keys when using trpc. Thank you!

export const itineraryRouter = router({
  list: publicProcedure
    .input(
      z.object({
        userId: z.string().uuid(),
      })
    )
    .query(async ({ input }) => {
      const itineraries = await prisma.itinerary.findMany({
        where: {
          userId: input.userId,
        },
      })
      return itineraries
    })
})

// how I use it in my component
const { data, isLoading } = trpc.itinerary.list.useQuery(
      {
        userId: user?.id as string,
      },
   
    {
      enabled: !!user,
    }
  )

export const itineraryRouter = router({
  list: publicProcedure
    .input(
      z.object({
        userId: z.string().uuid(),
      })
    )
    .query(async ({ input }) => {
      const itineraries = await prisma.itinerary.findMany({
        where: {
          userId: input.userId,
        },
      })
      return itineraries
    })
})

// how I use it in my component
const { data, isLoading } = trpc.itinerary.list.useQuery(
      {
        userId: user?.id as string,
      },
   
    {
      enabled: !!user,
    }
  )

10 replies