hasura/learn-graphql

[Question] I can't get a mutation to work when following the Hasura's Svelte Apollo tutorial

ItzaMi opened this issue · 0 comments

I'm working with my own api and I can see it work if I use @urql/svelte but since we're using Apollo with React on most of our projects, I would like to see the differences between frameworks using the same dependency.

My lib/client.js looks like this:

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client/core';

function createApolloClient() {
	const httpLink = new HttpLink({
		uri: 'MY_API'
	});

	const cache = new InMemoryCache();

	const client = new ApolloClient({
		httpLink,
		cache
	});

	return client;
}

const client = new createApolloClient();

export default client;

My index.svelte is looking like this

<script>
	import { setClient, mutation } from 'svelte-apollo';
	import { gql } from '@apollo/client/core';
	import { browser } from '$app/env';
	import { onMount } from 'svelte';

	import client from '../lib/client';

	const email = 'AN_EMAIL';
	const password = 'A_PASSWORD';

	let userName;
	let isLoggedIn = false;

	setClient(client);

	const SIGN_IN = gql`
		mutation ($email: String!, $password: String!) {
			userSignIn(email: $email, password: $password) {
				email
				id
				isEnabled
				name
				surname
				userType
			}
		}
	`;

	const signInMutation = mutation(SIGN_IN);

	async function signInAction() {
		await try {
			signInMutation({ variables: { email, password } }).then((result) => console.log(result));
		} catch (error) {
			console.log(error);
		}
	}

	const isUserLoggedIn = () => {
		if (browser && localStorage.getItem('isLoggedIn') && localStorage.getItem('userName')) {
			isLoggedIn = true;
			userName = localStorage.getItem('userName');
		}
	};

	onMount(() => {
		isUserLoggedIn();
	});
</script>

<button on:click={signInAction}>Trigger</button>

{#if isLoggedIn}
	<h1>Welcome {userName}</h1>
{/if}

I honestly can't figure out what I'm missing with the Apollo setup.
I have no errors on my console and my network doesn't show anything when I click the button. The UI seems to work fine with the urql setup.

Could someone point me in the right direction? Thank you!