Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-06-27T05:17:27.250Z
Comments.Text: I have a similar setup, it does work without the header options and httpLink , try:
  const client = new ApolloClient({
      uri: 'https://hybridinteractive.test/api',
  })
Comments.UserDisplayName: HendrikEng
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-06-27T17:58:21.283Z
Comments.Text: @hendrikEng How do you pass the Bearer token then?
Comments.UserDisplayName: Mark Busnelli Jr
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2022-03-09T18:32:18.553Z
Comments.Text: 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.
Comments.UserDisplayName: Jordan
Tags: <vue><plugin-craftql><graphql>
Title: Vue + Apollo + CraftQL
ThreadText: # 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`
  
  ```
  <template>
      <div id="app" class="container mx-auto">
          <h1 class="text-green">Testing</h1>
          <GetNavigation></GetNavigation>
      </div>
  </template>
  
  <script>
      import GetNavigation from './components/GetNavigation.vue'
  
      export default {
          name: 'app',
          components: {
              GetNavigation
          }
      }
  </script>
  
  ```
  
  `/src/components/GetNavigation.vue`:
  
  ```
  <template>
      <div class="navigation">
          <div v-if="loading" class="loading">Loading...</div>
          <ul class="list-reset p-12 md:p-0">
              <li>Navigation List</li>
              <li class="ml-6" v-for="entry of entries" :key="entry.id">
                  <a class="text-green hover:text-red no-underline text-2xl py-1 transition-color" :href="entry.url">{{ entry.title }}</a>
              </li>
          </ul>
      </div>
  </template>
  
  <script>
  
      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'
              }
          }
      }
  </script>
  
  ```
  
  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
  
  