Update packages and remove SSR to fix GraphQL schema loader issue (#2005

)
brianlovin · Jan 3, 2023 · 6bdeaa9 · 6bdeaa9 · vercel · Jan 3, 2023
1 parent ad76344
commit 6bdeaa9
Show file tree

Hide file tree

Showing 50 changed files with 4,872 additions and 6,615 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

diff --git a/next.config.js b/next.config.js
@@ -1,9 +1,11 @@
+/**
+ * @type {import('next').NextConfig}
+ */
 module.exports = {
-  swcMinify: true,
-  resolve: {
-    fallback: {
-      fs: false,
-    },
+  webpack: (config) => {
+    config.resolve.fallback = { fs: false, net: false, tls: false }
+
+    return config
   },
   images: {
     domains: [

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "generate": "graphql-codegen",
     "generate:watch": "graphql-codegen --watch 'src/graphql/**/*.ts'",
     "postinstall": "yarn generate && prisma generate",
-    "db:dev": "pscale connect brianlovin dev --port 3309",
+    "db:dev": "pscale connect brianlovin main --port 3309",
     "db:prod": "pscale connect brianlovin main --port 3309"
   },
   "husky": {
@@ -27,12 +27,12 @@
     "@apollo/link-error": "^2.0.0-beta.3",
     "@apollo/link-schema": "^2.0.0-beta.3",
     "@authik/nextjs": "0.0.9",
-    "@graphql-tools/schema": "^8.3.1",
+    "@graphql-tools/schema": "^9.0.12",
     "@headlessui/react": "^1.4.1",
     "@prisma/client": "^3.9.1",
-    "@tailwindcss/forms": "^0.4.0",
-    "@tailwindcss/line-clamp": "^0.3.1",
-    "@tailwindcss/typography": "^0.5.3",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "^0.4.2",
+    "@tailwindcss/typography": "^0.5.8",
     "@tippy.js/react": "^3.1.1",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "apollo-server-micro": "^2.25.3",
@@ -51,9 +51,9 @@
     "next": "^13",
     "next-seo": "^4.28.1",
     "postmark": "^2.8.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-autosize-textarea": "^7.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^11.5.1",
     "react-feather": "^2.0.9",
     "react-hot-toast": "^2.1.1",
@@ -102,7 +102,7 @@
     "@types/react": "^17.0.38",
     "@types/webrtc": "^0.0.31",
     "@typescript-eslint/parser": "^4.33.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.13",
     "babel-eslint": "^10.1.0",
     "cypress": "^9.4.1",
     "eslint": "^7.32.0",
@@ -116,18 +116,18 @@
     "husky": "^7.0.4",
     "lint-staged": "^12.1.7",
     "now-env": "^3.2.0",
-    "postcss": "^8.4.5",
-    "postcss-import": "^14.0.2",
-    "postcss-preset-env": "^7.2.0",
+    "postcss": "^8.4.20",
+    "postcss-import": "^15.1.0",
+    "postcss-preset-env": "^7.8.3",
     "prettier": "^2.5.1",
     "prettier-eslint": "^13.0.0",
     "prettier-plugin-prisma": "^3.7.0",
     "prisma": "^3.9.1",
     "stylelint-config-recommended": "^6.0.0",
-    "tailwindcss": "^3.0.17",
+    "tailwindcss": "^3.2.4",
     "typescript": "^4.4.4",
     "typescript-eslint-parser": "^22.0.0",
-    "webpack": "^4.46.0"
+    "webpack": "^5.75.0"
   },
   "lint-staged": {
     "*.+(ts|tsx)": [

diff --git a/src/components/AMA/QuestionDetail.tsx b/src/components/AMA/QuestionDetail.tsx
@@ -1,4 +1,3 @@
-import { route } from 'next/dist/server/router'
 import Link from 'next/link'
 import { NextSeo } from 'next-seo'
 import * as React from 'react'
@@ -65,34 +64,36 @@ export function QuestionDetail({ id }) {
 
         <Detail.ContentContainer>
           <Detail.Header>
-            <div className="flex items-center space-x-4 pb-2">
-              <Link href={`/u/${question.author.username}`}>
-                <a className="inline-flex">
-                  <Avatar
-                    user={question.author}
-                    src={question.author.avatar}
-                    width={32}
-                    height={32}
-                    quality={100}
-                    layout="fixed"
-                    className="rounded-full"
-                  />
-                </a>
+            <div className="flex items-center pb-2 space-x-4">
+              <Link
+                href={`/u/${question.author.username}`}
+                className="inline-flex"
+              >
+                <Avatar
+                  user={question.author}
+                  src={question.author.avatar}
+                  width={32}
+                  height={32}
+                  quality={100}
+                  layout="fixed"
+                  className="rounded-full"
+                />
               </Link>
               <div className="flex space-x-1">
-                <Link href={`/u/${question.author.username}`}>
-                  <a className="inline-flex space-x-1">
-                    <span className="text-primary whitespace-nowrap font-semibold leading-snug">
-                      {question.author.name}
-                    </span>
-                    <span className="text-tertiary inline-flex font-normal leading-snug line-clamp-1">
-                      @{question.author.username}
-                    </span>
-                  </a>
+                <Link
+                  href={`/u/${question.author.username}`}
+                  className="inline-flex space-x-1"
+                >
+                  <span className="font-semibold leading-snug text-primary whitespace-nowrap">
+                    {question.author.name}
+                  </span>
+                  <span className="inline-flex font-normal leading-snug text-tertiary line-clamp-1">
+                    @{question.author.username}
+                  </span>
                 </Link>
-                <p className="text-quaternary leading-snug">·</p>
+                <p className="leading-snug text-quaternary">·</p>
                 <p
-                  className="text-quaternary leading-snug line-clamp-1"
+                  className="leading-snug text-quaternary line-clamp-1"
                   title={createdAt.raw}
                 >
                   {createdAt.formatted}
@@ -103,7 +104,7 @@ export function QuestionDetail({ id }) {
             {question.description && (
               <MarkdownRenderer
                 children={question.description}
-                className="comment prose leading-normal"
+                className="leading-normal prose comment"
                 variant="comment"
               />
             )}

diff --git a/src/components/AppDissection/AppDissectionListItem.tsx b/src/components/AppDissection/AppDissectionListItem.tsx
@@ -20,8 +20,8 @@ export const AppDissectionListItem = React.memo<Props>(
         description={null}
         leadingAccessory={
           <Image
-            width={'48px'}
-            height={'48px'}
+            width={48}
+            height={48}
             layout="fixed"
             alt={summary.title}
             className={'rounded-xl'}

diff --git a/src/components/Bookmarks/AddBookmarkForm.tsx b/src/components/Bookmarks/AddBookmarkForm.tsx
@@ -8,6 +8,7 @@ import { LoadingSpinner } from '~/components/LoadingSpinner'
 import { TagPicker } from '~/components/Tag/TagPicker'
 import { GET_BOOKMARKS } from '~/graphql/queries/bookmarks'
 import {
+  GetBookmarksQuery,
   useAddBookmarkMutation,
   useGetBookmarksQuery,
 } from '~/graphql/types.generated'
@@ -31,7 +32,7 @@ export function AddBookmarkForm({ closeModal }) {
     addBookmark({
       variables: { data: { url, tag } },
       update(cache, { data: { addBookmark } }) {
-        const { bookmarks } = cache.readQuery({ query })
+        const { bookmarks } = cache.readQuery<GetBookmarksQuery>({ query })
         return cache.writeQuery({
           query,
           data: {
@@ -85,7 +86,7 @@ export function AddBookmarkForm({ closeModal }) {
   }
 
   return (
-    <form className="space-y-3 p-4" onSubmit={onSubmit}>
+    <form className="p-4 space-y-3" onSubmit={onSubmit}>
       <Input
         type="text"
         placeholder="Add a url..."

diff --git a/src/components/Bookmarks/BookmarkDetail.tsx b/src/components/Bookmarks/BookmarkDetail.tsx
@@ -63,32 +63,34 @@ export function BookmarkDetail({ id }) {
         <Detail.ContentContainer>
           <Detail.Header>
             <Tags tags={bookmark.tags} />
-            <Link href={bookmark.url}>
-              <a target="_blank" rel="noopener" className="block">
-                <Detail.Title ref={titleRef}>{bookmark.title}</Detail.Title>
-              </a>
+            <Link
+              href={bookmark.url}
+              target="_blank"
+              rel="noopener"
+              className="block"
+            >
+              <Detail.Title ref={titleRef}>{bookmark.title}</Detail.Title>
             </Link>
-            <Link href={bookmark.url}>
-              <a
-                target="_blank"
-                rel="noopener"
-                className="text-tertiary flex items-center space-x-2 leading-snug"
-              >
-                {bookmark.faviconUrl && (
-                  <img
-                    src={bookmark.faviconUrl}
-                    alt={`Favicon for ${bookmark.host}`}
-                    className="h-4 w-4"
-                    width="16px"
-                    height="16px"
-                  />
-                )}
-                <span>{bookmark.host}</span>
-              </a>
+            <Link
+              href={bookmark.url}
+              target="_blank"
+              rel="noopener"
+              className="flex items-center space-x-2 leading-snug text-tertiary"
+            >
+              {bookmark.faviconUrl && (
+                <img
+                  src={bookmark.faviconUrl}
+                  alt={`Favicon for ${bookmark.host}`}
+                  className="w-4 h-4"
+                  width="16px"
+                  height="16px"
+                />
+              )}
+              <span>{bookmark.host}</span>
             </Link>
             {bookmark.description && (
               <MarkdownRenderer
-                className="prose italic opacity-70"
+                className="italic prose opacity-70"
                 children={bookmark.description}
                 variant="comment"
               />

diff --git a/src/components/Bookmarks/EditBookmarkForm.tsx b/src/components/Bookmarks/EditBookmarkForm.tsx
@@ -9,6 +9,7 @@ import { TagPicker } from '~/components/Tag/TagPicker'
 import { GET_BOOKMARKS } from '~/graphql/queries/bookmarks'
 import { GET_BOOKMARK } from '~/graphql/queries/bookmarks'
 import {
+  GetBookmarksQuery,
   useDeleteBookmarkMutation,
   useEditBookmarkMutation,
 } from '~/graphql/types.generated'
@@ -101,7 +102,7 @@ export function EditBookmarkForm({ closeModal, bookmark }) {
       deleteBookmark: true,
     },
     update(cache) {
-      const { bookmarks } = cache.readQuery({
+      const { bookmarks } = cache.readQuery<GetBookmarksQuery>({
         query: GET_BOOKMARKS,
       })
 
@@ -175,15 +176,14 @@ export function EditBookmarkForm({ closeModal, bookmark }) {
           onKeyDown={onKeyDown}
         />
         {state.error && <p className="text-red-500">{state.error}</p>}
-        <Link href={bookmark.url}>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-secondary inline-flex items-center space-x-2 pb-2 text-sm opacity-70 hover:opacity-100"
-          >
-            <LinkIcon className="flex-none" size={12} />
-            <span className="line-clamp-1">{bookmark.url}</span>
-          </a>
+        <Link
+          href={bookmark.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center pb-2 space-x-2 text-sm text-secondary opacity-70 hover:opacity-100"
+        >
+          <LinkIcon className="flex-none" size={12} />
+          <span className="line-clamp-1">{bookmark.url}</span>
         </Link>
 
         <TagPicker

diff --git a/src/components/Bookmarks/RelatedBookmarks.tsx b/src/components/Bookmarks/RelatedBookmarks.tsx
@@ -27,21 +27,21 @@ export function RelatedBookmarks({ bookmark }) {
   }
 
   return (
-    <div className="mx-auto mb-4 w-full max-w-3xl px-4 md:mb-8 md:px-8">
-      <div className="rounded-md border border-t border-gray-150 bg-gray-100 px-6 py-4 dark:border-gray-800 dark:bg-gray-900">
-        <p className="text-quaternary py-2 text-xs font-medium uppercase leading-snug">
+    <div className="w-full max-w-3xl px-4 mx-auto mb-4 md:mb-8 md:px-8">
+      <div className="px-6 py-4 bg-gray-100 border border-t rounded-md border-gray-150 dark:border-gray-800 dark:bg-gray-900">
+        <p className="py-2 text-xs font-medium leading-snug uppercase text-quaternary">
           {related.length} more from {bookmark.host}
         </p>
         <ul>
           {related.map((r) => (
             <li key={r.node.id}>
-              <Link href="/bookmarks/[id]" as={`/bookmarks/${r.node.id}`}>
-                <a
-                  onClick={handleClick}
-                  className="text-primary -mx-2 flex justify-between rounded-md px-2 py-2 font-medium line-clamp-1 hover:bg-gray-200 dark:hover:bg-gray-700 md:-mx-3 md:px-3"
-                >
-                  <span>{r.node.title}</span>
-                </a>
+              <Link
+                href="/bookmarks/[id]"
+                as={`/bookmarks/${r.node.id}`}
+                onClick={handleClick}
+                className="flex justify-between px-2 py-2 -mx-2 font-medium rounded-md text-primary line-clamp-1 hover:bg-gray-200 dark:hover:bg-gray-700 md:-mx-3 md:px-3"
+              >
+                <span>{r.node.title}</span>
               </Link>
             </li>
           ))}

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -17,11 +17,7 @@ type ButtonProps = ButtonAsButton | ButtonAsLink
 
 function BaseButton({ href = null, as = null, forwardedRef = null, ...rest }) {
   if (href && href.startsWith('/')) {
-    return (
-      <Link href={href} as={as}>
-        <a {...rest} />
-      </Link>
-    )
+    return <Link href={href} as={as} {...rest} />
   }
 
   if (href) {