'How to make login with Vue Apollo composition api?

I'm trying to set up an authorization system to a laravel api using Vue Apollo and composition API.

Server side (mutation)

login(input: LoginInput @spread): AccessToken!

input LoginInput {
    email: String!
    password: String!
}

Client side main.js

import { createApp, provide, h } from "vue";
import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
} from "@apollo/client/core";
import { DefaultApolloClient } from "@vue/apollo-composable";


import App from './App.vue'
import router from './router'
import { provideApolloClient } from "@vue/apollo-composable";


const httpLink = createHttpLink({
   uri: 'http://localhost/graphql',
 })
 const cache = new InMemoryCache()
 const apolloClient = new ApolloClient({
   link: httpLink,
   cache,
 })

provideApolloClient(apolloClient);

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

  render: () => h(App),
});

app.use(router).mount('#app')

Login.vue

<script>
import { useMutation } from "@vue/apollo-composable";
import gql from "graphql-tag";
import LoginForm from "../../components/Form/LoginForm.vue";

export default {
  components: {
    LoginForm,
  },
  setup() {
    const { mutate: login } = useMutation(gql`
      mutation login($email: String!, $password: String!) {
        login(input: { email: $email, password: $password }) {
          token
        }
      }
    `);

    return {
      login,
    };
  },
};
</script>

<template>
  <h1>Login</h1>
  <router-link :to="{ name: 'Home' }">back</router-link>
  <LoginForm />
  <router-link :to="{ name: 'LostPassword' }">lost password</router-link> or
  <button
    type="button"
    @click="login({ email: '[email protected]', password: 'password' })"
  >
    Login
  </button>
</template>

When I press the login button I don't get any result and I don't understend the reason.

I'd love to put all my mutations and queries in a separate file to import.

I also would love to put the mutation in a login function.

One more question: is there any way to write a better code? this is very verbose: Any suggestions?

Can anyone help me? Thank you in advance

Valerio



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source