welp
welp
TtRPC
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