⬆️ upgrade to trpc6 (#444)

* ⬆️ upgrade to trpc6

* `npm run prettier:format`

* Use final release

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

components/freeagents/FAModal.tsx

@@ -43,7 +43,7 @@ interface Props {
 type FormData = z.infer<typeof freeAgentPostSchema>;
 
 const FAModal = ({ onClose, post, refetchQuery }: Props) => {
-  const utils = trpc.useQueryUtils();
+  const utils = trpc.useContext();
 
   const { handleSubmit, errors, register, watch, control } = useForm<FormData>({
     resolver: zodResolver(freeAgentPostSchema),

components/freeagents/FreeAgentSection.tsx

@@ -47,7 +47,7 @@ const FreeAgentSection = ({
   const { themeColorShade } = useMyTheme();
 
   const toast = useToast();
-  const utils = trpc.useQueryUtils();
+  const utils = trpc.useContext();
   const addLikeMutation = trpc.useMutation("freeAgents.addLike", {
     onSuccess() {
       utils.invalidateQuery(["freeAgents.likes"]);

components/plus/Suggestion.tsx

@@ -43,7 +43,7 @@ const Suggestion = ({
   const { handleSubmit, errors, register, watch } = useForm<FormData>({
     resolver: zodResolver(resuggestionSchema),
   });
-  const utils = trpc.useQueryUtils();
+  const utils = trpc.useContext();
 
   const { mutate, status } = trpc.useMutation("plus.suggestion", {
     onSuccess() {

components/plus/SuggestionModal.tsx

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

components/plus/VouchModal.tsx

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

hooks/plus.ts

@@ -74,7 +74,7 @@ export default function usePlusVoting() {
   const { data: statuses, isLoading: isLoadingStatuses } = trpc.useQuery([
     "plus.statuses",
   ]);
-  const utils = trpc.useQueryUtils();
+  const utils = trpc.useContext();
   const { mutate: mutateVote, status: voteStatus } = trpc.useMutation(
     "plus.vote",
     {

package.json

@@ -35,9 +35,10 @@
     "@next/bundle-analyzer": "^10.2.0",
     "@prisma/client": "^2.22.1",
     "@sendou/react-sketch": "^0.5.2",
-    "@trpc/client": "5.0.0",
-    "@trpc/react": "5.0.0",
-    "@trpc/server": "5.0.0",
+    "@trpc/client": "6.1.1",
+    "@trpc/next": "^6.1.1",
+    "@trpc/react": "6.1.1",
+    "@trpc/server": "6.1.1",
     "countries-list": "^2.6.1",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4.1.11",

pages/_app.tsx

@@ -2,6 +2,7 @@ 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 { withTRPC } from "@trpc/next";
 import Layout from "components/layout";
 import "focus-visible/dist/focus-visible";
 import { Provider as NextAuthProvider } from "next-auth/client";
@@ -11,12 +12,10 @@ import Head from "next/head";
 import { Router } from "next/router";
 import NProgress from "nprogress";
 import { useEffect, useState } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { Hydrate } from "react-query/hydration";
+import { QueryClient } from "react-query";
 import { theme } from "theme";
 import { activateLocale } from "utils/i18n";
 import { locales } from "utils/lists/locales";
-import { trpc } from "utils/trpc";
 import "./styles.css";
 
 NProgress.configure({ showSpinner: false });
@@ -203,13 +202,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
         <ChakraProvider theme={extendedTheme}>
           <I18nProvider i18n={i18n}>
             <Layout>
-              <QueryClientProvider client={queryClient}>
-                <Hydrate
-                  state={trpc.useDehydratedState(pageProps.dehydratedState)}
-                >
-                  <Component {...pageProps} />
-                </Hydrate>
-              </QueryClientProvider>
+              <Component {...pageProps} />
             </Layout>
           </I18nProvider>
         </ChakraProvider>
@@ -218,4 +211,8 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
   );
 };
 
-export default MyApp;
+export default withTRPC(() => {
+  return {
+    url: "/api/trpc",
+  };
+})(MyApp);

utils/trpc.ts

@@ -4,13 +4,7 @@ import superjson from "superjson";
 // 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,
-});
+export const transformer = superjson;
 
 // create react query hooks for trpc
-export const trpc = createReactQueryHooks({
-  client,
-});
+export const trpc = createReactQueryHooks<AppRouter>();