npm run dev

npm run deploy

export const getAuthedUserDetails=async(token:string,url:string)=>{
// const token = "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"
   const res = await axios({
        method: 'get',
        url: url,
        headers: {
            Authorization: `Bearer ${token}`,
            "Content-Type": "application/json"
        },
    })
    // console.log("response == ",res)

    const user = res.data 
    // console.log("authed user == ",user)
    return user
}

그런 다음 반응 쿼리에 전달합니다.

  const query = useQuery(["main-user", token], () =>
    getAuthedUserDetails(token, authed_user)
  );
  const user = query.data as MainAuthedUser;

코드에서 이것을 사용할 때 유형 검사를 제공하기 위해 query.data를 MainAuthedUser로 유형 캐스팅하십시오.
json 응답을 json-to-ts에 붙여넣어 유형을 수동으로 생성했습니다.

그리고 비올라.

이것은 잘 작동하지만 반환된 json의 30%를 간신히 사용하고 있음을 알 수 있습니다. 여기서 GraphQL은 필요한 것만 요청하여 빛을 발하며 유연한 특성으로 인해 더 많은 데이터를 가지고 있습니다.

예를 들어 사용자 쿼리를 살펴보겠습니다.

    "login": "tigawanna",
    "id": 72096712,
    "node_id": "MDQ6VXNlcjcyMDk2NzEy",
    "avatar_url": "https://avatars.githubusercontent.com/u/72096712?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/tigawanna",
    "html_url": "https://github.com/tigawanna",
    "followers_url": "https://api.github.com/users/tigawanna/followers",
    "following_url": "https://api.github.com/users/tigawanna/following{/other_user}",
    "gists_url": "https://api.github.com/users/tigawanna/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/tigawanna/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/tigawanna/subscriptions",
    "organizations_url": "https://api.github.com/users/tigawanna/orgs",
    "repos_url": "https://api.github.com/users/tigawanna/repos",
    "events_url": "https://api.github.com/users/tigawanna/events{/privacy}",
    "received_events_url": "https://api.github.com/users/tigawanna/received_events",
    "type": "User",
    "site_admin": false,
    "name": "Dennis kinuthia",
    "company": null,
    "blog": "https://next-portfolio-zeta-two.vercel.app/",
    "location": "Nairobi Kenya ",
    "email": "[email protected]",
    "hireable": null,
    "bio": "React GraphQL Node Go",
    "twitter_username": null,
    "public_repos": 49,
    "public_gists": 0,
    "followers": 11,
    "following": 39,
    "created_at": "2020-09-29T17:03:46Z",
    "updated_at": "2022-09-01T21:26:46Z",
    "private_gists": 0,
    "total_private_repos": 6,
    "owned_private_repos": 6,
    "disk_usage": 47541,
    "collaborators": 0,
    "two_factor_authentication": false,
    "plan": {
        "name": "free",
        "space": 976562499,
        "collaborators": 0,
        "private_repos": 10000
    }

This is quite the response and you'll notice that it has the
followers and following url which will point you to an endpoint
with the list of them

내 목표는 이와 같은 것을 갖는 것이었습니다. 왜냐하면 이 앱이 다른 사용자와 그들의 프로젝트를 더 쉽게 발견할 수 있기를 원했기 때문입니다.



그러나 한 팔로워에 대한 응답은 다음과 같습니다.

    {
        "login": "Harmon758",
        "id": 9403740,
        "node_id": "MDQ6VXNlcjk0MDM3NDA=",
        "avatar_url": "https://avatars.githubusercontent.com/u/9403740?v=4",
        "gravatar_id": "",
        "url": "https://api.github.com/users/Harmon758",
        "html_url": "https://github.com/Harmon758",
        "followers_url": "https://api.github.com/users/Harmon758/followers",
        "following_url": "https://api.github.com/users/Harmon758/following{/other_user}",
        "gists_url": "https://api.github.com/users/Harmon758/gists{/gist_id}",
        "starred_url": "https://api.github.com/users/Harmon758/starred{/owner}{/repo}",
        "subscriptions_url": "https://api.github.com/users/Harmon758/subscriptions",
        "organizations_url": "https://api.github.com/users/Harmon758/orgs",
        "repos_url": "https://api.github.com/users/Harmon758/repos",
        "events_url": "https://api.github.com/users/Harmon758/events{/privacy}",
        "received_events_url": "https://api.github.com/users/Harmon758/received_events",
        "type": "User",
        "site_admin": false
    },

문제는 팔로우 또는 언팔로우 버튼을 표시할지 여부를 알기 위해 내가 사용자를 팔로우하고 있는지에 대한 정보가 없다는 것입니다.
그래서 나는이 작업을 사용했습니다

쿼리 1: 사용자가 다른 사용자를 팔로우하고 있는지 확인하기 위해 예인 경우 성공을 반환하고 거짓인 경우 404를 반환합니다.

export const getIsUserFollowingMe=async(token:string,me:string,them:string)=>{
    const res = await axios({
            method: 'get',
            url:`https://api.github.com/users/${me}/following/${them}`,
            headers: {
            Authorization: `Bearer ${token}`,
            "Content-Type": "application/json"
            },
        })
        // //console.log("response == ",res)
        if(res.status === 204){ 
         return true
        }
         return false
    }

쿼리 2 - 팔로어 URL 배열을 통과하고 각각의 일시 중지에 대해 비동기 호출을 수행하여 팔로우 상태를 확인하고 최종 개체에 삽입한 다음 배열에 푸시하는 기본 쿼리

export const getUserWithFollowingDetails = async (token: string, url: string, username: string) => {
        //console.log("user with following details ", username, url);
        let followers:any=[]
         const users = await getAuthedUserFollowers(token,url) as Follower[]
    for await (const user of users) {
    // //console.log("user with following details ",username,user.login);
         //@ts-ignore
             user.following_me = await getIsUserFollowingMe(token, username, user.login)

         .catch((e)=>{})
         followers.push(user)
         }
         return followers
        }

이 기술은 눈에 띄게 느릴 뿐만 아니라 속도 제한을 매우 빠르게 소진할 것입니다. 앱의 요점은 사용자 프로필에 깊이 들어가 누가 누구를 팔로우하고 있고 어떤 저장소에서 작업하고 있는지 확인할 때 더 깊이 들어가는 것입니다. 정말 빨리 시간이 초과됩니다

이 모든 것을 회피하고 기능을 제거하고 추종자 카드를 클릭하거나 몇 가지 매우 편리한 기능을 잠금 해제하는 GraphQL API로 전환하는 경우에만 해당 세부 정보를 가져올 수 있습니다.