Как использовать vue-apollo на сайте Vuepress? - PullRequest
Новая
       16

Как использовать vue-apollo на сайте Vuepress?

0 голосов
/ 12 марта 2019

На сайте блога Vuepress в мои записи блога уценки вставлен компонент, который получает информацию из базы данных для заполнения своих данных.

У меня есть сервер GraphQL для предоставления данных, поэтому я пытаюсь использовать vue-apollo для извлечения их в моем компоненте.

Я пытался добавить vue-apollo в файл enhanceApp.js следующим образом: 

// enhanceApp.js
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import VueApollo from 'vue-apollo';

// HTTP connexion to the API
const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:3000/graphql',
});

// Cache implementation
const cache = new InMemoryCache();

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
});

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
});

export default ({ Vue, options }) => {
  Vue.use(VueApollo);
  options = {
    ...options,
    apolloProvider,
  };
};

И в моем файле компонента: 

// component.vue

export default {
  apollo: {
    architects: {
      query: gql`{
          architects {
            nodes {
              name
            }
          }
        }
      `,
    },
  },
};

Но мой $apolloData в компоненте Vue пуст, и запрос никогда не выполняется.

Я думал, что это как-то связано с Ограничениями доступа API браузера , поэтому я попытался поместить запрос в ловушку mounted(): 

// component.vue

export default {
  mounted() {
    this.$apollo
      .query({
        query: gql`{
          architects {
            nodes {
              name
            }
          }
        }
      `,
      })
      .then(result => {
        ...;
      })
}

, который возвращает мне ошибку:

vue.runtime.esm.js? 2b0e: 619 [Vue warn]: ошибка в подключенном хуке: «Ошибка типа: невозможно прочитать свойство defaultClient из неопределенного» * ​​1026 *

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

Я немного посмотрел на ApolloSSR , но, похоже, он мне не подходит, так как мои запросы GraphQL обычно не зависят от маршрута.

Обходной путь, который я нашел, - это использовать axios или ApolloClient, импортированные непосредственно в мои файлы компонентов: 

// component.vue

<script>
import gql from 'graphql-tag';
import ApolloClient from 'apollo-boost';
const apolloClient = new ApolloClient({
  // You should use an absolute URL here
  uri: 'http://localhost:3000/graphql',
});

export default {
mounted() {
    apolloClient
      .query({
        query: gql`{
          architects {
            nodes {
              name
            }
          }
        }
      `,
      })
      .then(result => {
        ...;
      })
}

что, я думаю, могло бы сработать, но мне было интересно, действительно ли vue-apollo неприменимо в моем случае.

Есть подсказки?

Спасибо !!

...