How can I use an Apollo mutation in a Quasar component?

Question

I have installed and configured vue-apollo into my Quasar project. I can do queries with it, but I ran into a problem with useMutation().

How can I use mutation in a Quasar component?

My code:

<script lang="ts">

import gql from 'graphql-tag'
import { defineComponent } from 'vue'
import { useMutation } from '@vue/apollo-composable';

export default defineComponent({
    name: 'Login',
    data () {
        return {
            username: 'David_test',
            password: 'david'
        }
    },
    
methods:{
    login () {
        const { mutate: login } = useMutation(
            gql`
                mutation login(
                    $username: String!
                    $password: String!
                ) {
                    login (
                        username: $username
                        password: $password
                    ) {
                        token
                    }
                }
            `, () => (
            {
                variables: {
                    username: this.username,
                    password: this.password
                }
            })
        )
        
        login()
        
    }
}
})
</script>

Error message:

here is an image of the error message

package.json:
{
 "dependencies": {
    "@quasar/extras": "^1.0.0",
    "pinia": "^2.0.11",
    "quasar": "^2.6.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0"
  },
  "devDependencies": {
    "@quasar/app-vite": "^1.0.0",
    "@quasar/quasar-app-extension-apollo": "^2.0.0-beta.5",
    "@types/node": "^12.20.21",
    "autoprefixer": "^10.4.2",
    "typescript": "^4.5.4"
  },
  "engines": {
    "node": "^18 || ^16 || ^14.19",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

I tried to follow the Apollo documentation: https://v4.apollo.vuejs.org/guide-composable/mutation.html

The goal shuold be to get a token from the backend API.

Answer 1

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.

Answer 2

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')