Is it possible to combine inertia with vue apollo?

I wanted a bootstrap of laravel and vue. Found laravel breeze and went with it. But the project equally requires graphql, so I made to combine both. Unfortunately, I'm unable to find any tutorials online showing how to do this. The generated app.js contains something like createInertiaApp(function (App, el) {App.use(somePlugin).mount(el);});

Whereas, the vue apollo documentation uses a different format that adds an apolloProvider: apolloProvider to the createApp instance. Is the combination unreasonable ie either regular vue + apollo or inertia without apollo? Or is the definition style the options vs composition style (not used vue in a while tbh)?

josecameselle

2 years ago

Best Answer

Level 2

Regarding the difference in format between the createInertiaApp function and the createApp function used in the Vue Apollo documentation, this is due to the fact that Inertia.js and Vue Apollo are separate libraries with their own APIs. However, it is still possible to use both libraries together in a project.

You can add an apolloProvider to your Inertia.js application by passing it as an option to the createInertiaApp function:

import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { createApolloClient } from 'vue-apollo';

const apolloClient = createApolloClient({
  //apollo client options
});

createInertiaApp({
  //other options
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) });
    app.use(plugin);
    app.use(apolloClient);
    app.mount(el);
  },
});

nmeri17

2 years ago

Level 1

@josecameselle Is apolloProvider unnecessary? Per https://apollo.vuejs.org/guide/installation.html#_3-apollo-provider

Is the use(plugin) call an alias for (or replacement for the outdated) binding things to the app options object?

Please or to participate in this conversation.