@tanstack/vue-query 使用说明

@tanstack/vue-query 使用说明

• @tanstack/vue-query 使用说明
• 是什么
• 请求控制
• 服务端状态管理
• 使用仍必须的知识
• 参数变更时重新请求
• 依赖查询
• Query 状态 和 回调
• Loading 和 缓存
• Queries 和 Mutations
• 总结

是什么

请求控制

1. 封装了构建应用所需的常用功能，开箱即用。

2. 在 axios 层上建立了一个 useQuery 层。如果 axios 层抽象的是「Request」，那 useQuery 层抽象的就是「渲染时获取的 Request」。

// --- 使用前 ---
<template>
  <div v-if="userInfoLoading$">loading...</div>
  <div v-else>
    {{ userInfo$?.username }}
  </div>
</template>

<script>
import { onMounted } from 'vue'

const userInfo$ = ref()
const userInfoLoading$ = ref(false)

function onSuccess() {
  console.log('success')
}
function onError() {
  console.log('error')
}

onMounted(async () => {
  try {
    userInfoLoading$.value = true

    const res = await commonAPIs.getUserInfo()
    userInfo$.value = res

    onSuccess()
  } catch (e) {
    onError()
  } finally {
    userInfoLoading$.value = false
  }
})
</script>

// --- 使用后 ---
<template>
  <div v-if="userInfoLoading$">loading...</div>
  <div v-else>
    {{ userInfo$?.username }}
  </div>
</template>

<script>
import { computed } from 'vue'
import { useQuery } from './useQuery'

const getUserInfoQuery = useQuery({
  queryKey: ['commonAPIs.getUserInfo'],
  queryFn: ({ queryKey }) => commonAPIs.getUserInfo(queryKey[1]),
})

const userInfo$ = computed(() => {
  return getUserInfoQuery.data.value
})
const userInfoLoading$ = computed(() => {
  return getUserInfoQuery.isFetching.value
})

function onSuccess() {
  console.log('success')
}

function onError() {
  console.log('error')
}

watch(
  getUserInfoQuery.status,
  (status) => {
    if (status === 'success') {
      onSuccess()
    }
    if (status === 'error') {
      onError()
    }
  },
  {
    immediate: true,
  },
)
</script>

服务端状态管理

// 组件 1
<script>
import { useQuery } from '@tanstack/vue-query'
import { onMounted } from 'vue'

const userInfoQuery = useQuery({
  queryKey: ['commonAPIs.getUserInfo'],
  queryFn: ({ queryKey }) => commonAPIs.getUserInfo(queryKey[1]),
  gcTime: Infinity,
  staleTime: Infinity,
})

onMounted(() => {
  // print: undefined
  console.log(userInfoQuery.data.value)
})
</script>

// 组件 2
<script>
import { useQuery } from '@tanstack/vue-query'

const userInfoQuery = useQuery({
  queryKey: ['commonAPIs.getUserInfo'],
  queryFn: ({ queryKey }) => commonAPIs.getUserInfo(queryKey[1]),
  gcTime: Infinity,
  staleTime: Infinity,
})

onMounted(() => {
  // print: { username: 'xxx' }
  console.log(userInfoQuery.data.value)
})
</script>

使用仍必须的知识

参数变更时重新请求

// --- 使用前，命令式 ---
<script>
import { onMounted } from 'vue'

const userInfo$ = ref()

const handlePageChange = async (pageNo, pageSize) => {
  const res = await commonAPIs.getUserInfo({
    pageNo,
    pageSize,
  })
  userInfo$.value = res
}

onMounted(() => {
  handlePageChange(1, 10)
})
</script>

// --- 使用前，状态驱动 ---
<script>
const userInfo$ = ref()
const tablePagination$ = ref({
  pageNo: 1,
  pageSize: 10,
})

const handlePageChange = async (pageNo, pageSize) => {
  tablePagination$.value = {
    pageNo,
    pageSize,
  }
}

watch(
  tablePagination$,
  async (tablePagination) => {
    const { pageNo, pageSize } = tablePagination
    const res = await commonAPIs.getUserInfo({
      pageNo,
      pageSize,
    })
    userInfo$.value = res
  },
  {
    immediate: true,
  },
)
</script>

// --- 使用后 ---
<script>
const tablePagination$ = ref({
  pageNo: 1,
  pageSize: 10,
})

const getUserInfoQuery = useQuery({
  queryKey: ['commonAPIs.getUserInfo', tablePagination$],
  queryFn: ({ queryKey }) => commonAPIs.getUserInfo(queryKey[1]),
})

const handlePageChange = async (pageNo, pageSize) => {
  tablePagination$.value = {
    pageNo,
    pageSize,
  }
}
</script>

<script>
import { onMounted } from 'vue'

const userInfo$ = ref()

const tableParams$ = ref({
  pageNo: 1,
  pageSize: 10,
})

const fetchData = async () => {
  const res = await commonAPIs.getUserInfo(tableParams$)
  userInfo$.value = res
}

const handlePageChange = async (pageNo, pageSize) => {
  tableParams$.pageNo = pageNo
  tableParams$.pageSize = pageSize
  fetchData()
}

const handleIdCardChange = async (idCardNumber) => {
  tableParams$.pageNo = 1
  tableParams$.idCardNumber = idCardNumber
  fetchData()
}

const handleGenderChange = async (gender) => {
  tableParams$.pageNo = 1
  tableParams$.gender = gender
  fetchData()
}

// ...
onMounted(() => {
  fetchData()
})
</script>

<script>
import { useResetPageNo } from './useResetPageNo'

const userInfo$ = ref()
const tablePagination$ = ref({
  pageNo: 1,
  pageSize: 10,
})

// --- new ---
// 具体的代码可在 repo 中寻找
useResetPageNo(tablePagination$, 'pageNo')

const handlePageChange = async (pageNo, pageSize) => {
  tablePagination$.value = {
    pageNo,
    pageSize,
  }
}

watch(
  tablePagination$,
  async (tablePagination) => {
    const { pageNo, pageSize } = tablePagination
    const res = await commonAPIs.getUserInfo({
      pageNo,
      pageSize,
    })
    userInfo$.value = res
  },
  {
    immediate: true,
  },
)
</script>

<script>
import { useQueryClient } from '@tanstack/vue-query'
import { computed } from 'vue'

const queryClient = useQueryClient()

const getUserInfoQueryKeys$ = computed(() => {
  return ['commonAPIs.getUserInfo']
})
// 可选
const getUserInfoQuery = useQuery({
  queryKey: getUserInfoQueryKeys$,
  queryFn: ({ queryKey }) => commonAPIs.getUserInfo(queryKey[1]),
  enabled: false,
})

const handleFetch = async () => {
  try {
    const res = await queryClient.fetchQuery({
      queryKey: getUserInfoQueryKeys$,
      queryFn: ({ queryKey }) => commonAPIs.getUserInfo(queryKey[1]),
    })
    // do anything
  } catch (e) {
    // ...
  }
}
</script>

依赖查询

<script>
import { computed } from 'vue'

const getUserInfoQuery = useQuery({
  queryKey: ['commonAPIs.getUserInfo'],
  queryFn: ({ queryKey }) => commonAPIs.getUserInfo(queryKey[1]),
})
const getMessageQuery = useQuery({
  queryKey: ['commonAPIs.getMessage', getUserInfoQuery.data],
  queryFn: ({ queryKey }) => commonAPIs.getMessage(queryKey[1]),
  enabled: computed(() => {
    return !!getUserInfoQuery.data.value
  }),
})
</script>

Query 状态 和 回调

<script>
import { watch } from 'vue'

const getUserInfoQuery = useQuery({
  queryKey: ['commonAPIs.getUserInfo'],
  queryFn: ({ queryKey }) => commonAPIs.getUserInfo(queryKey[1]),
})

watch(
  getUserInfoQuery.status,
  (status) => {
    if (status === 'success') {
      onSuccess()
    }
    if (status === 'error') {
      onError()
    }
    if (status === 'pending') {
      onPending()
    }
  },
  {
    immediate: true,
  },
)
</script>

Loading 和 缓存

pending if there’s no cached data and no query attempt was finished yet.

<script>
import { onMounted } from 'vue'

const data$ = ref()

onMounted(async () => {
  const res = await commomAPIs.getUserInfo()
  // data 已经被成功 set，有 Cache
  data$.value = res.data
})
</script>

1. 请求没回来，但是通过 QueryClient.setQueryData() 设置了 data。

2. 请求回来了，无论是 error，还是没返回 data。

Queries 和 Mutations

<script>
import { useMutation } from '@tanstack/vue-query'

const createUserMutation = useMutation({
  mutationFn: commonAPIs.createUser,
})

const handleClick = async (data) => {
  await createUserMutation.mutateAsync(data)
}
</script>

总结