Это пример демонстрационного проекта, в котором рассказывается, как мы можем использовать GitHub graphql API в Vue с vue apollo.

Сначала я хочу выразить искреннюю благодарность Гийому ЧАО за эту замечательную библиотеку для Vue. У него есть функциональность интерфейса командной строки, а также некоторые симпатичные функции, которые слишком глубоки для этого блога.

Ниже приведены выводы из этого блога.

  1. Что мы строим?
  2. Что такое graphql.
  3. Краткое введение в Github Graphql API.
  4. Создайте токен для GitHub API.
  5. Протестируйте GitHub API в инструменте.
  6. Создайте проект Vue и добавьте файл vue-apollo.
  7. Тестирование с конечной точкой graphql с открытым исходным кодом.
  8. Интегрируйте Github Graphql в наше приложение и протестируйте.
  9. Добавьте код, чтобы получить рубиновый язык.
  10. Добавьте возможность поиска на других языках.
  11. Ссылки и другие подробности.

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 в наше приложение. Теперь нам нужно проверить наше приложение, работает ли оно должным образом. для этого,

в src / query / sample.js

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>

Src / vue-apollo.js

const httpEndpoint = 'https://api.graphql.jobs/'

Затем запустите сервер разработки, используя (я использую пряжу)

yarn serve

Замечательно, мы получили первый результат работы с API-интерфейсом jobs graphql.

Примечание: если возникнут проблемы с терминалом, перейдите по этой ссылке и измените код в файле vue-apollo.js.

8. Интегрируйте Github Graphql в наше приложение и протестируйте.

  1. Создайте файл env.
  2. Обновите файл vue-apollo.
  3. Обновите пользовательский интерфейс.

1. Создайте файл env.

создайте .env в корневом пути приложения и вставьте свой токен аутентификации gitHub.

VUE_APP_GITHUB_GRAPHQL_AUTH_TOKEN=XXXXXXXXXXXXXXXX

2. Обновите файл vue-apollo.

const httpEndpoint = ' https://api.github.com/graphql'

3. Обновите пользовательский интерфейс.

Src / query / sample.js

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 компонента в основном

  1. toolBar.vue - ›отобразит нашу панель навигации
  2. TrendingRepo.vue - ›будет отображать наши тренды репозиториев.

наши представления получили 2 страницы просмотра, на которых будут показаны компоненты.

  1. Home.vue - ›быть корневым путем
  2. Search.vue - ›страница поиска, обсудим позже.

Когда отображается Домашняя страница, мы передаем ruby в качестве языка нашему TrendingRepo компоненту, который будет отображать только ruby трендовые репозитории.

Для этого

объяснение:

мы передаем homeSearchString: ‘ruby’ со страницы Home.vue.

Это будет опора для TrendingRepo.vue.. Эта опора называется searchString.

Это значение prop передается в наш запрос и this.value и получает результат с помощью search.

Довольно просто. Я создал запрос как отдельный файл, чтобы было лучше понять рабочий процесс.

10. Добавьте возможность поиска на других языках.

  1. Обновите файл маршрутов
  2. Добавьте код на Search.vue страницу.
  3. Передайте параметр из toolBar.vue

1. Обновите файл маршрутов.

Необходимо добавить код в src/router.js для перенаправления на страницу поиска.

2. Добавьте код на Search.vue страницу.

объяснение:

При запуске приложения также отображается toolBar. Теперь, когда мы попытались найти языковую панель поиска и щелкнуть по кнопке поиска, она, в свою очередь, вызовет метод searchForData () и передаст данные, полученные из панели поиска, в качестве параметров поиска.

Затем search.vue получит это значение как опору, и это значение будет передано нашему компоненту TrendingRepo.

Компонент TrendingRepo будет искать эти данные в качестве параметра и возвращать результаты.

Довольно просто, правда? Вот и все.

11. Ссылки и прочие подробности.

Спасибо, что прочитали и развернули сайт через netlify по этой ссылке.

Если эта история поможет вам узнать что-нибудь, пожалуйста, купи мне кофе.

GitHub Repo ссылка:

Пожалуйста, хлопайте в ладоши, если вам нравится этот блог, и комментарии приветствуются.