Это пример демонстрационного проекта, в котором рассказывается, как мы можем использовать GitHub graphql API в Vue с vue apollo.
Сначала я хочу выразить искреннюю благодарность Гийому ЧАО за эту замечательную библиотеку для Vue. У него есть функциональность интерфейса командной строки, а также некоторые симпатичные функции, которые слишком глубоки для этого блога.
Ниже приведены выводы из этого блога.
- Что мы строим?
- Что такое graphql.
- Краткое введение в Github Graphql API.
- Создайте токен для GitHub API.
- Протестируйте GitHub API в инструменте.
- Создайте проект Vue и добавьте файл vue-apollo.
- Тестирование с конечной точкой graphql с открытым исходным кодом.
- Интегрируйте Github Graphql в наше приложение и протестируйте.
- Добавьте код, чтобы получить рубиновый язык.
- Добавьте возможность поиска на других языках.
- Ссылки и другие подробности.
1. Что мы строим ?.
Мы создаем приложение Vue, которое полезно для получения репозиториев трендов из GitHub с помощью API-интерфейса graphql и vue-apollo.
Домашняя страница будет получать популярные репозитории с рубинового языка. Также добавлена возможность извлекать тренды репозиториев на основе пользователя.
Эта идея и дизайн взяты из ссылки. Они использовали REST API для получения данных с GitHub. Но я изменил его, чтобы использовать API-интерфейс graphql и возможность поиска. Если вам нужна дополнительная информация, перейдите по указанной выше ссылке.
2. Что такое graphql.
Копирование контента с официального сайта,
GraphQL - это язык запросов для API и среда выполнения для выполнения этих запросов с вашими существующими данными. GraphQL предоставляет полное и понятное описание данных в вашем API, дает клиентам возможность запрашивать именно то, что им нужно, и не более того, упрощает развитие API с течением времени и предоставляет мощные инструменты разработчика.
У Graphql больше плюсов, таких как отсутствие необходимости в управлении версиями, только одна конечная точка для каждого запроса и мутации и другие. В настоящее время мы имеем дело только с приложением, а не с подробным объяснением graphql.
3. Краткое введение в Github Graphql API.
GitHub выпустил собственный API для публичного использования при условии, что нам нужно использовать токен для запросов и мутаций.
Используя этот API, мы можем использовать его для включения любого репо и получения других деталей, но имейте в виду, что GitHub создал этот API для интеграции с нашими собственными приложениями, а не для создания клона GitHub.
https://api.github.com/graphql
Это общая конечная точка для GitHub graphql API.
Для более подробной информации посетите эту ссылку.
4. Создайте токен для GitHub API.
Я не хочу повторять то, что уже есть: D. Пожалуйста, пройдите по этой ссылке и создайте для себя.
Скопируйте токен и сохраните его в надежном месте, потому что вы можете увидеть токен только один раз. Нам нужно использовать этот токен в следующей части.
5. Протестируйте GitHub API в инструменте.
Чтобы протестировать GitHub API, я использовал приложение под названием GraphiQL, которое создано с использованием electronic.js и его версии для Mac. Ссылка на приложение
Нажмите на редактирование заголовков http и добавьте свой токен, как показано ниже.
Теперь нам нужно попробовать простой запрос,
запрос:
query($number_of_repos:Int!) { viewer { name repositories(last: $number_of_repos) { nodes { name } } } }
переменные запроса:
{ "number_of_repos": 3 }
Ага, мы получили результат, это результат моей учетной записи. так что ваш будет другим.
6. Создайте проект Vue и добавьте файл vue-apollo.
Чтобы создать приложение vue, используйте функциональность vue-cli,
vue create
graphql-vue-github
Он откроет интерактивный терминал и выберет нужные вам функции,
Теперь приступим к установке зависимостей.
Из официальных документов для vue-apollo,
Эта библиотека интегрирует apollo в ваши компоненты Vue с декларативными запросами. Совместим с Vue 1.0+ и 2.0+.
Если вы ничего не знаете о graphql и apollo, перейдите по этой ссылке и посмотрите слайд, это просто и стоит вашего времени.
Мы можем добавить vue-apollo в наш проект с помощью команды,
vue add apollo
Он установит все зависимости и создаст vue-apollo.js, который является файлом конфигурации для Vue.
Посетите эту ссылку, чтобы посмотреть, какие все изменения добавлены vue-apollo.
7. Протестируйте с конечной точкой graphql с открытым исходным кодом.
Мы успешно интегрировали vue-apollo в наше приложение. Теперь нам нужно проверить наше приложение, работает ли оно должным образом. для этого,
import gql from 'graphql-tag' export const Sample = gql` query{ jobs{ title } } `
Src / components / HelloWorld.vue
<template> <h3>{{jobs}}</h3> </template> <script> import { Sample } from '../queries/sample' export default { apollo: { jobs: Sample }, data () { return { jobs: [] } } } </script> <style> </style>
const httpEndpoint = 'https://api.graphql.jobs/'
Затем запустите сервер разработки, используя (я использую пряжу)
yarn serve
Замечательно, мы получили первый результат работы с API-интерфейсом jobs graphql.
Примечание: если возникнут проблемы с терминалом, перейдите по этой ссылке и измените код в файле vue-apollo.js.
8. Интегрируйте Github Graphql в наше приложение и протестируйте.
- Создайте файл env.
- Обновите файл vue-apollo.
- Обновите пользовательский интерфейс.
1. Создайте файл env.
создайте .env в корневом пути приложения и вставьте свой токен аутентификации gitHub.
VUE_APP_GITHUB_GRAPHQL_AUTH_TOKEN=XXXXXXXXXXXXXXXX
2. Обновите файл vue-apollo.
const httpEndpoint = ' https://api.github.com/graphql'
3. Обновите пользовательский интерфейс.
import gql from 'graphql-tag' export const Sample = gql` query { repository(owner:"octocat", name:"Hello-World") { issues(last:20, states:CLOSED) { edges { node { title url labels(first:5) { edges { node { name } } } } } } } } `
Src / components / HelloWorld.vue
<template> <h3>{{repository.issues}}</h3> </template> <script> import { Sample } from '../queries/sample' export default { apollo: { repository: Sample }, data () { return { repository: [] } } } </script> <style> </style>
Все готово, теперь все готово, посетите эту ссылку, если произойдет какая-либо ошибка.
9. Добавьте код для получения рубинового языка.
До сих пор мы работали с бессмысленными файлами, и теперь нам нужно создать файлы и проработать реальный вариант использования. Для этого необходимо переименовать некоторые файлы и также создать некоторые из них. В этой части наша цель - получить популярные репозитории с рубинового языка.
Ниже представлена текущая структура проекта нашего приложения,
у нас есть 2 компонента в основном
- toolBar.vue - ›отобразит нашу панель навигации
- TrendingRepo.vue - ›будет отображать наши тренды репозиториев.
наши представления получили 2 страницы просмотра, на которых будут показаны компоненты.
- Home.vue - ›быть корневым путем
- Search.vue - ›страница поиска, обсудим позже.
Когда отображается Домашняя страница, мы передаем ruby
в качестве языка нашему TrendingRepo
компоненту, который будет отображать только ruby
трендовые репозитории.
Для этого
объяснение:
мы передаем homeSearchString: ‘ruby’
со страницы Home.vue
.
Это будет опора для TrendingRepo.vue.
. Эта опора называется searchString.
Это значение prop передается в наш запрос и this.value и получает результат с помощью search.
Довольно просто. Я создал запрос как отдельный файл, чтобы было лучше понять рабочий процесс.
10. Добавьте возможность поиска на других языках.
- Обновите файл маршрутов
- Добавьте код на
Search.vue
страницу. - Передайте параметр из
toolBar.vue
1. Обновите файл маршрутов.
Необходимо добавить код в src/router.js
для перенаправления на страницу поиска.
2. Добавьте код на Search.vue
страницу.
объяснение:
При запуске приложения также отображается toolBar
. Теперь, когда мы попытались найти языковую панель поиска и щелкнуть по кнопке поиска, она, в свою очередь, вызовет метод searchForData ()
и передаст данные, полученные из панели поиска, в качестве параметров поиска.
Затем search.vue
получит это значение как опору, и это значение будет передано нашему компоненту TrendingRepo
.
Компонент TrendingRepo будет искать эти данные в качестве параметра и возвращать результаты.
Довольно просто, правда? Вот и все.
11. Ссылки и прочие подробности.
Спасибо, что прочитали и развернули сайт через netlify по этой ссылке.
Если эта история поможет вам узнать что-нибудь, пожалуйста, купи мне кофе.
GitHub Repo ссылка:
Пожалуйста, хлопайте в ладоши, если вам нравится этот блог, и комментарии приветствуются.