feat: useCall, useList, useDoc

[netchampfaris]

• New data fetching composables based on @vueuse's useFetch
• Based on /api/v2

useCall

import { reactive, ref } from 'vue'
import { useCall } from 'frappe-ui'

interface LoginResponse {
  success: boolean
  message: string
}

interface LoginParams {
  usr: string
  pwd: string
}

let loginParams = reactive<LoginParams>({ usr: '', pwd: '' })

let login = useCall<LoginResponse, LoginParams>({
  url: '/api/v2/method/login',
  method: 'POST',
  immediate: false, // don't fetch immediately
  refetch: true, // auto refetch when params change
  params: loginParams,
  transform(data) {
    return { success: data.message === 'Logged In', message: data.message }
  },
  onSuccess: (data) => {
    console.log(data)
  },
  onError: (error) => {
    console.error(error)
  },
})

await login.submit({ usr: 'admin', pwd: 'admin' })

login.data // { success: true, message: 'Logged In' }
login.error
login.loading
login.abort()

useList

import { reactive, ref } from 'vue'
import { useList } from 'frappe-ui'

interface User {
  name: string
  email: string
  full_name: string
}

let query = ref('adm')

let users = useList<User>({
  doctype: 'User',
  fields: ['name', 'email', 'full_name'],
  filters: {
    role: 'System Manager',
    name: ['like', query],
  },
  start: 0,
  limit: 10,
  orderBy: 'name asc',
  refetch: true, // auto refetch when params change
})

users.data // [{ name: '..', email: '..', full_name: '..' }, ..]
users.loading
users.hasNextPage
users.hasPreviousPage
users.next()
users.previous()
users.fetch()
users.abort()

useDoc

import { useDoc } from 'frappe-ui'

interface User {
  name: string,
  email: string,
  first_name: string,
  last_name: string
}

interface UserMethods {
  getFullName: () => string
  updateEmail: (params: { email: string }) => void
}

let user = useDoc<User, UserMethods>({
  doctype: 'User',
  name: 'user1',
  methods: {
    getFullName: 'get_full_name',
    updateEmail: {
      name: 'update_email',
      onSuccess() {
        console.log('email updated')
      }
    }
  }
})

user.getFullName.submit() // typescript is happy
user.getFullName.submit({}) // typescript errors
user.getFullName.data // string | null (inferred from method definition in UserMethods)

user.updateEmail.submit({ email: '[email protected]' }) // typescript is happy
user.updateEmail.submit() // typescript errors
user.updateEmail.data // void | null (inferred from method definition in UserMethods)