perf: add graphql cache (#480)

* perf: add graphql cache

* test: fix ut

* fix: remove a redundant folder

* fix: build error

* fix: graphql api url

* fix(e2e): tests

* fix(e2e): missing env variables

.github/workflows/cypress.yml

@@ -55,5 +55,6 @@ jobs:
           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/stellate.yml

@@ -0,0 +1,29 @@
+name: Stellate
+on:
+  push:
+    branches:
+      - main
+      - prod
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+
+      - name: Push stellate schema on staging
+        if: ${{ env.GITHUB_REF_SLUG == 'main' }}
+        run: cd ./apps/main && npx stellate push schema --env staging
+        env:
+          STELLATE_TOKEN: ${{ secrets.STELLATE_TOKEN }}
+
+      - name: Push stellate schema on prod
+        if: ${{ env.GITHUB_REF_SLUG == 'prod' }}
+        run: npx stellate push schema
+        env:
+          STELLATE_TOKEN: ${{ secrets.STELLATE_TOKEN }}

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

@@ -3,7 +3,7 @@ import { waitGraphql } from '../../fixtures/utils';
 describe('Project', () => {
   before(() => {
     cy.login();
-
+    cy.visit('/dashboard');
     waitForSpinnerToDisappear();
     cy.get('body').then(($body) => {
       // Delete duplicated project if exist

apps/e2e/cypress/e2e/home/header.spec.ts

@@ -56,7 +56,7 @@ function loadHomePage() {
 
 function clickUserMenu() {
   const userImage = cy.get('header').findByRole('img', {
-    name: testUser.name,
+    name: new RegExp(testUser.name),
   });
   userImage.parent().then((elem) => {
     // Only click the menu if it's unexpanded

apps/e2e/cypress/plugins/index.ts

@@ -21,6 +21,8 @@ export default function Plugins(
     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

@@ -28,7 +28,7 @@ import '@testing-library/cypress/add-commands';
 import { waitGraphql } from '../fixtures/utils';
 
 Cypress.Commands.add('login', () => {
-  cy.intercept('/v1/graphql').as('graphql');
+  cy.intercept(Cypress.env('NEXT_PUBLIC_HASURA_HTTP_ORIGIN')).as('graphql');
 
   cy.visit('/auth/sign-in?allowAnonymous=true');
   cy.get('input[name=name]').type(Cypress.env('TEST_USER_ID'));

apps/main/.env-template

@@ -1,6 +1,6 @@
 # Default value for local development
-NEXT_PUBLIC_HASURA_HTTP_ORIGIN="http://localhost:8080"
-NEXT_PUBLIC_HASURA_WS_ORIGIN="ws://localhost:8080"
+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_COMMENT_DOMAIN=chirpy.dev
 

apps/main/package.json

@@ -10,13 +10,13 @@
     "build:local": "dotenv -e .env.local -- next build",
     "debug": "NODE_OPTIONS='--inspect' next dev",
     "dev": "next dev",
-    "g:gql": "graphql-codegen --config ./scripts/graphql-codegen/server-codegen.yml && graphql-codegen --config ./scripts/graphql-codegen/client-codegen.yml",
-    "g:gql:watch": "concurrently 'graphql-codegen --watch --config ./scripts/graphql-codegen/server-codegen.yml' 'graphql-codegen --config ./scripts/graphql-codegen/client-codegen.yml --watch'",
+    "g:gql": "zx ./scripts/graphql/gql-gen.mjs",
+    "g:gql:watch": "GQL_WATCH=true pnpm run g:gql",
     "sb": "start-storybook -p 6006",
     "start": "next start",
     "start:local": "dotenv -e .env.local -- next start",
-    "test": "DEBUG_PRINT_LIMIT=99999 jest --silent=false",
-    "test:coverage": "DEBUG_PRINT_LIMIT=99999 jest --silent=false --coverage"
+    "test": "DEBUG_PRINT_LIMIT=999999 jest --silent=false",
+    "test:coverage": "DEBUG_PRINT_LIMIT=999999 jest --silent=false --coverage"
   },
   "dependencies": {
     "@geist-ui/icons": "1.0.2",
@@ -111,7 +111,7 @@
     "@storybook/react": "6.5.9",
     "@storybook/testing-library": "0.0.13",
     "@storybook/testing-react": "1.3.0",
-    "@tailwindcss/line-clamp": "^0.4.0",
+    "@tailwindcss/line-clamp": "0.4.0",
     "@tailwindcss/typography": "0.5.4",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
@@ -143,6 +143,7 @@
     "eslint": "8.21.0",
     "fake-indexeddb": "4.0.0",
     "framer-motion": "6.5.1",
+    "graphqurl": "1.0.1",
     "intersection-observer": "0.12.2",
     "jest": "28.1.2",
     "jest-environment-jsdom": "28.1.2",
@@ -158,13 +159,14 @@
     "resolve-url-loader": "5.0.0",
     "sass": "1.53.0",
     "sass-loader": "13.0.2",
+    "stellate": "1.16.0",
     "storybook-addon-next": "1.6.7",
     "style-loader": "3.3.1",
     "tailwindcss": "3.1.6",
-    "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "4.7.4",
     "webpack": "5.73.0",
-    "whatwg-fetch": "3.6.2"
+    "whatwg-fetch": "3.6.2",
+    "zx": "7.0.8"
   },
   "engines": {
     "node": "16.x"

apps/main/scripts/graphql-codegen/client-codegen.yml → apps/main/scripts/graphql/client-codegen.yml

@@ -1,6 +1,6 @@
 overwrite: true
 schema:
-  - ./scripts/graphql-codegen/graphql-schema.json
+  - ./scripts/graphql/graphql-schema.json
 documents:
   - 'src/graphql/*.graphql'
 generates:

apps/main/scripts/graphql/gql-gen.mjs

@@ -0,0 +1,13 @@
+#!/usr/bin/env zx
+import { $, path } from 'zx';
+
+const serverCodeGen = path.resolve(__dirname, 'server-codegen.yml');
+const clientCodeGen = path.resolve(__dirname, 'client-codegen.yml');
+const extraFlags = process.env.GQL_WATCH ? '--watch' : '';
+
+await $`graphql-codegen --config ${serverCodeGen} ${extraFlags}`;
+await $`graphql-codegen --config ${clientCodeGen} ${extraFlags}`;
+
+const schemaPath = path.resolve(__dirname, 'schema.graphql');
+// Generate schema for stellate
+await $`gq http://127.0.0.1:8080/v1/graphql -H "X-Hasura-Admin-Secret: myadminsecretkey" --introspect > "${schemaPath}"`;