Appwrite in Svelte

Hello, I'm starting to learn Svelte and wanted to connect my little demo app with Appwrite. I saw the todo Svelte demo and was taking some of the logic in that demo but came across the error Argument of type 'User<Preferences>' is not assignable to parameter of type 'null | undefined'. at the state.init(user); line. also getting Type 'Alert' is not assignable to type 'null' on the other line i have marked.

Not am I only new to Svelte but also typescript. Any ideas??

TypeScript

import { get, writable } from 'svelte/store';
import { sdk, server } from './appwrite';

export type Alert = {
    color: string;
    message: string;
  };
  


const createState = () => {
    const { subscribe, set, update } = writable({
      account: null,
      alert: null,
    });
  
    return {
      subscribe,
      signup: async (email: string, password: string, name: string) => {
        return await sdk.account.create('unique()', email, password, name);
      },
      login: async (email: string, password: string) => {
        await sdk.account.createEmailSession(email, password);
        const user = await sdk.account.get();
     -----> state.init(user);
      },
      logout: async () => {
        await sdk.account.deleteSession('current');
      },
      alert: async (alert: Alert) =>
        update((n) => {
     ------>   n.alert = alert;
          return n;
        }),
      init: async (account = null) => {
        return set({ account, alert: null });
      },
    };
  };

  export const state = createState();```

TL;DR

The user is having issues with using Appwrite with SvelteKit and is seeking resources or examples to get started. They found a repository that might be outdated and are wondering how to get the logged in user's details. They were able to log in using a specific function. They made some changes to the code and are now trying to understand the logic better. They encountered an error related to the `state.init()` function. Someone suggested updating the type in the `writable` function to include the `User` type. The user also encountered some errors related to the `Alert` type. Another person suggested defining the type for the `

You need to define the type for your writable. Based on what you put:

TypeScript

    const { subscribe, set, update } = writable({
      account: null,
      alert: null,
    });

TypeScript infers account and alert can only be null so you can't assign anything to it. You would have to tell it it can be User or null...something like:

TypeScript

    const { subscribe, set, update } = writable<{account: User | null, alert: Alert | null}>({
      account: null,
      alert: null,
    });

Hi Steven,

So that fixed the alert, but still having issues with state.init(user)

const user = await sdk.account.get(); user is defined as const user: Models.User<Models.Preferences>

I updated like you suggested

TypeScript

      account: null,
      alert: null,
    });```

The error now is Cannot find name 'User'.ts(2304) type User = /*unresolved*/ any

use Models.User<Models.Preferences> isntead of just User

where is state?

This is where I got all the logic from https://github.com/appwrite/demo-todo-with-svelte/blob/main/src/store.ts It is the very last line

so state.init() calls this: https://github.com/appwrite/demo-todo-with-svelte/blob/9be013bb6d246a2f175856a580f4f23c36bd1e1d/src/store.ts#L97-L100

based on what i told you before, what do you think the fix is?

I think this is the answer? init: async (account: Models.User<Models.Preferences>) => { return set({ account, alert: null }); },

sounds about right...unless you should be allowed to pass null as well

I'm trying to understand as best I can. I think I like dart much better than TypeScript haha.

I changed to:

TypeScript

        return set({ account, alert: null });
      },```

So I was able to get logged in by using state.login('user@test.com', 'password');

TypeScript

    const { subscribe, set, update } = writable<{account: Models.User<Models.Preferences> | null, alert: Alert | null}>({
      account: null,
      alert: null,
    });
  
    return {
      subscribe,
      signup: async (email: string, password: string, name: string) => {
        return await sdk.account.create('unique()', email, password, name);
      },
      login: async (email: string, password: string) => {
        await sdk.account.createEmailSession(email, password);
        const user = await sdk.account.get();
        state.init(user);
      },
      logout: async () => {
        await sdk.account.deleteSession('current');
      },
      alert: async (alert: Alert) =>
        update((n) => {
          n.alert = alert;
          return n;
        }),
      init: async (account: Models.User<Models.Preferences> | null) => {
        return set({ account, alert: null });
      },
    };
  };

  export const state = createState();```