從零開始掌握Reddit獲取API密鑰與數據分析
你可能也喜歡這些API文章!
使用GitHub GraphQL API時，若star數量超過10k，生成圖表會顯得緩慢。這是因為GitHub API是分頁調用的，每次最多可提取100條數據。盡管如此，每日5k次的調用限制對于個人使用來說已經足夠。
為了更好地管理和展示GitHub倉庫的star數據，我開發了一個小工具。這個工具不僅能生成圖表，還能提供數據下載功能，以便于進一步分析和研究。
在開發這個工具的過程中，我遇到了許多問題，尤其是在使用GitHub GraphQL API時。網上相關的經驗分享不多，因此我決定記錄下這些經驗，以供其他開發者參考。
通過分享我的開發經驗，我希望能夠幫助更多的開發者了解如何使用GitHub GraphQL API。盡管文檔有限，但通過實戰經驗分享，可以加快其他開發者的學習進度。
目前關于GitHub GraphQL API的中文資源較少，因此通過我的分享可以豐富相關領域的資源，為更多開發者提供便利。
工具是用React構建的，并大量使用了react hooks。因此，開發者需要具備一定的React知識，才能深入理解代碼結構。
在使用GraphQL之前，建議通讀GraphQL官網文檔以獲得基本的認知，這樣可以更好地理解如何使用GraphQL進行數據查詢和操作。
本文使用Apollo來實踐GraphQL操作，Apollo提供了豐富的hooks和工具，能幫助開發者更高效地進行GraphQL開發。
首次使用GitHub API時，需要生成一個token進行認證。起初，我將token硬編碼在代碼中，導致部署后token失效。這是因為GitHub能夠自動檢測代碼中的token并使其失效。正確的做法是將token存儲在.env.development.local文件中，以確保安全。
通過GitHub API V4（GraphQL版本），無法一次性獲取所有star數據，只能通過分頁獲取。為此，我使用useLazyQuery進行遞歸調用，逐頁獲取所有star數據。
const [loadStars, { called, data: pageData, variables }] = useLazyQuery(GetStars);
useEffect(() => {
const { stargazers } = pageData.repository;
const { hasNextPage, endCursor } = stargazers.pageInfo;
if (hasNextPage) {
loadStars({
variables: {
...variables,
after: endCursor
}
});
}
}, [pageData, loadStars, called, variables]);GraphQL的分頁處理需要通過遞歸調用實現，使用Apollo的useLazyQuery可以靈活地進行分頁請求，直到獲取所有數據。
React Apollo是GraphQL的最佳實踐之一，新版本提供了各種hooks，使用起來非常方便。它也有對應的server實現，適合全棧項目開發。
Recharts是一個基于React的SVG圖表庫，可以靈活組合多種圖表類型。它充分體現了React的組件化開發理念，組件組合使用非常方便。
Styled-components是CSS-IN-JS概念的最佳實踐，現在寫樣式，我基本依賴這種方式。這種方法能讓樣式和邏輯緊密結合，提升開發效率。
在過去一個月，我開發了多個小項目，從密碼生成器到GitHub工具。這些項目極大地提升了我的開發能力和思考能力。
大部分開發需求都可以通過現有工具解決，只需找到合適的工具即可。對于那些沒有現成工具的需求，通過開發自定義工具也能滿足。
養成總結的習慣很重要，不僅是寫文章，平時也要優化和打磨自己的代碼庫，提升項目質量。
.env.development.local文件中，避免硬編碼在代碼中。此外，分頁獲取star數據需要使用useLazyQuery進行遞歸調用以獲取所有數據。
