[Vuejs]-How can I use an Apollo mutation in a Quasar component?

by

0👍

From your console error I think you didn’t set up the Apollo client in the Quasar project.

Try to look at this extension to set up the client.

Edit:

You are also outside setup so check the VueApollo documentation.

0👍

I use pure apollo client with quasar and it works fine

  1. install necessary modules

    npm install –save graphql graphql-tag @apollo/client

    npm install –save @vue/apollo-composable

  2. setup main.ts(js), my example from quasar project

  3. try to make mutations and queries

If you need more details and examples how to use GraphQL in Vue3 with the Apollo Client, I recommend to check this tutorial

main.ts (js)

import { createApp, provide, h } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import './assets/styles/main.scss'

import { Quasar, Notify } from 'quasar'

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
import { DefaultApolloClient } from '@vue/apollo-composable'

const httpLink = createHttpLink({
  uri: 'https://spacex-production.up.railway.app/',
})

const cache = new InMemoryCache()

const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

const app = createApp({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: () => h(App),
}).use(Quasar, {
  plugins: {
    Notify
  }
})

app.use(createPinia())
app.use(router)

app.mount('#app')

Leave a comment