[BREAKING] refactor: move to tRPC (#549)

* [WIP] refactor: move to trpc

* fix: update ref tables

* wip: create trpc and emails packages

* refactor: notifcation hub and play page

* refactor: notification subscription

* fix: cannot find prisma schema and next-auth model errors

* fix: dashboard trpc

* fix: theme ssg

* fix: theme editor

* fix: analytics trpc

* fix: comment widget

* fix: comment timeline hydration

* fix: create/delete a comment

* fix: toggle a comment like

* fix: fetch and update profile

* refactor: notification

* refactor: remove graphql ref

* refactor: remove graphql packages

* refactor: revalidate api

* refactor: remove hasura stuff

* refactor: fix ts errors

* fix: add db scripts

* fix: turbo env

* fix: ignore .env

* fix(bundle-analyze): type error

* fix(release): add turbo remote cache

* fix: skip auto query if no session

* fix: select comment fields

* fix: disable queries without session

* fix: db schema error

* fix: notification message not work and sort message orders

* fix: unexpected stripped subscription object

* fix: ut errors

* fix: e2e errors

.github/workflows/bundle-analysis.yml

@@ -12,7 +12,10 @@ jobs:
   analyze:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
 
       - name: Set up node
         uses: actions/setup-node@v1
@@ -42,17 +45,13 @@ jobs:
         run: pnpm install
 
       - name: Build next.js app
-        run: ./node_modules/.bin/next build
-        working-directory: ./apps/main
+        run: pnpm build
         env:
           ANALYZE: true
           RELATIVE_CI_KEY: ${{ secrets.RELATIVE_CI_KEY }}
           NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
-          HASURA_EVENT_SECRET: ${{ secrets.HASURA_EVENT_SECRET }}
           HASH_ALGORITHM: ${{ secrets.HASH_ALGORITHM }}
-          HASURA_ADMIN_SECRET: ${{ secrets.HASURA_ADMIN_SECRET }}
           NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}
           NEXT_PUBLIC_ANALYTICS_DOMAIN: ${{ secrets.NEXT_PUBLIC_ANALYTICS_DOMAIN }}
           NEXT_PUBLIC_APP_URL: ${{ secrets.NEXT_PUBLIC_APP_URL }}
-          NEXT_PUBLIC_HASURA_HTTP_ORIGIN: ${{ secrets.NEXT_PUBLIC_HASURA_HTTP_ORIGIN }}
-          NEXT_PUBLIC_HASURA_WS_ORIGIN: ${{ secrets.NEXT_PUBLIC_HASURA_WS_ORIGIN }}
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}

.github/workflows/cypress.yml

@@ -55,7 +55,5 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
           TEST_USER_ID: ${{ secrets.TEST_USER_ID }}
-          HASURA_EVENT_SECRET: ${{ secrets.HASURA_EVENT_SECRET }}
-          NEXT_PUBLIC_HASURA_HTTP_ORIGIN: ${{ secrets.NEXT_PUBLIC_HASURA_HTTP_ORIGIN }}
           # DEBUG: 'cypress:*'
           # DEBUG_DEPTH: 9

.github/workflows/release.yml

@@ -11,6 +11,9 @@ jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v2
@@ -55,11 +58,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
-          HASURA_EVENT_SECRET: ${{ secrets.HASURA_EVENT_SECRET }}
           HASH_ALGORITHM: ${{ secrets.HASH_ALGORITHM }}
-          HASURA_ADMIN_SECRET: ${{ secrets.HASURA_ADMIN_SECRET }}
           NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}
           NEXT_PUBLIC_ANALYTICS_DOMAIN: ${{ secrets.NEXT_PUBLIC_ANALYTICS_DOMAIN }}
           NEXT_PUBLIC_APP_URL: ${{ secrets.NEXT_PUBLIC_APP_URL }}
-          NEXT_PUBLIC_HASURA_HTTP_ORIGIN: ${{ secrets.NEXT_PUBLIC_HASURA_HTTP_ORIGIN }}
-          NEXT_PUBLIC_HASURA_WS_ORIGIN: ${{ secrets.NEXT_PUBLIC_HASURA_WS_ORIGIN }}

.gitignore

@@ -5,6 +5,7 @@ dist
 .DS_Store
 .next
 out/
+.env
 *.env.local
 .envproduction
 .vercel

.npmrc

@@ -1 +1,3 @@
-strict-peer-dependencies=false
+strict-peer-dependencies=false
+save-exact=true
+public-hoist-pattern[]=*prisma*

.prettierignore

@@ -1,10 +1,7 @@
 .github/ISSUE_TEMPLATE
 **/.next
 **/.cache
-**/generated
-services/hasura/metadata
 
 .github/PULL_REQUEST_TEMPLATE.md
 pnpm-lock.yaml
-**/schema.graphql
 **/email/templates/*.html

README-zh.md

@@ -58,7 +58,6 @@
 - [![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
 - [![cypress](https://img.shields.io/badge/-cypress-%23E5E5E5?style=for-the-badge&logo=cypress&logoColor=058a5e)](https://www.cypress.io/)
 - [![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jestjs.io/)
-- [urql](https://github.com/FormidableLabs/urql)
 - [next-auth](https://github.com/nextauthjs/next-auth)
 - [tiptap](https://tiptap.dev)
 - [Plausible](https://github.com/plausible/analytics)

README.md

@@ -58,7 +58,6 @@ You can have a [self-hosted](https://chirpy.dev/docs/self-hosted) version of Chi
 - [![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
 - [![cypress](https://img.shields.io/badge/-cypress-%23E5E5E5?style=for-the-badge&logo=cypress&logoColor=058a5e)](https://www.cypress.io/)
 - [![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jestjs.io/)
-- [urql](https://github.com/FormidableLabs/urql)
 - [next-auth](https://github.com/nextauthjs/next-auth)
 - [tiptap](https://tiptap.dev)
 - [Plausible](https://github.com/plausible/analytics)

apps/comment-bootstrapper/package.json

@@ -21,7 +21,7 @@
     "dotenv": "16.0.3",
     "dotenv-cli": "6.0.0",
     "dotenv-expand": "9.0.0",
-    "eslint": "8.27.0",
+    "eslint": "8.28.0",
     "jest": "29.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/comment-bootstrapper/src/lib/comment-bootstrapper.ts

@@ -1,8 +1,8 @@
 import { EVENT_CLICK_CONTAINER } from '@chirpy-dev/utils';
 
 import { ERR_UNMATCHED_DOMAIN } from '../../../main/src/server/common/error-code';
+import type { PagePayload } from '../../../main/src/server/services/page';
 import type { ResponseError } from '../../../main/src/server/types/error';
-import type { GetPagByUrl } from '../../../main/src/server/types/page';
 import {
   observeAndBroadcastThemeChange,
   observeWidgetLoadedEvent,
@@ -49,7 +49,7 @@ export async function initCommentWidget(): Promise<void> {
       origin + pathname,
     )}&title=${encodeURIComponent(window.document.title)}`,
   );
-  const page: GetPagByUrl = await res.json();
+  const page: PagePayload = await res.json();
   if (isResponseError(page)) {
     if (page.code == ERR_UNMATCHED_DOMAIN) {
       return console.error(page.error);
@@ -96,7 +96,7 @@ export async function initCommentWidget(): Promise<void> {
   renderTarget.append(iframe);
 }
 
-function isResponseError(res: GetPagByUrl): res is ResponseError {
+function isResponseError(res: PagePayload): res is ResponseError {
   return !!(res as ResponseError).error;
 }
 

apps/e2e/cypress/e2e/dashboard/project.spec.ts

@@ -1,4 +1,4 @@
-import { waitGraphql } from '../../fixtures/utils';
+import { waitTrpc } from '../../fixtures/utils';
 
 describe('Project', () => {
   before(() => {
@@ -24,7 +24,7 @@ describe('Project', () => {
         cy.findByRole('dialog')
           .findByRole('button', { name: /delete/i })
           .click();
-        waitGraphql();
+        waitTrpc();
       }
     });
 

apps/e2e/cypress/fixtures/utils.ts

@@ -1,4 +1,4 @@
-export const waitGraphql = () =>
-  cy.wait('@graphql', {
+export const waitTrpc = () =>
+  cy.wait('@trpc', {
     timeout: 20_000,
   });

apps/e2e/cypress/plugins/index.ts

@@ -20,9 +20,5 @@ export default function Plugins(
     0,
     23,
   );
-  config.env.HASURA_EVENT_SECRET = process.env.HASURA_EVENT_SECRET;
-  config.env.NEXT_PUBLIC_HASURA_HTTP_ORIGIN =
-    process.env.NEXT_PUBLIC_HASURA_HTTP_ORIGIN;
-
   return config;
 }

apps/e2e/cypress/support/commands.ts

@@ -25,14 +25,13 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 import '@testing-library/cypress/add-commands';
 
-import { waitGraphql } from '../fixtures/utils';
+import { waitTrpc } from '../fixtures/utils';
 
 Cypress.Commands.add('login', () => {
-  cy.intercept(Cypress.env('NEXT_PUBLIC_HASURA_HTTP_ORIGIN')).as('graphql');
-
+  cy.intercept('/api/trpc/**').as('trpc');
   cy.visit('/auth/sign-in?allowAnonymous=true');
   cy.get('input[name=name]').type(Cypress.env('TEST_USER_ID'));
   cy.get('button[type=submit]').click();
   cy.wait(1000);
-  waitGraphql();
+  waitTrpc();
 });

apps/e2e/package.json

@@ -15,7 +15,7 @@
     "dotenv": "16.0.3",
     "dotenv-cli": "6.0.0",
     "dotenv-expand": "9.0.0",
-    "eslint": "8.27.0",
+    "eslint": "8.28.0",
     "typescript": "4.9.3"
   },
   "publishConfig": {

apps/emails/config.production.js

@@ -14,10 +14,7 @@ module.exports = {
   build: {
     templates: {
       destination: {
-        path: path.resolve(
-          __dirname,
-          '../main/src/server/services/email/templates',
-        ),
+        path: path.resolve(__dirname, '../../packages/emails/src/templates'),
       },
     },
   },

apps/emails/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@chirpy-dev/emails",
+  "name": "@chirpy-dev/emails-app",
   "version": "0.0.1",
   "license": "AGPL-3.0-or-later",
   "main": "./config.js",
@@ -19,7 +19,5 @@
     "tailwindcss-email-variants": "2.0.0",
     "tailwindcss-mso": "1.3.0"
   },
-  "publishConfig": {
-    "access": "public"
-  }
+  "private": true
 }

apps/main/.env-tmpl

@@ -1,12 +1,7 @@
 # Default value for local development
-NEXT_PUBLIC_HASURA_HTTP_ORIGIN="http://localhost:8080/v1/graphql"
-NEXT_PUBLIC_HASURA_WS_ORIGIN="ws://localhost:8080/v1/graphql"
 NEXT_PUBLIC_APP_URL=http://localhost:3000
 NEXT_PUBLIC_ANALYTICS_DOMAIN=http://localhost:8000
 
-HASURA_ADMIN_SECRET=myadminsecretkey
-HASURA_EVENT_SECRET=myeventsecretkey
-
 NEXTAUTH_URL=http://localhost:3000
 # Copy the key of `HASURA_GRAPHQL_JWT_SECRET` from `services/hasura/docker-compose.local.yaml`, it used by next-auth and hasura
 NEXTAUTH_SECRET=

apps/main/.env.docker

@@ -1,7 +1,5 @@
 
 # Used by docker to generate runtime public env var
-NEXT_PUBLIC_HASURA_HTTP_ORIGIN=
-NEXT_PUBLIC_HASURA_WS_ORIGIN=
 NEXT_PUBLIC_APP_URL=
 NEXT_PUBLIC_ANALYTICS_DOMAIN=
 NEXT_PUBLIC_VAPID=

apps/main/next.config.js

@@ -31,10 +31,16 @@ const nextConfig = {
     scrollRestoration: true,
     legacyBrowsers: false,
     transpilePackages: [
+      '@chirpy-dev/emails',
       '@chirpy-dev/ui',
       '@chirpy-dev/utils',
       '@chirpy-dev/graphql',
       '@chirpy-dev/types',
+      '@chirpy-dev/trpc',
+    ],
+    swcPlugins: [
+      // Allow Date/Map in getStaticProps
+      ['next-superjson-plugin', {}],
     ],
   },
   async rewrites() {
@@ -106,6 +112,14 @@ const nextConfig = {
       test: /\.html$/,
       loader: 'html-loader',
     });
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        net: false,
+        tls: false,
+        fs: false,
+      };
+    }
     return config;
   },
 };