javascript - Svelte-Apollo not sending a request

Question

In my component I am doing this

//register.svelte
    import { gql } from "@apollo/client";
    import { mutation } from "svelte-apollo";
    import { goto } from "@sapper/app";
    import { userStore } from "../stores/userStore";

    const REGISTER = gql`
        mutation register(
            //variables
        ) {
            register(
                registerInput: {
                    //variables
                }
            ) {
                //variables
            }
        }
    `;
    const register = mutation(REGISTER);

    let firstName = "";
    let lastName = "";
    let email = "";
    let password = "";
    let confirmPassword = "";
    let loading = false;
    let response = {};
    let errors = {};

    async function registerUser() {
        try {
            loading = true;
            response = await register({
                variables: {
                    //variables
                },
            });

            const {
                //variables
            } = response.data.register;

            $userStore = {
                //variables
            };
            loading = false;

            // persisting the token line
            goto("/app/dashboard");
        } catch (err) {
            errors = err;
        }
    }

In my markup I have a form where I have a button[type=submit] nested in it, and the function to register is called on submitting the form.

There is a really similar component, login, that is written the same, and yet Login works fine, and register does not even send a request.

Is there anything I could have missed?

I have a debug block checking whether the request object has changed or not, but it does not change at all.

EDIT Here is my logic for configuring the client

import { setContext } from "@apollo/client/link/context";
    // to write gql "import {gql} from '@apollo/client'
    import {
        ApolloClient,
        createHttpLink,
        InMemoryCache,
    } from "@apollo/client";
    import { setClient } from "svelte-apollo";
    import fetch from "cross-fetch";

const httpLink = createHttpLink({
        uri: "validaddresshere",
        fetch,
    });

    const authLink = setContext((_, { headers }) => {
        return {
            headers: {
                ...headers,
                Authorization: localStorage.getItem("token")
                    ? `Bearer ${localStorage.getItem("token")}`
                    : "",
            },
        };
    });

    const client = new ApolloClient({
        link: authLink.concat(httpLink),
        cache: new InMemoryCache(),
    });

EDIT 2 The problem seems to be that I am trying to access a variable that's before initialisation. Which I have initialised. To be more precise, it says I have firstName as undefined, even though you can clearly see it is initialised with let firstName = ""

question from:https://stackoverflow.com/questions/65847404/svelte-apollo-not-sending-a-request

Answer 1

Couple debugging points you could try, Is registerUser() ever being called? If so, does your try/catch fail? ( I would log the error in the catch to see if it does ), 3rd option is that your await register() keeps waiting.

Try logging in the 1st line of registerUser() function & in your catch to get a little bit more information.