How to use vue-apollo - 10 common examples

context.rendered = () => {
        // Same for Apollo client cache
        context.apolloState = ApolloSSR.getStates(apolloProvider)
      }
      resolve(app)

const { alertId, projectPath, projectIssuesPath, projectId, page } = domEl.dataset;
  const router = createRouter();

  const resolvers = {
    Mutation: {
      toggleSidebarStatus: (_, __, { cache }) => {
        const sourceData = cache.readQuery({ query: sidebarStatusQuery });
        const data = produce(sourceData, (draftData) => {
          draftData.sidebarStatus = !draftData.sidebarStatus;
        });
        cache.writeQuery({ query: sidebarStatusQuery, data });
      },
    },
  };

  const apolloProvider = new VueApollo({
    defaultClient: createDefaultClient(resolvers, {
      cacheConfig: {
        dataIdFromObject: (object) => {
          // eslint-disable-next-line no-underscore-dangle
          if (object.__typename === 'AlertManagementAlert') {
            return object.iid;
          }
          return defaultDataIdFromObject(object);
        },
      },
      assumeImmutableResults: true,
    }),
  });

  apolloProvider.clients.defaultClient.cache.writeData({
    data: {

const networkInterface = createNetworkInterface({ uri: '__SIMPLE_API_ENDPOINT__' })

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
)

const apolloClient = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
  dataIdFromObject: o => o.id
})

// Install the vue plugin
Vue.use(VueApollo)

const apolloProvider = new VueApollo({
  clients: {
    a: apolloClient,
  },
  defaultClient: apolloClient,
})

// Start the app
new Vue({
  el: '#app',
  apolloProvider,
  render: h => h(App)
})

Query: {
      ...fragmentCacheRedirect(),
    },
  },
});

const client = new ApolloClient({
  cache,
  link: ApolloLink.from([fragmentLinkState(cache), link]),
});

// Install the vue plugin
Vue.use(VueApollo);
Vue.use(ApolloFragment);

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

new Vue({
  render: h => h(App),
  provide: apolloProvider.provide(),
}).$mount('#app');

...headers,
      authorization: token ? `Bearer ${token}` : null
    }
  }
})

// Create the apollo client
const apolloClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
})

// Install the vue plugin
Vue.use(VueApollo)

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  apolloProvider,
  template: '',
  components: { App }
})

import ApolloClient from 'apollo-boost'
import VueApollo    from 'vue-apollo'

// Create the apollo client
export const Apollo = new ApolloClient({
  uri: '/graphql'
});

export const apolloProvider = new VueApollo({
  defaultClient: Apollo
});

return renderer.renderToString(app).then((renderedApp) => {
              // We add the GraphQL state to the SSR state so that we can avoid refetching queries after client load
              // Not using GraphQL? Get rid of this.
              state.APOLLO_STATE = ApolloSSR.getStates(graphQLProvider);
              return {
                renderedApp,
                app,
              };
            });
          });

// So when those components are rendering, the GraphQL queries use the apollo-client cache for their data.
            // The biggest caveat to this approach is that when pre-fetching, the queries don't have access
            // to their Vue component instance. In other words, SSR pre-fetch queries can't set query variables
            // based on component props, state, etc...
            // Prefetch queries only have access to the context data that are provided via the `prefetchAll`
            // method below. In this scenario we provide current route and state data provided by the server.

            // only these components will be prefetched, so we find JSS components in the route data,
            // as well as static components in the route from the router
            const apolloComponentsToSSR = [
              ...matchedComponents,
              ...resolveComponentsInRoute(state.sitecore),
              // got static components etc that need to prefetch GraphQL queries? Add them here.
            ].filter((component) => component.apollo);

            return ApolloSSR.prefetchAll(graphQLProvider, apolloComponentsToSSR, {
              route: router.currentRoute,
              state,
            });
          })
          .then(() => {

region: appSyncConfig.region,
  auth: {
    type: appSyncConfig.authenticationType,
    apiKey: appSyncConfig.apiKey,
  }
}
const options = {
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
    }
  }
}

const client = new AWSAppSyncClient(config, options)
const appsyncProvider = new VueApollo({
  defaultClient: client
})

Vue.config.productionTip = false
Vue.use(VueApollo)

new Vue({
  el: '#app',
  router,
  components: { App },
  provide: appsyncProvider.provide(),
  template: ''
})

* building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

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

const app = new Vue({
    el: '#app',
    provide: apolloProvider.provide(),
    components: {
        'App' : App
    },
    template: ""
});