suggested changes for trpc 5 (#357)

* suggested changes for trpc 5

* prettier format

* add queryclient options

* 5.0

Co-authored-by: Kalle (Sendou) <38327916+Sendouc@users.noreply.github.com>

app/plus/components/Suggestion.tsx

@@ -43,12 +43,13 @@ const Suggestion = ({
   const { handleSubmit, errors, register, watch } = useForm<FormData>({
     resolver: zodResolver(resuggestionSchema),
   });
+  const utils = trpc.useQueryUtils();
 
   const { mutate, status } = trpc.useMutation("plus.suggestion", {
     onSuccess() {
       toast(getToastOptions("Comment added", "success"));
       // TODO:
-      trpc.queryClient.invalidateQueries(["plus.suggestions"]);
+      utils.invalidateQuery(["plus.suggestions"]);
       setShowTextarea(false);
     },
     onError(error) {

app/plus/components/SuggestionModal.tsx

@@ -39,11 +39,11 @@ const SuggestionModal: React.FC<Props> = ({ userPlusMembershipTier }) => {
   const { handleSubmit, errors, register, watch, control } = useForm<FormData>({
     resolver: zodResolver(suggestionFullSchema),
   });
-
+  const utils = trpc.useQueryUtils();
   const { mutate, status } = trpc.useMutation("plus.suggestion", {
     onSuccess() {
       toast(getToastOptions("New suggestion submitted", "success"));
-      trpc.invalidateQuery(["plus.suggestions"]);
+      utils.invalidateQuery(["plus.suggestions"]);
       setIsOpen(false);
     },
     onError(error) {

app/plus/components/VouchModal.tsx

@@ -35,11 +35,11 @@ const VouchModal: React.FC<Props> = ({ canVouchFor }) => {
   const { handleSubmit, errors, register, control } = useForm<FormData>({
     resolver: zodResolver(vouchSchema),
   });
-
+  const utils = trpc.useQueryUtils();
   const { mutate, status } = trpc.useMutation("plus.vouch", {
     onSuccess() {
       toast(getToastOptions("Successfully vouched", "success"));
-      trpc.invalidateQuery(["plus.statuses"]);
+      utils.invalidateQuery(["plus.statuses"]);
       setIsOpen(false);
     },
     onError(error) {

app/plus/hooks/usePlusVoting.ts

@@ -24,14 +24,14 @@ export default function usePlusVoting() {
   const { data: statuses, isLoading: isLoadingStatuses } = trpc.useQuery([
     "plus.statuses",
   ]);
-
+  const utils = trpc.useQueryUtils();
   const { mutate: mutateVote, status: voteStatus } = trpc.useMutation(
     "plus.vote",
     {
       onSuccess() {
         toast(getToastOptions("Successfully voted", "success"));
-        trpc.invalidateQuery(["plus.votedUserScores"]);
-        trpc.invalidateQuery(["plus.votingProgress"]);
+        utils.invalidateQuery(["plus.votedUserScores"]);
+        utils.invalidateQuery(["plus.votingProgress"]);
       },
       onError(error) {
         toast(getToastOptions(error.message, "error"));
@@ -43,7 +43,7 @@ export default function usePlusVoting() {
     {
       onSuccess() {
         toast(getToastOptions("Successfully edited vote", "success"));
-        trpc.invalidateQuery(["plus.votedUserScores"]);
+        utils.invalidateQuery(["plus.votedUserScores"]);
       },
       onError(error) {
         toast(getToastOptions(error.message, "error"));

package.json

@@ -36,9 +36,9 @@
     "@next/bundle-analyzer": "^10.1.2",
     "@prisma/client": "^2.20.1",
     "@sendou/react-sketch": "^0.5.2",
-    "@trpc/client": "^4.0.0",
-    "@trpc/react": "^4.0.0",
-    "@trpc/server": "^4.0.0",
+    "@trpc/client": "5.0.0",
+    "@trpc/react": "5.0.0",
+    "@trpc/server": "5.0.0",
     "countries-list": "^2.6.1",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4.1.0",

pages/_app.tsx

@@ -5,7 +5,6 @@ import { ChakraProvider, extendTheme } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { i18n } from "@lingui/core";
 import { I18nProvider } from "@lingui/react";
-import { createReactQueryHooks, createTRPCClient } from "@trpc/react";
 import Layout from "components/layout";
 import { Provider as NextAuthProvider } from "next-auth/client";
 import { DefaultSeo } from "next-seo";
@@ -13,15 +12,13 @@ import type { AppProps } from "next/app";
 import Head from "next/head";
 import { Router } from "next/router";
 import NProgress from "nprogress";
-import type { AppRouter } from "pages/api/trpc/[trpc]";
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { Hydrate } from "react-query/hydration";
-import superjson from "superjson";
 import { theme } from "theme";
 import { activateLocale } from "utils/i18n";
 import { locales } from "utils/lists/locales";
-//import { trpc } from "utils/trpc";
+import { trpc } from "utils/trpc";
 
 NProgress.configure({ showSpinner: false });
 
@@ -151,18 +148,10 @@ const setDisplayedLanguage = () => {
 };
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
-  const trpcRef = useRef<any>();
   useEffect(setDisplayedLanguage, []);
-
-  if (!trpcRef.current) {
-    const client = createTRPCClient<AppRouter>({
-      url: "/api/trpc",
-      transformer: superjson,
-    });
-
-    trpcRef.current = createReactQueryHooks({
-      client,
-      queryClient: new QueryClient({
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
         defaultOptions: {
           queries: {
             // queries never go stale to save some work
@@ -170,9 +159,8 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             staleTime: Infinity,
           },
         },
-      }),
-    });
-  }
+      })
+  );
 
   return (
     <>
@@ -209,11 +197,9 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
               // @ts-expect-error
               header={Component.header}
             >
-              <QueryClientProvider client={trpcRef.current.queryClient}>
+              <QueryClientProvider client={queryClient}>
                 <Hydrate
-                  state={trpcRef.current.useDehydratedState(
-                    pageProps.dehydratedState
-                  )}
+                  state={trpc.useDehydratedState(pageProps.dehydratedState)}
                 >
                   <Component {...pageProps} />
                 </Hydrate>

pages/calendar.tsx

@@ -1,14 +1,13 @@
 import CalendarPage from "app/calendar/components/CalendarPage";
 import HeaderBanner from "components/layout/HeaderBanner";
 import { ssr } from "pages/api/trpc/[trpc]";
-import { trpc } from "utils/trpc";
 
 export const getStaticProps = async () => {
   await ssr.prefetchQuery("calendar.events");
 
   return {
     props: {
-      dehydratedState: trpc.dehydrate(),
+      dehydratedState: ssr.dehydrate(),
     },
     revalidate: 60,
   };

pages/plus/index.tsx

@@ -1,7 +1,6 @@
 import PlusHomePage from "app/plus/components/PlusHomePage";
 import HeaderBanner from "components/layout/HeaderBanner";
 import { ssr } from "pages/api/trpc/[trpc]";
-import { trpc } from "utils/trpc";
 
 export const getStaticProps = async () => {
   await Promise.all([
@@ -11,7 +10,7 @@ export const getStaticProps = async () => {
 
   return {
     props: {
-      dehydratedState: trpc.dehydrate(),
+      dehydratedState: ssr.dehydrate(),
     },
     revalidate: 60,
   };

utils/trpc.ts

@@ -1,22 +1,16 @@
 import { createReactQueryHooks, createTRPCClient } from "@trpc/react";
-import type { AppRouter } from "pages/api/trpc/[trpc]";
-import { QueryClient } from "react-query";
 import superjson from "superjson";
+// Type-only import:
+// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
+import type { AppRouter } from "../pages/api/trpc/[trpc]";
 
+// create helper methods for queries, mutations, and subscriptionos
 export const client = createTRPCClient<AppRouter>({
   url: "/api/trpc",
   transformer: superjson,
 });
 
+// create react query hooks for trpc
 export const trpc = createReactQueryHooks({
   client,
-  queryClient: new QueryClient({
-    defaultOptions: {
-      queries: {
-        // queries never go stale to save some work
-        // on our poor database
-        staleTime: Infinity,
-      },
-    },
-  }),
 });