How to use vue-apollo in a Vuepress site?

2
votes

In a Vuepress blog site, I have a component inserted in my markdown blog posts which gets info from a database to populate its data.

I have a GraphQL server to provide the data, so I am trying to use vue-apollo to fetch it in my component.

I tried to add vue-apollo in the enhanceApp.js file as such:

// 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,
  };
};

And in my component file:

// component.vue

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

But my $apolloData in the Vue component is empty, and the query is never executed.

I thought it had something to do with Browser API Access Restrictions, so I tried putting the query in the mounted() hook:

// component.vue

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

which returns me an error:

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

which makes me think the setup in enhanceApp.js might not be working properly.

I looked a bit into ApolloSSR, but it doesn't seem to suit me, as my GraphQL requests are not usually route-dependent.

A workaround I found is to use either axios or ApolloClient imported directly into my component files:

// 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 => {
        ...;
      })
}

which I guess could work, but I was wondering if vue-apollo is really not usable in my case.

Any hints?

Thanks!!

2
vue.jsgraphqlapollovuepressvue-apollo

2 Answers

1
votes

You can use window.__APOLLO_CLIENT__ with your apollo configuration inside a vue component in vuepress.

1
votes

I was doing the same as you and the way I could do was this: in enhanceApp.js change the ApolloClient to

import { ApolloClient } from 'apollo-boost';

Now in your component use this:

export default {
   data() {
      return {
      allData:[],
    };
   },
apollo:{
  allData:{
    query: SUB_QUERY
  }
 },
methods: {
async geData (){
  const data = await this.$apollo.query(
        {query: SUB_QUERY},
        );
       }
      },
 mounted(){
   this.getData();
   apolloClient.query({
    query: SUB_QUERY
  })
 }
};