refactor!: queries changed from shallowReactive to reactive

[John60676]

BREAKING CHANGE

关联issue #29

queries 从 shallowReactive 变成了 reactive，确保 queries 能在 SFC template 中能够 auto ref unwrapping。

注意

该修改使得 queries 的 data, loading, params 等等这些 ref 的 Return Values 与 VueRequest 的 Return Values 取值方式会有所差异。

由于 queries 修改为 reactive 后，Vue 将会对 reactive 对象里的 ref 进行展开。因此 queries 里面的 ref 值不需要再手动加上 .value 来获取。而根节点的 Return Values 仍旧要加上 .value 来取值。

修改前

const { params, data, loading, queries } = useRequest(Service, {
  queryKey(userId){
    return userId
  }
});

someFunction(){
  // root level refs
  console.log(params.value)
  console.log(data.value)
  console.log(loading.value)

  // queries refs
  console.log(queries[userId].params.value)
  console.log(queries[userId].data.value)
  console.log(queries[userId].loading.value)
}

修改后

const { params, data, loading, queries } = useRequest(Service, {
  queryKey(userId){
    return userId
  }
});

someFunction(){
  // root level refs
  console.log(params.value)
  console.log(data.value)
  console.log(loading.value)

  // queries refs
  console.log(queries[userId].params)
  console.log(queries[userId].data)
  console.log(queries[userId].loading)
}

SFC 示例

更新前，queries 在 template 中取值要手动添加上 .value

<template>
  <ul v-for="user in userList" :key="user.id">
    <li>{{ queries[user.id]?.data.value }}</li>
  </ul>
</template>

<script>
import { defineComponent } from "vue"
import { useRequest } from "vue-request"

const userList = [
  { id: 1, name: "Benny" },
  { id: 2, name: "John" },
  { id: 3, name: "Sam" },
]
export default defineComponent({
  name: "App",
  setup() {
    const { queries } = useRequest(Service, {
      manual: true,
      queryKey: (id) => String(id),
    })
    return {
      userList,
      queries,
    }
  },
})
</script>

更新以后，由于 queries 是 reactive 对象，因此不需要加上 .value 取值

<template>
  <ul v-for="user in userList" :key="user.id">
    <li>{{ queries[user.id]?.data }}</li>
  </ul>
</template>

<script>
import { defineComponent } from "vue"
import { useRequest } from "vue-request"

const userList = [
  { id: 1, name: "Benny" },
  { id: 2, name: "John" },
  { id: 3, name: "Sam" },
]
export default defineComponent({
  setup() {
    const { queries } = useRequest(Service, {
      manual: true,
      queryKey: (id) => String(id),
    })
    return {
      userList,
      queries,
    }
  },
})
</script>

JSX 示例

更新前，queries 在 JSX 中取值要手动添加上 .value

import { defineComponent } from "vue"
import { useRequest } from "vue-request"

const userList = [
  { id: 1, name: "Benny" },
  { id: 2, name: "John" },
  { id: 3, name: "Sam" },
]
export default defineComponent({
  setup() {
    const { run, queries } = useRequest(Service, {
      manual: true,
      queryKey: (id) => String(id),
    })
    return () => (
      <ul>
        {userList.map((user) => (
          <li>{queries[user.id]?.loading.value}</li>
        ))}
      </ul>
    )
  },
})

更新以后，由于 queries 是 reactive 对象，因此不需要加上 .value 取值

import { defineComponent } from "vue"
import { useRequest } from "vue-request"

const userList = [
  { id: 1, name: "Benny" },
  { id: 2, name: "John" },
  { id: 3, name: "Sam" },
]
export default defineComponent({
  setup() {
    const { run, queries } = useRequest(Service, {
      manual: true,
      queryKey: (id) => String(id),
    })
    return () => (
      <ul>
        {userList.map((user) => (
          <li>{queries[user.id]?.loading}</li>
        ))}
      </ul>
    )
  },
})

[John60676]

BREAKING CHANGE

Related issue #29

queries changed from shallowReactive to reactive to ensure that queries can be auto ref unwrapping in the SFC template.

Note

This modification makes the data, loading, params of queries and so on. The Return Values of ref and the Return Values of VueRequest have different values.

Since queries is changed to reactive, Vue will be unwrapping the ref in the reactive object. Therefore, the ref value in queries does not need to be manually added with .value to get it. And the Return Values of the root node still need to add .value to get the value.

before fixing

const {params, data, loading, queries} = useRequest(Service, {
  queryKey(userId){
    return userId
  }
});

someFunction(){
  // root level refs
  console.log(params.value)
  console.log(data.value)
  console.log(loading.value)

  // queries refs
  console.log(queries[userId].params.value)
  console.log(queries[userId].data.value)
  console.log(queries[userId].loading.value)
}

After modification

const {params, data, loading, queries} = useRequest(Service, {
  queryKey(userId){
    return userId
  }
});

someFunction(){
  // root level refs
  console.log(params.value)
  console.log(data.value)
  console.log(loading.value)

  // queries refs
  console.log(queries[userId].params)
  console.log(queries[userId].data)
  console.log(queries[userId].loading)
}

SFC example

Before the update, the value of queries in the template should be manually added with .value.

<template>
  <ul v-for="user in userList" :key="user.id">
    <li>{{ queries[user.id]?.data.value }}</li>
  </ul>
</template>

<script>
import { defineComponent } from "vue"
import { useRequest } from "vue-request"

const userList = [
  { id: 1, name: "Benny" },
  { id: 2, name: "John" },
  { id: 3, name: "Sam" },
]
export default defineComponent({
  name: "App",
  setup() {
    const { queries } = useRequest(Service, {
      manual: true,
      queryKey: (id) => String(id),
    })
    return {
      userList,
      queries,
    }
  },
})
</script>

After the update, since queries is a reactive object, there is no need to add the value of .value

<template>
  <ul v-for="user in userList" :key="user.id">
    <li>{{ queries[user.id]?.data }}</li>
  </ul>
</template>

<script>
import { defineComponent } from "vue"
import { useRequest } from "vue-request"

const userList = [
  { id: 1, name: "Benny" },
  { id: 2, name: "John" },
  { id: 3, name: "Sam" },
]
export default defineComponent({
  setup() {
    const { queries } = useRequest(Service, {
      manual: true,
      queryKey: (id) => String(id),
    })
    return {
      userList,
      queries,
    }
  },
})
</script>

JSX example

Before the update, the value of queries in JSX should be manually added with .value

import {defineComponent} from "vue"
import {useRequest} from "vue-request"

const userList = [
  {id: 1, name: "Benny" },
  {id: 2, name: "John" },
  {id: 3, name: "Sam" },
]
export default defineComponent({
  setup() {
    const {run, queries} = useRequest(Service, {
      manual: true,
      queryKey: (id) => String(id),
    })
    return () => (
      <ul>
        {userList.map((user) => (
          <li>{queries[user.id]?.loading.value}</li>
        )))
      </ul>
    )
  },
})

After the update, since queries is a reactive object, there is no need to add the value of .value

import {defineComponent} from "vue"
import {useRequest} from "vue-request"

const userList = [
  {id: 1, name: "Benny" },
  {id: 2, name: "John" },
  {id: 3, name: "Sam" },
]
export default defineComponent({
  setup() {
    const {run, queries} = useRequest(Service, {
      manual: true,
      queryKey: (id) => String(id),
    })
    return () => (
      <ul>
        {userList.map((user) => (
          <li>{queries[user.id]?.loading}</li>
        )))
      </ul>
    )
  },
})