vue.js - 如何在 Vuepress 站点中使用 vue-apollo？

Question

在一个 Vuepress 博客站点中，我在我的 markdown 博客文章中插入了一个组件，该组件从数据库获取信息以填充其数据。

我有一个 GraphQL 服务器来提供数据，所以我尝试使用 vue-apollo在我的组件中获取它。

我尝试在 enhanceApp.js 中添加 vue-apollo文件如下:

// 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 组件中是空的，并且永远不会执行查询。

我认为这与 Browser API Access Restrictions 有关，所以我尝试将查询放入 mounted()钩:

// component.vue

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

这给我一个错误:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'defaultClient' of undefined"

这让我想到 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 在我的情况下是否真的不可用。

有什么提示吗？

谢谢!!

Answer 1

您可以使用 window.__APOLLO_CLIENT__在 vuepress 的 vue 组件中使用您的 apollo 配置。