Skip to content

Commit df9477f

Browse files
sebasptschsebasptsch
committed
migrate to query options
1 parent e130043 commit df9477f

File tree

18 files changed

+159
-166
lines changed

18 files changed

+159
-166
lines changed

‎apps/client/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"server": "workspace:*",
1312
"@graphql-yoga/subscription": "^5.0.5",
1413
"@hookform/resolvers": "^3.9.0",
15-
"@tanstack/react-query": "^5",
14+
"@tanstack/react-query": "^5.90.5",
1615
"@tanstack/react-query-devtools": "^5",
17-
"@trpc/client": "^11",
18-
"@trpc/react-query": "^11",
16+
"@trpc/client": "^11.6.0",
17+
"@trpc/tanstack-react-query": "^11.6.0",
1918
"@types/qrcode": "^1.5.0",
2019
"@types/react-transition-group": "^4.4.5",
2120
"autoprefixer": "^10.4.12",
@@ -29,6 +28,7 @@
2928
"react-hook-form": "^7.53.0",
3029
"react-router-dom": "^6.4.1",
3130
"react-transition-group": "^4.4.5",
31+
"server": "workspace:*",
3232
"tailwind-merge": "^1.6.1",
3333
"tailwindcss": "^3.1.8",
3434
"use-breakpoint": "^3.0.3",

‎apps/client/src/main.tsx‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,18 @@
1-
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
1+
import { QueryClientProvider } from "@tanstack/react-query";
22
import React from "react";
33
import ReactDOM from "react-dom/client";
44
import { RouterProvider } from "react-router-dom";
55

66
import { browserRouter } from "./routes";
7-
import { trpc } from "./utils/trpc";
7+
import { queryClient } from "./utils/trpc";
88

99
import "./index.css";
10-
import { createWSClient, wsLink } from "@trpc/client";
1110

12-
const queryClient = new QueryClient();
13-
14-
const secure = location.protocol === "https:";
15-
16-
const trpcClient = trpc.createClient({
17-
links: [
18-
wsLink({
19-
client: createWSClient({
20-
url: `${secure ? "wss" : "ws"}://${location.host}/trpc/socket`,
21-
}),
22-
}),
23-
],
24-
});
2511

2612
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
2713
<React.StrictMode>
28-
<trpc.Provider client={trpcClient} queryClient={queryClient}>
29-
<QueryClientProvider client={queryClient}>
30-
<RouterProvider router={browserRouter} />
31-
</QueryClientProvider>
32-
</trpc.Provider>
14+
<QueryClientProvider client={queryClient}>
15+
<RouterProvider router={browserRouter} />
16+
</QueryClientProvider>
3317
</React.StrictMode>,
3418
);

‎apps/client/src/pages/CreateRoomPage.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useMutation } from "@tanstack/react-query";
12
import { Button, CenteredPageContainer, Heading } from "components/styles";
23
import { useState } from "react";
34
import { useNavigate } from "react-router-dom";
@@ -10,7 +11,7 @@ export function CreateRoomPage() {
1011
const [pageName, setPageName] = useState("");
1112
const navigate = useNavigate();
1213

13-
const mutation = trpc.room.createNewRoom.useMutation();
14+
const mutation = useMutation(trpc.room.createNewRoom.mutationOptions());
1415

1516
const onSubmit = async () => {
1617
const result = await mutation.mutateAsync({ name: pageName.trim() });

‎apps/client/src/pages/ShortRedirectPage.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useQuery } from "@tanstack/react-query";
12
import { CenteredPageContainer, Heading } from "components/styles";
23
import { useEffect } from "react";
34
import { useNavigate } from "react-router-dom";
@@ -12,9 +13,11 @@ interface ShortRedirectPageProps {
1213
export function ShortRedirectPageInner(props: ShortRedirectPageProps) {
1314
const navigate = useNavigate();
1415

15-
const roomQuery = trpc.room.getRoomByShortId.useQuery({
16-
shortId: props.shortId,
17-
});
16+
const roomQuery = useQuery(
17+
trpc.room.getRoomByShortId.queryOptions({
18+
shortId: props.shortId,
19+
}),
20+
);
1821

1922
useEffect(() => {
2023
if (roomQuery.data?.id) {

‎apps/client/src/pages/room/BoardPage.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { useSubscription } from "@trpc/tanstack-react-query";
12
import { QRCodeRender } from "components/QRCode";
23
import { ResultsViewer } from "components/ResultsViewer";
34
import { CenteredPageContainer, Heading, Question } from "components/styles";
4-
import { useState } from "react";
55
import { routeBuilders } from "routes";
66
import { BoardState } from "server/src/live/states";
77
import type { RoomPublicInfo } from "server/src/room/types";
@@ -70,18 +70,8 @@ function JoinPanel(props: { room: RoomPublicInfo; className?: string }) {
7070
}
7171

7272
function StatusPanel(props: { room: RoomPublicInfo }) {
73-
const [state, setState] = useState<BoardState | null>(null);
74-
75-
trpc.room.listenBoardEvents.useSubscription(
76-
{ roomId: props.room.id },
77-
{
78-
onData: (data) => {
79-
setState(data);
80-
},
81-
onError: (err) => {
82-
console.error(err);
83-
},
84-
},
73+
const { data: state } = useSubscription(
74+
trpc.room.listenBoardEvents.subscriptionOptions({ roomId: props.room.id }),
8575
);
8676

8777
if (!state) {

‎apps/client/src/pages/room/JoinWaitingRoomPage.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useMutation } from "@tanstack/react-query";
12
import { Button, CenteredPageContainer, Heading } from "components/styles";
23
import { Field, Form, Formik } from "formik";
34
import { useId } from "react";
@@ -26,7 +27,7 @@ export function JoinWaitingRoomPage(props: { roomId: string }) {
2627

2728
const formId = useId();
2829

29-
const mutation = trpc.room.joinWaitingList.useMutation();
30+
const mutation = useMutation(trpc.room.joinWaitingList.mutationOptions());
3031

3132
const disabled = mutation.isPending || mutation.isSuccess;
3233

‎apps/client/src/pages/room/RoomResultsListPage.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useQuery } from "@tanstack/react-query";
12
import { ResultsViewer } from "components/ResultsViewer";
23
import { Heading, PageContainer, Question } from "components/styles";
34
import type { RoomPublicInfo } from "server/src/room/types";
@@ -7,7 +8,9 @@ export function RoomResultsListPage(props: {
78
roomId: string;
89
room: RoomPublicInfo;
910
}) {
10-
const roomResults = trpc.room.getResults.useQuery({ roomId: props.roomId });
11+
const roomResults = useQuery(
12+
trpc.room.getResults.queryOptions({ roomId: props.roomId }),
13+
);
1114

1215
return (
1316
<PageContainer className="gap-4">

‎apps/client/src/pages/room/VotingRoomPage/hooks.tsx‎

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { useMutation, useQuery } from "@tanstack/react-query";
2+
import { useSubscription } from "@trpc/tanstack-react-query";
13
import { useEffect, useRef, useState } from "react";
24
import type { QuestionResponse } from "server/src/live/question";
35
import type {
@@ -34,41 +36,30 @@ export function useVoterState(props: {
3436
roomId: string;
3537
votingKey: string;
3638
}): VotingPageState {
37-
const [state, setState] = useState<VoterState | null>(null);
3839
const [lastVote, setLastVote] = useState<LastVote | null>(null);
3940
const voteLock = useRef<Promise<void>>(Promise.resolve());
4041

41-
const castVoteMutation = trpc.vote.castVote.useMutation();
42+
const castVoteMutation = useMutation(trpc.vote.castVote.mutationOptions())
4243

4344
const runSyncAsync = async (fn: () => Promise<void>) => {
44-
const promise = voteLock.current.catch(() => {}).then(fn);
45+
const promise = voteLock.current.catch(() => { }).then(fn);
4546
voteLock.current = promise;
4647
await promise;
4748
};
4849

49-
trpc.vote.listen.useSubscription(
50-
{ roomId: props.roomId, votingKey: props.votingKey },
51-
{
52-
onData: (data) => {
53-
setState(data);
54-
},
55-
onError: (err) => {
56-
console.error(err);
57-
},
58-
},
59-
);
50+
const subscription = useSubscription(trpc.vote.listen.subscriptionOptions({ roomId: props.roomId, votingKey: props.votingKey }))
6051

6152
const { isInitialVoteLoading } = useFetchInitialVote(
6253
props,
63-
state,
54+
subscription.data ?? null,
6455
setLastVote,
6556
);
6657

67-
if (!state) {
58+
if (!subscription.data) {
6859
return VotingPageState.loading({});
6960
}
7061

71-
return VoterState.match<VotingPageState>(state, {
62+
return VoterState.match<VotingPageState>(subscription.data, {
7263
blank: () => VotingPageState.waiting({}),
7364
ended: () => VotingPageState.ended({}),
7465
kicked: () => VotingPageState.kicked({}),
@@ -131,20 +122,17 @@ function useFetchInitialVote(
131122
InitialVoteFetchState.waitingForVoterState({}),
132123
);
133124

134-
const initialVoteQuery = trpc.vote.getMyVote.useQuery(
135-
{
136-
roomId: props.roomId,
137-
votingKey: props.votingKey,
138-
139-
// If we're not fetching, then the query is disabled anyway and this arg doesnt matter
140-
questionId: InitialVoteFetchState.is.fetching(fetchState)
141-
? fetchState.questionId
142-
: "",
143-
},
144-
{
145-
enabled: InitialVoteFetchState.is.fetching(fetchState),
146-
},
147-
);
125+
const initialVoteQuery = useQuery(trpc.vote.getMyVote.queryOptions({
126+
roomId: props.roomId,
127+
votingKey: props.votingKey,
128+
129+
// If we're not fetching, then the query is disabled anyway and this arg doesnt matter
130+
questionId: InitialVoteFetchState.is.fetching(fetchState)
131+
? fetchState.questionId
132+
: "",
133+
}, {
134+
enabled: InitialVoteFetchState.is.fetching(fetchState),
135+
}))
148136

149137
useEffect(() => {
150138
if (

‎apps/client/src/pages/room/WaitingRoomPage.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useQuery } from "@tanstack/react-query";
12
import { CenteredPageContainer, Heading } from "components/styles";
23
import { useEffect, useState } from "react";
34
import { useNavigate } from "react-router-dom";
@@ -15,10 +16,12 @@ export function WaitingRoomPage(props: {
1516

1617
const [state, setState] = useState<RoomUserResolvedState | null>(null);
1718

18-
const response = trpc.waitingRoom.waitResponse.useQuery({
19-
roomId: props.roomId,
20-
userId: props.userId,
21-
});
19+
const response = useQuery(
20+
trpc.waitingRoom.waitResponse.queryOptions({
21+
roomId: props.roomId,
22+
userId: props.userId,
23+
}),
24+
);
2225

2326
useEffect(() => {
2427
if (response.data) {

‎apps/client/src/pages/room/admin/QuestionSettingPage.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { useMutation } from "@tanstack/react-query";
2+
import { useSubscription } from "@trpc/tanstack-react-query";
13
import { AdminRouter } from "components/adminRouter";
24
import { ResultsViewer } from "components/ResultsViewer";
35
import { Button, Heading, PageContainer, Question } from "components/styles";
@@ -46,25 +48,15 @@ function useQuestionSetter(props: {
4648
roomId: string;
4749
adminKey: string;
4850
}): QuestionSettingPageState {
49-
const [state, setState] = useState<BoardState | null>(null);
50-
5151
const createQuestionMutation =
52-
trpc.admin.questions.createQuestion.useMutation();
53-
const closeQuestionMutation =
54-
trpc.admin.questions.closeQuestion.useMutation();
52+
useMutation(trpc.admin.questions.createQuestion.mutationOptions());
5553

56-
trpc.room.listenBoardEvents.useSubscription(
57-
{ roomId: props.roomId },
58-
{
59-
onData: (data) => {
60-
setState(data);
61-
},
62-
onError: (err) => {
63-
console.error(err);
64-
},
65-
},
54+
const closeQuestionMutation = useMutation(
55+
trpc.admin.questions.closeQuestion.mutationOptions(),
6656
);
6757

58+
const { data: state } = useSubscription(trpc.room.listenBoardEvents.subscriptionOptions({ roomId: props.roomId },))
59+
6860
if (!state) {
6961
return QuestionSettingPageState.loading({});
7062
}

0 commit comments

Comments
 (0)