REST API Github с помощью vite react и react-query


Введение

Github — это решение для удаленного контроля исходных текстов, которое может выступать в качестве источника правды и удаленного резервного копирования для вашей локальной системы версионирования, в данном случае Git.
Он облегчает разработку и сотрудничество при работе с небольшими и большими базами данных и имеет удобный веб-клиент, который предлагает вам все необходимые инструменты.
Но как разработчик вы наверняка захотите больше или очень специфический макет, который не поддерживается в их родной реализации, и тут на помощь приходят API. Github имеет один из лучших API, с которыми я работал. Это руководство начнется с реализации REST, затем мы перейдем к их GraphQL api.
финальный проект

Официальные документы по Github Api

tigawanna / gitpals

маленькое глупое приложение, которое я называю gitpals

Расширяйте свой круг общения на github и находите по пути новых разработчиков

использует github rest api и react с vite /br>

скрипты

npm run dev
Вход в полноэкранный режим выйти из полноэкранного режима

запустить сервер разработчиков

npm run deploy
Войти в полноэкранный режим Выйти из полноэкранного режима

Чтобы развернуть ваш сайт на gitpages

*Для этого необходимо выполнить ряд первоначальных настроек

Добавьте ваш персональный токен доступа к github в поле , чтобы очистить его из локального хранилища, нажмите на иконку с изображением профиля в правой части панели инструментов

предварительный просмотр в реальном времени по ссылке на живую страницу

открыт для сотрудничества

создайте форк репозитория и сделайте pull request, если вы достигнете какого-либо прогресса

полезные ссылки

тестирование с помощью postman

Посмотреть на GitHub

для начала я бы рекомендовал настроить среду тестирования api
и перед этим нам также понадобится персональный токен доступа

Затем мы используем api клиент, например postman или его альтернативы.
и установим токен в заголовке следующим образом

не забудьте заменить ключевое слово Bearer на фактический токен и
также добавьте application/json, как показано ниже


и, например, нажатие на конечную точку https://api.github.com/user вернет вам текущего зарегистрированного пользователя.
Теперь вы можете экспериментировать с запросами и убедиться, что они работают, прежде чем использовать их.

Убедившись в этом, мы можем приступить к настройке react, в данном случае я использовал axios с react-query.

и вышеприведенный запрос будет выглядеть примерно так

Сначала мы сделаем функцию запроса

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
}
Войти в полноэкранный режим Выйти из полноэкранного режима

затем мы передаем его в react-query

  const query = useQuery(["main-user", token], () =>
    getAuthedUserDetails(token, authed_user)
  );
  const user = query.data as MainAuthedUser;
Войти в полноэкранный режим Выйти из полноэкранного режима

type casting query.data в MainAuthedUser, чтобы дать нам проверку типов при использовании этого в коде.
Я сгенерировал типы вручную, вставив json-ответ в json-to-ts.

И альт.

Это работает отлично, но вы заметите, что мы едва используем 30% возвращаемого json, и именно здесь 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": "denniskinuthiaw@gmail.com",
    "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
    }
Войти в полноэкранный режим Выйти из полноэкранного режима

Это довольно большой ответ, и вы заметите, что в нем есть
последователи и следующий url, который укажет вам на конечную точку
со списком этих пользователей.

Моей целью было получить нечто подобное, потому что я хотел, чтобы это приложение облегчило поиск других пользователей и их проектов.

но ответ для одного подписчика выглядит следующим образом

    {
        "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 — основной запрос, который проходит через массив адресов последователей и для каждого из них делает паузу, чтобы выполнить асинхронный вызов для проверки статуса следования и вставить его в конечный объект, а затем поместить его в массив

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, который разблокирует некоторые очень удобные функции.

Оцените статью
devanswers.ru
Добавить комментарий