@rapper3/vue-query4

Based on @tanstack/vue-query

Usage

More Details

1. Generate TS code in your project firstly

2. Then install @rapper3/vue-query4

yarn add @rapper3/vue-query4 @tanstack/vue-query

Or

npm i @rapper3/vue-query4 @tanstack/vue-query

Usage

Initial

// init.ts
import { createUseQuery, createUseInfiniteQuery } from '@rapper3/vue-query4';
import { IModels, http } from 'src/rapper';

export const useRapperQuery = createUseQuery<IModels>(http);
export const useRapperInfiniteQuery = createUseInfiniteQuery<IModels>(http);

Basic

<script setup>
import { useRapperQuery } from './init'
const { isLoading, isError, data } = useRapperQuery('POST/user/info', { age: 10 })
</script>

<template>
  <span v-if="isLoading">Loading...</span>
  <span v-else-if="isError">Error: {{ error.message }}</span>
  <!-- We can assume by this point that `isSuccess === true` -->
  <ul v-else>
    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
  </ul>
</template>

vue-query options

<script setup>
import { ref, onMounted } from 'vue'
import { useRapperQuery } from './init'

const count = ref(0)

const { isLoading, isError, data } = useRapperQuery('POST/user/info', { age: 10 }, { enable: count.value > 11 })

function increment() {
  count.value++
}
</script>

<template>
  <span v-if="isLoading">Loading...</span>
  <span v-else-if="isError">Error: {{ error.message }}</span>
  <!-- We can assume by this point that `isSuccess === true` -->
  <ul v-else>
    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
  </ul>
  <button @click="increment">Count is: {{ count }}</button>
</template>

API

useVueQuery

import { UseQueryOptions } from '@tanstack/vue-query';
import { IModels } from 'src/rapper';

function useVueQuery<T extends Exclude<keyof IModels, number | symbol>>(
  url: T,
  payload?: IModels[T]['Req'] | null,
  options?: Omit<
    UseQueryOptions<
      IModels[T]['Res'],
      unknown,
      IModels[T]['Res'],
      [T, IModels[T]['Req'] | null | undefined]
    >,
    'queryKey' | 'queryFn'
  >,
);

useVueInfiniteQuery

import { UseInfiniteQueryOptions } from '@tanstack/vue-query';
import { IModels } from 'src/rapper';

function useVueInfiniteQuery<T extends Exclude<keyof IModels, number | symbol>>(
  url: T,
  payload?: IModels[T]['Req'] | null,
  options?: Omit<
    UseInfiniteQueryOptions<
      IModels[T]['Res'],
      unknown,
      IModels[T]['Res'],
      [T, IModels[T]['Req'] | null | undefined]
    >,
    'queryKey' | 'queryFn'
  >,
);