Problem setting awaited value to state

[andredewaard]

I'm trying to implement a store with a generic value and set a value returned from an api call.

This is my store

export const useAuthStore = <T = AuthUserResource>({ typeGuard = isAuthUserResource }: { typeGuard?: <T>(user: unknown) => user is T } = {}) => {
  
  const service = useAuthService<T>({ typeGuard })

  return defineStore('auth', {
    state: () => ({
      user: {} as T
    }),
    actions: {
      set(u: UnwrapRef<T>) {
        this.user = u
      },
      async login(body: LoginRequest) {
        const data = await service.login({ body })
        if (typeGuard<T>(data)) this.user = data
      }
    },
    getters: {
      isAuthenticated: (state) => typeGuard<T>(state.user) ?? false
    }
  })
}

and the service is

export const useAuthService = <T = AuthUserResource>({typeGuard = isAuthUserResource}: { typeGuard?: <T>(user: unknown) => user is T } = {}) => {
  
  const {post} = apiWrapper({prefix: API_URL})

  const login = async ({body}: { body: LoginRequest }): Promise<T | undefined> => {
    const data = await post({ url: LOGIN_URL, body: JSON.stringify(body) })
    return isDetailResponse(data) && typeGuard(data.data) ? data.data : undefined
  }

  return {
    login,
  }
}

Typeguard function

export const isAuthUserResource = <T = AuthUserResource>(user: unknown): user is T => {
  return typeof user === 'object' &&
    user !== null &&
    'id' in user &&
    'name' in user &&
    'email' in user
}

This is the error i'm getting.

Type 'Awaited<T>' is not assignable to type 'UnwrapRef<T>'.
  Type 'T | (T extends object & { then(onfulfilled: infer F, ...args: infer _): any; } ? F extends (value: infer V, ...args: infer _) => any ? Awaited<V> : never : T)' is not assignable to type 'UnwrapRef<T>'.
    Type '(null | undefined) & T' is not assignable to type 'UnwrapRef<T>'.
      Type 'undefined & T' is not assignable to type 'UnwrapRef<T>

Simple reproduction in store/main.ts:
https://codesandbox.io/p/sandbox/practical-hopper-mfjczp

[andredewaard]

Fixed by updating the type provided to the useAuthService to also return a unwrapref<T> instead of just <T>

export const useAuthStore = <T = AuthUserResource>({ typeGuard = isAuthUserResource }: { typeGuard?: <T>(user: unknown) => user is T } = {}) => {
  
  const service = useAuthService<UnwrapRef<T>>({ typeGuard })

  return defineStore('auth', {
    state: () => ({
      user: {} as T
    }),
    actions: {
      set(u: UnwrapRef<T>) {
        this.user = u
      },
      async login(body: LoginRequest) {
        const data = await service.login({ body })
        if (typeGuard<T>(data)) this.user = data
      }
    },
    getters: {
      isAuthenticated: (state) => typeGuard<T>(state.user) ?? false
    }
  })
}