考量到在多頁面上放置相同的 GraphQL 查詢語句不僅閱讀起來繁瑣，維護上也不方便，因此，我決定將這些查詢語句抽離成自訂的 hook。

我對於 hook 認知
hook 是一種能夠在不同頁面中共用相同邏輯的方式。在開發者的藍圖設計中，如果多個元件中有相同的邏輯，可以考慮將其抽離成獨立的函數，這樣可以提升代碼的可讀性和可維護性。

步驟
1.在 Next.js 專案目錄 src 下建立一個名為 apollo 的目錄，並在其中再創建一個 hooks 資料夾。根據各功能性或頁面，可以創建不同的子層目錄。

2.在命名上，依照慣例，hook 檔案會以 use 為起頭。例如，假設我在首頁有一個 API Mutation Signin。

如以下步驟：

# 創建目錄結構
mkdir -p src/apollo/hooks

# 創建一個 custom hook 檔案
touch src/apollo/hooks/useSignin.js

3.在 useSignin.js 中，撰寫自訂 hook：

import { useMutation } from '@apollo/client';
import { SIGNIN_MUTATION } from '../mutations/signinMutation';

const useSignin = () => {
  const [signin, { data, loading, error }] = useMutation(SIGNIN_MUTATION);

  return {
    signin,
    data,
    loading,
    error
  };
};

export default useSignin;

這樣，我們就能在任何需要使用 Signin Mutation 的頁面或元件中，簡單地引入和使用這個 custom hook。

import useSignin from '../apollo/hooks/useSignin';

const SigninPage = () => {
  const { signin, data, loading, error } = useSignin();

  const handleSignin = async () => {
    try {
      await signin({ variables: { email: 'example@example.com', password: 'password' } });
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div>
      <button onClick={handleSignin}>Sign In</button>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && <p>Signed in successfully!</p>}
    </div>
  );
};

export default SigninPage;

透過這種方式，我們可以將重複的邏輯抽離，並且提升代碼的可維護性和可讀性。