使用Graphql查询替换旧的Http请求

引入新的GraphQL查询以替代原有的HTTP请求，用于获取用户信息和讨论数据。这利用了GraphQL的效率和灵活性，可以根据需要精确地请求数据。此更改还包括将相关的user-info属性从'login'更改为'name'，以及在getUserInfo函数中实现异步处理。
share121 · Aug 7, 2024 · dcdc705 · dcdc705
1 parent 105b014
commit dcdc705
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
   <body>
     <section>
       <header>
-        <a class="user-info">
+        <a class="user-info" href="">
           <img class="profile-photo" alt="我的头像" />
           <div class="user-info-text">
             <div class="username">佚名</div>

diff --git a/src/main.ts b/src/main.ts
@@ -59,8 +59,7 @@ LA.init({
     userInfo,
   }: {
     userInfo: {
-      login: string;
-      id: number;
+      name: string;
       avatar_url: string;
       html_url: string;
       public_repos: number;
@@ -70,7 +69,7 @@ LA.init({
       curExp: 6982,
       totalExp: 10000,
       level: userInfo.public_repos,
-      name: userInfo.login,
+      name: userInfo.name,
       profilePhoto: userInfo.avatar_url,
     });
     // renderArticleList([]);
@@ -220,18 +219,70 @@ LA.init({
     return res;
   }
 
-  function getUserInfo(access_token: string): Promise<{
-    login: string;
-    id: number;
+  async function getUserInfo(access_token: string): Promise<{
+    name: string;
     avatar_url: string;
     html_url: string;
     public_repos: number;
   }> {
-    return fetch(`https://api.github.com/user`, {
+    // return fetch(`https://api.github.com/user`, {
+    //   headers: {
+    //     accept: "application/json",
+    //     Authorization: "Bearer " + access_token,
+    //   },
+    // }).then((e) => e.json());
+    const { data } = await graphql({
+      access_token,
+      data: `
+        query {
+          viewer {
+            avatarUrl
+            name
+            repositories {
+              totalCount
+            }
+          }
+        }
+      `,
+    });
+    return {
+      name: data.viewer.name,
+      avatar_url: data.viewer.avatarUrl,
+      html_url: `https://github.com/${data.viewer.name}`,
+      public_repos: data.viewer.repositories.totalCount,
+    };
+  }
+
+  function getDiscussions(access_token: string): Promise<any> {
+    return graphql({
+      access_token,
+      data: `
+        query {
+          viewer {
+            avatarUrl
+            name
+            repositories {
+              totalCount
+            }
+          }
+        }
+      `,
+    });
+  }
+
+  function graphql({
+    access_token,
+    data,
+  }: {
+    access_token: string;
+    data: string;
+  }) {
+    return fetch("https://api.github.com/graphql", {
+      method: "POST",
       headers: {
-        accept: "application/json",
         Authorization: "Bearer " + access_token,
       },
+      body: data,
     }).then((e) => e.json());
   }
 })();