welp Posts - tRPC

welp

•Created by welp on 8/28/2023 in #❓-help

Configuration help

Hello! I want to apply the following configuration on the client: https://tanstack.com/query/v4/docs/react/guides/window-focus-refetching Which is basically setting refetchOnWindowFocus to false. How can I achieve this in tRPC? Thank you for your help.

4 replies

TtRPC

•Created by welp on 6/2/2023 in #❓-help

Is it possible to create 2 routers inside a single file?

I am having an issue in which it is impossible to me to use a class instance within 2 routers. I tried declaring the routers in a single file and then exporting them, it doesn't work. The issue I am facing is this: https://github.com/vercel/next.js/issues/49309 Any insight/help would be greatly appreciated.

8 replies

TtRPC

•Created by welp on 5/30/2023 in #❓-help

Initial websockets getToken() returns null: next-auth + websockets :)

Hello! So the way I am trying to authenticate websockets is like this:

import { getToken } from "next-auth/jwt";

type Incoming = IncomingMessage & {
  cookies: Partial<{ [key: string]: string }>;
};

export const createTRPCContext = async (
  opts:
    | CreateNextContextOptions
    | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
) => {
  const { req } = opts;
  const token = await getToken({ req: req as Incoming });

  if (token) {
    return { session: { user: token } };
  }

  return { session: null };
};

import { getToken } from "next-auth/jwt";

type Incoming = IncomingMessage & {
  cookies: Partial<{ [key: string]: string }>;
};

export const createTRPCContext = async (
  opts:
    | CreateNextContextOptions
    | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>
) => {
  const { req } = opts;
  const token = await getToken({ req: req as Incoming });

  if (token) {
    return { session: { user: token } };
  }

  return { session: null };
};

And it works except for the initial requests. I wouldn't mind this (maybe I would since needless errors), but my problem is trying to use subscriptions: it just will prompt an error on the initial request and I can't think of a way to retry (retrying works for everything else). I would like to solve this initial null JWT token request problem as that would make everything work very nicely but I wouldn't mind making the subscriptions work either. The way I am subscribing in my react component:

api.messages.whoIsTyping.useSubscription(
    {
      slug,
    },
    {
      onData(data) {
        setCurrentlyTyping(data);
      },
      onError(err) {
        console.error("Subscription error:", err);
      },
    }
  );

api.messages.whoIsTyping.useSubscription(
    {
      slug,
    },
    {
      onData(data) {
        setCurrentlyTyping(data);
      },
      onError(err) {
        console.error("Subscription error:", err);
      },
    }
  );

I would really appreciate some commentary/insight! Thank you for your time.

5 replies

TtRPC

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

Error: No QueryClient set, use QueryClientProvider to set one

Hello! I have wrapped my _app.tsx properly and I have made useQuery functionality possible, however on this specific component it just won't work. pages/room/[slug].tsx:

import type { GetStaticProps, NextPage } from "next";
import styled from "styled-components";
import Layout from "~/components/Layout/Layout";
import Head from "next/head";
import { api } from "~/utils/api";
import { generateHelpers } from "~/server/helpers/ssgHelper";
import { useRouter } from "next/router";

const Room: NextPage = () => {
  const router = useRouter();
  const slug = router.query.slug as string;

  const { data, isLoading } = api.rooms.getBySlug.useQuery({
    slug,
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!data) {
    return <div>404</div>;
  }

  if (data && data.name === "") {
    router.push("/");
    return null;
  }

  return (
    <>
      <Head>
        <title>{`${data.name}`}</title>
      </Head>
      <Layout>
        <div>Hello from room {`${data.name}`}</div>
      </Layout>
    </>
  );
};

export const getStaticProps: GetStaticProps = async (context) => {
  const ssg = generateHelpers();

  const slug = context.params?.slug;

  if (typeof slug !== "string") throw new Error("no slug");

  await ssg.rooms.getBySlug.prefetch({ slug });

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

export const getStaticPaths = () => {
  return { paths: [], fallback: "blocking" };
};

export default Room;

import type { GetStaticProps, NextPage } from "next";
import styled from "styled-components";
import Layout from "~/components/Layout/Layout";
import Head from "next/head";
import { api } from "~/utils/api";
import { generateHelpers } from "~/server/helpers/ssgHelper";
import { useRouter } from "next/router";

const Room: NextPage = () => {
  const router = useRouter();
  const slug = router.query.slug as string;

  const { data, isLoading } = api.rooms.getBySlug.useQuery({
    slug,
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!data) {
    return <div>404</div>;
  }

  if (data && data.name === "") {
    router.push("/");
    return null;
  }

  return (
    <>
      <Head>
        <title>{`${data.name}`}</title>
      </Head>
      <Layout>
        <div>Hello from room {`${data.name}`}</div>
      </Layout>
    </>
  );
};

export const getStaticProps: GetStaticProps = async (context) => {
  const ssg = generateHelpers();

  const slug = context.params?.slug;

  if (typeof slug !== "string") throw new Error("no slug");

  await ssg.rooms.getBySlug.prefetch({ slug });

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

export const getStaticPaths = () => {
  return { paths: [], fallback: "blocking" };
};

export default Room;

The error in particular looks like: https://i.imgur.com/o3C1Zas.png

8 replies