日本中文字幕乱码免费,日本高清h色视频在线观看

GitHub GraphQL API 的局限

使用GitHub GraphQL API時(shí)，若star數(shù)量超過10k，生成圖表會(huì)顯得緩慢。這是因?yàn)镚itHub API是分頁調(diào)用的，每次最多可提取100條數(shù)據(jù)。盡管如此，每日5k次的調(diào)用限制對于個(gè)人使用來說已經(jīng)足夠。

小工具的開發(fā)

為了更好地管理和展示GitHub倉庫的star數(shù)據(jù)，我開發(fā)了一個(gè)小工具。這個(gè)工具不僅能生成圖表，還能提供數(shù)據(jù)下載功能，以便于進(jìn)一步分析和研究。

初衷

記錄開發(fā)過程

在開發(fā)這個(gè)工具的過程中，我遇到了許多問題，尤其是在使用GitHub GraphQL API時(shí)。網(wǎng)上相關(guān)的經(jīng)驗(yàn)分享不多，因此我決定記錄下這些經(jīng)驗(yàn)，以供其他開發(fā)者參考。

提供開發(fā)參考

通過分享我的開發(fā)經(jīng)驗(yàn)，我希望能夠幫助更多的開發(fā)者了解如何使用GitHub GraphQL API。盡管文檔有限，但通過實(shí)戰(zhàn)經(jīng)驗(yàn)分享，可以加快其他開發(fā)者的學(xué)習(xí)進(jìn)度。

豐富社區(qū)資源

目前關(guān)于GitHub GraphQL API的中文資源較少，因此通過我的分享可以豐富相關(guān)領(lǐng)域的資源，為更多開發(fā)者提供便利。

前提與注意

使用React開發(fā)

工具是用React構(gòu)建的，并大量使用了react hooks。因此，開發(fā)者需要具備一定的React知識，才能深入理解代碼結(jié)構(gòu)。

GraphQL基礎(chǔ)知識

在使用GraphQL之前，建議通讀GraphQL官網(wǎng)文檔以獲得基本的認(rèn)知，這樣可以更好地理解如何使用GraphQL進(jìn)行數(shù)據(jù)查詢和操作。

使用Apollo

本文使用Apollo來實(shí)踐GraphQL操作，Apollo提供了豐富的hooks和工具，能幫助開發(fā)者更高效地進(jìn)行GraphQL開發(fā)。

遇到的坑

GitHub Token 安全問題

首次使用GitHub API時(shí)，需要生成一個(gè)token進(jìn)行認(rèn)證。起初，我將token硬編碼在代碼中，導(dǎo)致部署后token失效。這是因?yàn)镚itHub能夠自動(dòng)檢測代碼中的token并使其失效。正確的做法是將token存儲(chǔ)在.env.development.local文件中，以確保安全。

分頁獲取Star數(shù)據(jù)

通過GitHub API V4（GraphQL版本），無法一次性獲取所有star數(shù)據(jù)，只能通過分頁獲取。為此，我使用useLazyQuery進(jìn)行遞歸調(diào)用，逐頁獲取所有star數(shù)據(jù)。

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的遞歸調(diào)用

GraphQL的分頁處理需要通過遞歸調(diào)用實(shí)現(xiàn)，使用Apollo的useLazyQuery可以靈活地進(jìn)行分頁請求，直到獲取所有數(shù)據(jù)。

工具分享

React-Apollo

React Apollo是GraphQL的最佳實(shí)踐之一，新版本提供了各種hooks，使用起來非常方便。它也有對應(yīng)的server實(shí)現(xiàn)，適合全棧項(xiàng)目開發(fā)。

Recharts

Recharts是一個(gè)基于React的SVG圖表庫，可以靈活組合多種圖表類型。它充分體現(xiàn)了React的組件化開發(fā)理念，組件組合使用非常方便。

Styled-components

Styled-components是CSS-IN-JS概念的最佳實(shí)踐，現(xiàn)在寫樣式，我基本依賴這種方式。這種方法能讓樣式和邏輯緊密結(jié)合，提升開發(fā)效率。

經(jīng)驗(yàn)總結(jié)

項(xiàng)目開發(fā)的樂趣

在過去一個(gè)月，我開發(fā)了多個(gè)小項(xiàng)目，從密碼生成器到GitHub工具。這些項(xiàng)目極大地提升了我的開發(fā)能力和思考能力。

善用工具滿足需求

大部分開發(fā)需求都可以通過現(xiàn)有工具解決，只需找到合適的工具即可。對于那些沒有現(xiàn)成工具的需求，通過開發(fā)自定義工具也能滿足。

持續(xù)總結(jié)與優(yōu)化

養(yǎng)成總結(jié)的習(xí)慣很重要，不僅是寫文章，平時(shí)也要優(yōu)化和打磨自己的代碼庫，提升項(xiàng)目質(zhì)量。

參考連接

FAQ

問：如何解決GitHub無法查看每日新增star數(shù)量的問題？

答：可以利用GitHub GraphQL API開發(fā)一個(gè)自制工具，通過輸入倉庫地址，生成圖表以展示star增長情況，并提供下載功能。

問：使用GitHub GraphQL API時(shí)，有哪些局限性需要注意？

答：GitHub GraphQL API受分頁限制，star數(shù)量超過10k時(shí)生成圖表會(huì)比較慢，因?yàn)槊看巫疃嘀荒芴崛?00條數(shù)據(jù)。此外，每日調(diào)用次數(shù)限制為5k次，但對于個(gè)人使用已經(jīng)足夠。

問：在使用GitHub GraphQL API開發(fā)過程中遇到了哪些常見問題？

答：一個(gè)常見問題是GitHub Token的安全問題，需要將token安全地存儲(chǔ)在.env.development.local文件中，避免硬編碼在代碼中。此外，分頁獲取star數(shù)據(jù)需要使用useLazyQuery進(jìn)行遞歸調(diào)用以獲取所有數(shù)據(jù)。