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