<p>I'm starting to dive deeper w/Vue + Apollo + CraftQL but I'm not getting any data on my <code>http://localhost:8080/</code> but it is <em>mostly working</em> on my Laravel Valet host of <code>https://hybridinteractive.test/test.html</code> (which is where Craft CMS is served from). I'm trying to simulate having my content served up from one location and consuming the data directly thru my Vue app.</p>

<p>So I'm wondering if it's a weird CORS issue? I have my access token working under the <code>CraftQL</code> settings and verified that it's working.</p>

<p>At any rate, I hope I'm missing something simple here and thanks for reading!</p>

<p>Here's my <code>main.js</code>:</p>

<pre><code>import Vue from 'vue'
import App from './App.vue'
import ApolloClient from "apollo-client";
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from "vue-apollo";

Vue.config.productionTip = false;

// HTTP connection to the API
const httpLink = new HttpLink({
    uri: 'https://hybridinteractive.io/api',
    fetchOptions: {
        mode: 'no-cors',
    },
})

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

// Create the apollo client
const client = new ApolloClient({
    link: httpLink,
    opts: {
        headers: {
            Authorization:
                "Bearer REDACTED",
        }
    },
    cache,
    connectToDevTools: true
});

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

Vue.use(VueApollo);

/* eslint-disable no-new */
new Vue({
    render: h =&gt; h(App),
    components: { App },
    provider: apolloProvider,
}).$mount('#app');
</code></pre>

<p><code>App.vue</code></p>

<pre><code>&lt;template&gt;
    &lt;div id="app" class="container mx-auto"&gt;
        &lt;h1 class="text-green"&gt;Testing&lt;/h1&gt;
        &lt;GetNavigation&gt;&lt;/GetNavigation&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
    import GetNavigation from './components/GetNavigation.vue'

    export default {
        name: 'app',
        components: {
            GetNavigation
        }
    }
&lt;/script&gt;
</code></pre>

<p><code>/src/components/GetNavigation.vue</code>:</p>

<pre><code>&lt;template&gt;
    &lt;div class="navigation"&gt;
        &lt;div v-if="loading" class="loading"&gt;Loading...&lt;/div&gt;
        &lt;ul class="list-reset p-12 md:p-0"&gt;
            &lt;li&gt;Navigation List&lt;/li&gt;
            &lt;li class="ml-6" v-for="entry of entries" :key="entry.id"&gt;
                &lt;a class="text-green hover:text-red no-underline text-2xl py-1 transition-color" :href="entry.url"&gt;{{ entry.title }}&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;

    import { GET_NAVIGATION } from '../queries.js';

    export default {
        name: 'GetNavigation',
        data() {
            return {
                entries: [],
                loading: 0
            }
        },
        apollo: {
            entries: {
                query: GET_NAVIGATION,
                variables: {
                    section: "pages",
                    limit: 1
                },
                loadingKey: 'loading'
            }
        }
    }
&lt;/script&gt;
</code></pre>

<p>Finally, my <code>src/queries.js</code>:</p>

<pre><code>import { gql } from 'apollo-boost';

export const GET_NAVIGATION = gql`
query getNavigation($section: [SectionsEnum], $limit: Int) {
  entries(section: $section, level: 1, hideFromNavigation: false, limit: $limit) {
    id
    title
    url
  }
}
`;

export const HELLO = gql`
query {
  helloWorld
}
`;

export const ENTRIES_QUERY = gql`
query GetBlogEntries($section: [SectionsEnum], $limit: Int) {
  entries(section: $section, limit: $limit) {
    uri
    title
  }
}
`;
</code></pre>

CC BY-SA 4.0
2019-06-27T05:17:27.250Z
I have a similar setup, it does work without the header options and httpLink , try:
const client = new ApolloClient({
    uri: 'https://hybridinteractive.test/api',
})
HendrikEng
CC BY-SA 4.0
2019-06-27T17:58:21.283Z
@hendrikEng How do you pass the Bearer token then?
Mark Busnelli Jr
CC BY-SA 4.0
2022-03-09T18:32:18.553Z
Just wondering if this was ever figured out? i'm trying to add the bearer token to my api call as well and haven't had any success.
Jordan
<vue><plugin-craftql><graphql>
Vue + Apollo + CraftQL
# Vue + Apollo + CraftQL

(Asked by: username_0 on 2019-06-27)

I'm starting to dive deeper w/Vue + Apollo + CraftQL but I'm not getting any data on my http://localhost:8080/ but it is mostly working on my Laravel Valet host of https://hybridinteractive.test/test.html (which is where Craft CMS is served from). I'm trying to simulate having my content served up from one location and consuming the data directly thru my Vue app.
So I'm wondering if it's a weird CORS issue? I have my access token working under the CraftQL settings and verified that it's working.
At any rate, I hope I'm missing something simple here and thanks for reading!
Here's my main.js:
import Vue from 'vue'
import App from './App.vue'
import ApolloClient from "apollo-client";
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from "vue-apollo";

Vue.config.productionTip = false;

// HTTP connection to the API
const httpLink = new HttpLink({
    uri: 'https://hybridinteractive.io/api',
    fetchOptions: {
        mode: 'no-cors',
    },
})

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

// Create the apollo client
const client = new ApolloClient({
    link: httpLink,
    opts: {
        headers: {
            Authorization:
                "Bearer REDACTED",
        }
    },
    cache,
    connectToDevTools: true
});

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

Vue.use(VueApollo);

/* eslint-disable no-new */
new Vue({
    render: h => h(App),
    components: { App },
    provider: apolloProvider,
}).$mount('#app');

App.vue




/src/components/GetNavigation.vue:




Finally, my src/queries.js:
import { gql } from 'apollo-boost';

export const GET_NAVIGATION = gql`
query getNavigation($section: [SectionsEnum], $limit: Int) {
  entries(section: $section, level: 1, hideFromNavigation: false, limit: $limit) {
    id
    title
    url
  }
}
`;

export const HELLO = gql`
query {
  helloWorld
}
`;

export const ENTRIES_QUERY = gql`
query GetBlogEntries($section: [SectionsEnum], $limit: Int) {
  entries(section: $section, limit: $limit) {
    uri
    title
  }
}
`;

**Tags:** vue, plugin-craftql, graphql

> **Comments:**
> **username_1**: I have a similar setup, it does work without the header options and httpLink , try: const client = new ApolloClient({     uri: 'https://hybridinteractive.test/api', })  
> **username_0**: @hendrikEng How do you pass the Bearer token then?  
> **username_2**: Just wondering if this was ever figured out? i'm trying to add the bearer token to my api call as well and haven't had any success.  

---

## 0 answers

