kylemocode

M1:{"id":"./src/SearchField.client.js","chunks":["client5"],"name":""}
M2:{"id":"./src/EditButton.client.js","chunks":["client1"],"name":""}
S3:"react.suspense"
M4:{"id":"./src/SidebarNote.client.js","chunks":["client6"],"name":""}
J0:["$","div",null,{"className":"main","children":[["$","section",null,{"className":"col sidebar","children":[["$","section",null,{"className":"sidebar-header","children":[["$","img",null,{"className":"logo","src":"logo.svg","width":"22px","height":"20px","alt":"","role":"presentation"}],["$","strong",null,{"children":"React Notes"}]]}],["$","section",null,{"className":"sidebar-menu","role":"menubar","children":[["$","@1",null,{}],["$","@2",null,{"noteId":null,"children":"New"}]]}],["$","nav",null,{"children":["$","$3",null,{"fallback":["$","div",null,{"children":["$","ul",null,{"className":"notes-list skeleton-container","children":[["$","li",null,{"className":"v-stack","children":["$","div",null,{"className":"sidebar-note-list-item skeleton","style":{"height":"5em"}}]}],["$","li"

kylemocode

- uses: actions/cache@v2
    with:
      path: |
        ./node_modules
        ${{ github.workspace }}/.next/cache
      # Generate a new cache whenever packages or source files change.
      key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
      # If source files changed but packages didn't, rebuild from a prior cache.
      restore-keys: |
        ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-

kylemocode

const express = require('express')
const next = require('next')
const Cache = require('lru-cache');
const compression = require('compression')


const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })

kylemocode

let mswEnabled = false;
const customFetch = async (uri: string, options: RequestInit) => {
  if (typeof window !== 'undefined' && !mswEnabled) {
    const { worker } = await import('@/mocks/worker');
    await worker.start();
    mswEnabled = true;
  }

  return fetch(uri, options);
};

kylemocode

export const schemaWithMocks = addMocksToSchema({
  schema,
  mocks,
  resolvers: (store) => ({
    Query: {
      books: (_, { id }) => {
        return Array.from(
          { length: 8 },
          () => store.get('Book', id)
        );

kylemocode

/* mocks/index.ts */
import { setupServer } from 'msw/node';
import { setupWorker } from 'msw';

import { handler } from '@/mocks/handler';

export const server = setupServer(handler);
export const worker = setupWorker(handler);

kylemocode

import { addMocksToSchema, Ref } from '@graphql-tools/mock';
import type { ExecutionResult, IntrospectionQuery } from 'graphql';
import { buildClientSchema, graphql } from 'graphql';
import { graphql as mswGraphql } from 'msw';

import IntrospectionResultData from '@/generated/introspection.json';

const schema = buildClientSchema(
  (IntrospectionResultData as unknown) as IntrospectionQuery
);

kylemocode

// 開始一個 transaction
await conn.query("BEGIN");

// 執行更新
const sqlU= "update seats set isbooked = 1, name = $2 where id = $1 and isbooked = 0"
const updateResult = await conn.query(sqlU,[id, name]);
        
// 結束 transaction
await conn.query("COMMIT");

kylemocode

// 開始一個 transaction
await conn.query("BEGIN");
// 先 select 使用者指定的 seat，並確認 isbooked 的狀態是 false (FOR UPDATE 是關鍵，等等會說明)
const sql = "SELECT * FROM seats where id = $1 and isbooked = 0 FOR UPDATE";
const result = await conn.query(sql, [id]);

if (result.rowCount === 0) {
  res.send({"error": "Seat already booked"})
  return;
} 

kylemocode

DOM Performance

• How the browser renders the document
  • Receives the data (bytes) from the server.
  • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
  • Turns tokens into nodes.
  • Turns nodes into the DOM tree.
• Builds CSSOM tree from the css rules.