How to use Graphql Vue Apollo on older IOS / older browser?

Question

I just realize and noticing that my vue app doesn't work well on some older browsers (ios 9 for example). I used the vue-apollo to get data from graphql api using django graphene , but it doesn't event get called on the first load when i debug it.

Previously i get error like "fetch is not found globally", but then i already fix it by adding "unfetch" to the ApolloClient config. But i still can't see on xhr network the api get called. I haven't try with isomorphic-fetch

Here's my code for the apollo client config:

// src/utils/graphql.js
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import fetch from 'unfetch'

export default new ApolloClient({
  // Provide the URL to the API server.
  link: new HttpLink({ uri: '/api/', fetch: fetch }),
  // Using a cache for blazingly
  // fast subsequent queries.
  cache: new InMemoryCache(),
  connectToDevTools: true
});

and i specify it like so in the main.js

import apolloClient from '../utils/graphql'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo);

Vue.config.silent = true

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
  defaultOptions: {
    $loadingKey: "loading"
  }
})

This is example of the apollo that i use inside the main.js as well using the smart query:

apollo: {
  currentUser: {
    query: GET_LOGGED_USER,
    skipQuery() {
      return this.skipUser
    }
  }
}

How can i make it work on ios 9 / any older browser?

Answer 1

Ok, after debugging it for two days, I finally found out the issue. So it turns out that i need to add and configure babel/polyfill as well in order to make it works, and add it to the entry point of my app.

Hope everyone who has the same issue can learn from my mistake lol