Skip to content
Back
DatabasesAccountsWeb

Appwrite in Svelte

View on Discord

Votes

0

Replies

19

Participants

Unknown

Messages

20

djcaliOriginal post

Rank 3: Container

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

Plain text
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();```
Drake

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,
    });
djcali

Rank 3: Container

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

Plain text
      account: null,
      alert: null,
    });```
djcali

Rank 3: Container

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

Drake

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

djcali

Rank 3: Container

Drake

where is state?

Drake

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

djcali

Rank 3: Container

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

Drake

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

djcali

Rank 3: Container

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

I changed to:

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

Rank 3: Container

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

Plain text
    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();```
djcali

Rank 3: Container

How can I get the logged in user's details?

djcali

Rank 3: Container

I see that init function uses set, which must be where it sets the account to the state

Drake

this repo might be pretty outdated...you might want to start fresh or something

djcali

Rank 3: Container

Ok. You have any links to resources or examples to get started with Appwrite and SvelteKit?

djcali

Rank 3: Container

I tried searching and thats how I found this example

Drake

maybe focus on sveltekit by itself

Join the discussion

Reply to this thread by joining our Discord.

Reply on Discord

Need support?_

Join DiscordGet premium support