kylemocode

@oldmo860617 ??? Followers 🕴 Latest Articles 👇 從 Next.js 13 認識 React Server C... 在 Web JavaScript Infra Team 的工... 在 CI/CD pipeline 中加點安全性檢測吧！

kylemocode

function ComponentA() {
  const [data, isLoading, isError] = useFetch('https://api/a')
}

function ComponentB() {
  const [data, isLoading, isError] = useFetch('https://api/a')
}

kylemocode

const useFetch = (url, fetcher, options) => {
  const [data, setData] = useState(undefined);
  ...
  
  const getKeyArgs = _key => {
    let localKey;
    if (typeof _key === 'function') {
      // 重點 1 !!!!
      // 允許第一個參數是一個 function
      // 如果函數執行出錯的話（也許是依賴於其他請求的參數還沒有回傳），就先指定為空字串

kylemocode

// Global Config
import { createContext } from 'react'

const globalConfigContext = createContext({});

export default globalConfigContext;

// useFetch.js
// 把剛剛的範例抽成共用的 hooks
const useFetch = (url, fetcher, options = {}) => {

kylemocode

// 把剛剛的範例抽成共用的 hooks
const useFetch = (url, initialData) => {
  const [data, setData] = useState(initialData);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const loadData = async () => {
      setIsError(false);
      setIsLoading(true);

kylemocode

const PokemonList = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const result = await fetch('https://pokemon-api/names');

kylemocode

"use strict";
exports.handler = (event, context, callback) => {
  var request = event.Records[0].cf.request;
  const headers = request.headers;

  const siteA = "site=a";
  const siteB = "site=b";

  const siteADomain = "Your site a s3 domain";
  const siteBDomain = "Your site b s3 domain";

kylemocode

// Demo A
<button 
  style={{ 
    backgroundColor: 'red',
    border: 'none', 
    padding: '10px', 
    color: 'white', 
    fontSize: '20px', 
    marginTop: '15px',
    cursor: 'pointer',

kylemocode

{
    "Version": "2012-10-17",
    "Id": "Policy1611823861546",
    "Statement": [
        {
            "Sid": "Stmt1611823850414",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",

kylemocode

name: deployment

on:
  push:
    branches:
      - main
      - master
    paths:
      - 'src/*'