Github GraphQL API 真香實踐

時間 2019-11-06

標籤 github graphql api 實踐欄目 Git 简体版

原文原文鏈接

背景

GitHub 目前不能統計查看一個倉庫每日新增多少 star，找了幾個第三方工具，也沒有這樣的功能。爲了知足個人小需求，這兩天作了個小工具，輸入倉庫地址，就能夠方便地以圖表方式展示出來，還能夠生成並下載圖片。css

體驗地址前端

固然，若是 star 數過大，超過 10k，生成最終圖表會略慢，由於 github 接口是分頁調取的，每次最多隻能拉取 100 條數據，並且接口有限額，~~天天有 5k 次調用~~好像很快就能重置回 5k😀。對我我的用，足夠了。node

初衷

這篇文章記錄下我在作這個工具過程當中遇到的一些問題和注意事項，尤爲是 GitHub GraphQL API 的使用問題，網上有關這方面的經驗分享比較少，因此寫下來，方便感興趣的開發人員參考。react

前提&注意

工具使用 React 構建，而且大量地，深度地使用了 react hooks，因此對React.js有所要求
對 GraphQL 有個基本認知，讀一遍官網文檔，足夠了
文章使用apollo來實踐 GraphQL 操做
本文不太適合小白，一些知識點我會列出參考連接，可是不會詳細解釋

遇到的坑

GitHub Token 問題

GitHub 有個很是棒的在線GraphQL 查詢工具，若是本身定製化使用 GitHub API，是須要走 token 認證後，才能正常使用。因此首先，我得在今生成一個 token。因爲是第一次使用 GitHub API，因此也讀了下官網文檔，大概知道 token 怎樣的一個使用流程。git

有了 token，就能夠開始愉快地使用 API 了。一開始爲了快速看到效果，我把 token 寫死在了代碼裏，本地開發沒問題，但是一旦上傳到 GitHub，走部署流程，就發現 token 已經失效了。來回折騰了兩三次，一開始我還覺得 GitHub 出問題了，雖然我知道 token 確定不能寫死在代碼裏，這是常識，但我想搞清楚是哪一個環節出問題了。查來查去，原來 GitHub 能自動識別代碼裏有沒有 token，有則強制讓該 token 失效。因此，仍是老老實實地把 token 放在了配置文件裏.env.development.local，走 CRA 的打包流程，這個問題算是解決了。github

分頁獲取 star

GitHub API V4，也就是 GraphQL 版本，一開始我是寄但願於有能一次性獲取代碼倉庫全部的 star 詳細列表數據的接口，找了一番沒找到，想一想也很正常：若是過一個項目 star 數目過多，一次性的操做就有點重了。分頁獲取是比較合理的，因此若是想獲得全部的 star 詳細數據，就得不斷去分頁調取數據，直至最後一頁。編程

那麼問題又來了，GraphQL 如何實現分頁依次獲取 star 數據。這個在 REST 風格的 API 裏可能好實現一些，思路無非就是遞歸調用分頁接口，到最後一頁，結束調用。後端

獲取分頁數據的 GraphQL 語句

query GetStars($name: String!, $owner: String!, $after: String) {
  repository(name: $name, owner: $owner) {
    createdAt
    stargazers(first: 100, after: $after) {
      edges {
        node {
          id
          login
          name
          avatarUrl
        }
        starredAt
      }
      pageInfo {
        startCursor
        endCursor
        hasNextPage
      }
      totalCount
    }
  }
}
複製代碼

GraphQL 如何作遞歸調用？這種需求仍是比較常見的，通常在開發文檔裏就能找到一些解決的思路。既然使用的是 apollo，就去文檔裏翻一翻，果真找到了對口的 API：useLazyQuery。api

The useLazyQuery hook is perfect for executing queries in response to events other than component rendering. This hook acts just like useQuery, with one key exception: when useLazyQuery is called, it does not immediately execute its associated query. Instead, it returns a function in its result tuple that you can call whenever you're ready to execute the query.數組

大意就是 useLazyQuery 能夠經過數組解構方式拿到一個觸發 GraphQL 請求的函數，放在合適的時機去調用，很是靈活。有了它，咱們就能夠實現遞歸調用了：

// 方便理解，去掉了無關邏輯，貼出核心代碼
  const [loadStars, { called, data: pageData, variables }] = useLazyQuery(GetStars);
  // ...
  useEffect(() => {
    const { stargazers } = pageData.repository;
    const { edges, totalCount } = stargazers;
    const { hasNextPage, endCursor } = stargazers.pageInfo;
    // 至此數據拿到了，處理下，而後返回
      return { ...oldData, ...tmpObj, total: totalCount };
    });
    // 還有下一頁，繼續調用 loadStars
    if (hasNextPage) {
      loadStars({
        variables: {
          ...variables,
          after: endCursor
        }
      });
    } else {
      setFinished(true);
    }
    // ...
  }, [pageData, loadStars, called, variables]);
複製代碼