Как получить данные из graphQL через JS/VUE?

Для получения данных из GraphQL через JavaScript или Vue.js, вам понадобится использовать HTTP-клиент для выполнения запросов к серверу GraphQL и далее обработать полученные данные.

Существует несколько способов выполнить запросы GraphQL из JavaScript/Vue.js. Один из наиболее распространенных способов - использовать библиотеку Apollo Client, которая предоставляет простой интерфейс и инструменты для работы с GraphQL API.

Вот пример того, как можно получить данные из GraphQL с использованием Vue.js и Apollo Client:

1. Установите необходимые зависимости:

npm install apollo-boost vue-apollo graphql

2. Создайте экземпляр клиента Apollo в файле app.js:

import Vue from 'vue';
import ApolloClient from 'apollo-boost';
import VueApollo from 'vue-apollo';

// Создание экземпляра клиента Apollo
const apolloClient = new ApolloClient({
  // URL-адрес вашего сервера GraphQL
  uri: 'http://example.com/graphql',
});

// Установка плагина VueApollo
Vue.use(VueApollo);

// Создание экземпляра VueApollo с использованием клиента Apollo
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
});

new Vue({
  el: '#app',
  apolloProvider,
});

3. Теперь вы можете использовать механизм apollo в своих компонентах Vue для выполнения запросов GraphQL. Вот пример:

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  // Экспорт запроса в виде строки GraphQL
  import { gql } from 'apollo-boost';

  export default {
    apollo: {
      // Запрос GraphQL
      users: gql`
        query {
          users {
            id
            name
          }
        }
      `,
    },
  };
</script>

В этом примере мы использовали механизм apollo в компоненте Vue для выполнения запроса GraphQL, который получает список пользователей с их идентификаторами и именами. Результат запроса будет доступен в компоненте через свойство users и будет автоматически отображаться в шаблоне с помощью директивы v-for.

Конечно, есть и другие способы выполнить запросы GraphQL из JavaScript/Vue.js, например, с использованием библиотеки Axios и написания собственных запросов с использованием GraphQL синтаксиса. Однако использование Apollo Client обычно является предпочтительным, так как он предоставляет широкий набор инструментов для работы с GraphQL и упрощает процесс взаимодействия с сервером.