diff --git a/packages/docs/src/.vuepress/config.js b/packages/docs/src/.vuepress/config.js
index 644c967..fca805c 100644
--- a/packages/docs/src/.vuepress/config.js
+++ b/packages/docs/src/.vuepress/config.js
@@ -187,7 +187,6 @@ module.exports = {
                 'use-lazy-query',
                 'use-mutation',
                 'use-subscription',
-                'use-result',
                 'use-loading',
                 'use-apollo-client',
               ],
@@ -365,7 +364,6 @@ module.exports = {
                 'use-query',
                 'use-mutation',
                 'use-subscription',
-                'use-result',
                 'use-loading',
                 'use-apollo-client',
               ],
diff --git a/packages/docs/src/api/use-result.md b/packages/docs/src/api/use-result.md
deleted file mode 100644
index 1e2ef4d..0000000
--- a/packages/docs/src/api/use-result.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# useResult
-
-## Parameters
-
-- `result`: `Ref` holding the result data from an Apollo operation.
-
-- `defaultValue`: (default: `null`) Default value used if the data isn't available.
-
-- `pick`: (default: `null`) Picking function that get the data object as parameter and should return a derived object from it.
-
-## Return
-
-`useResult` return a `Ref` containing the picked data from the result data.
diff --git a/packages/docs/src/guide-composable/mutation.md b/packages/docs/src/guide-composable/mutation.md
index 7d56c34..d082817 100644
--- a/packages/docs/src/guide-composable/mutation.md
+++ b/packages/docs/src/guide-composable/mutation.md
@@ -313,7 +313,7 @@ For example, our `sendMessage` mutation should add the new message to our cache:
 
 ```vue{33-43}
 <script>
-import { useQuery, useResult, useMutation } from '@vue/apollo-composable'
+import { useQuery, useMutation } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
 const MESSAGES = gql`
@@ -329,7 +329,7 @@ export default {
   setup () {
     // Messages list
     const { result } = useQuery(MESSAGES)
-    const messages = useResult(result, [])
+    const messages = computed(() => result.value?.messages ?? [])
 
     // Send a new message
     const newMessage = ref('')
@@ -498,7 +498,7 @@ In our example, this is very useful for resetting the message input:
 
 ```vue{22,46-48}
 <script>
-import { useQuery, useResult, useMutation } from '@vue/apollo-composable'
+import { useQuery, useMutation } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
 const MESSAGES = gql`
@@ -514,7 +514,7 @@ export default {
   setup () {
     // Messages list
     const { result } = useQuery(MESSAGES)
-    const messages = useResult(result, [])
+    const messages = computed(() => result.value?.messages ?? [])
 
     // Send a new message
     const newMessage = ref('')
diff --git a/packages/docs/src/guide-composable/query.md b/packages/docs/src/guide-composable/query.md
index 39d5337..40971e9 100644
--- a/packages/docs/src/guide-composable/query.md
+++ b/packages/docs/src/guide-composable/query.md
@@ -657,7 +657,7 @@ This is done using the `refetch` function:
 
 ```vue{7,24,40}
 <script>
-import { useQuery, useResult } from '@vue/apollo-composable'
+import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
 export default {
@@ -673,7 +673,7 @@ export default {
       }
     `)
 
-    const users = useResult(result)
+    const users = computed(() => result.value?.users)
 
     return {
       users,
diff --git a/packages/docs/src/guide-composable/subscription.md b/packages/docs/src/guide-composable/subscription.md
index d49e690..743931a 100644
--- a/packages/docs/src/guide-composable/subscription.md
+++ b/packages/docs/src/guide-composable/subscription.md
@@ -60,27 +60,27 @@ Let's look at how to add support for this transport to Apollo Client.
 First, initialize a GraphQL web socket link:
 
 ```js
-import { WebSocketLink } from "@apollo/client/link/ws";
+import { WebSocketLink } from "@apollo/client/link/ws"
 
 const wsLink = new WebSocketLink({
   uri: `ws://localhost:5000/`,
   options: {
     reconnect: true
   }
-});
+})
 ```
 
 We need to either use the `WebSocketLink` or the `HttpLink` depending on the operation type:
 
 ```js
-import { HttpLink, split } from "@apollo/client/core";
-import { WebSocketLink } from "@apollo/client/link/ws";
-import { getMainDefinition } from "@apollo/client/utilities";
+import { HttpLink, split } from "@apollo/client/core"
+import { WebSocketLink } from "@apollo/client/link/ws"
+import { getMainDefinition } from "@apollo/client/utilities"
 
 // Create an http link:
 const httpLink = new HttpLink({
   uri: "http://localhost:3000/graphql"
-});
+})
 
 // Create a WebSocket link:
 const wsLink = new WebSocketLink({
@@ -88,22 +88,22 @@ const wsLink = new WebSocketLink({
   options: {
     reconnect: true
   }
-});
+})
 
 // using the ability to split links, you can send data to each link
 // depending on what kind of operation is being sent
 const link = split(
   // split based on operation type
   ({ query }) => {
-    const definition = getMainDefinition(query);
+    const definition = getMainDefinition(query)
     return (
       definition.kind === "OperationDefinition" &&
       definition.operation === "subscription"
-    );
+    )
   },
   wsLink,
   httpLink
-);
+)
 ```
 
 Now, queries and mutations will go over HTTP as normal, but subscriptions will be done over the websocket transport.
@@ -116,13 +116,13 @@ Start by importing `useSubscription` in your component:
 
 ```vue{2}
 <script>
-import { useSubscription } from "@vue/apollo-composable";
+import { useSubscription } from "@vue/apollo-composable"
 
 export default {
   setup() {
     // Data & Logic here...
   }
-};
+}
 </script>
 ```
 
@@ -130,7 +130,7 @@ We can then pass a GraphQL document as the first parameter and retrieve the `res
 
 ```vue{6-13}
 <script>
-import { useSubscription } from "@vue/apollo-composable";
+import { useSubscription } from "@vue/apollo-composable"
 
 export default {
   setup() {
@@ -141,9 +141,9 @@ export default {
           text
         }
       }
-    `);
+    `)
   }
-};
+}
 </script>
 ```
 
@@ -151,8 +151,8 @@ We can then `watch` the result as new data is received:
 
 ```vue{2,16-20}
 <script>
-import { watch } from "vue";
-import { useSubscription } from "@vue/apollo-composable";
+import { watch } from "vue"
+import { useSubscription } from "@vue/apollo-composable"
 
 export default {
   setup() {
@@ -163,19 +163,19 @@ export default {
           text
         }
       }
-    `);
+    `)
 
     watch(
       result,
       data => {
-        console.log("New message received:", data.messageAdded);
+        console.log("New message received:", data.messageAdded)
       },
       {
         lazy: true // Don't immediately execute handler
       }
-    );
+    )
   }
-};
+}
 </script>
 ```
 
@@ -183,12 +183,12 @@ For example, we could display the list of messages as we receive them:
 
 ```vue{2,7,19,24-26,31-39}
 <script>
-import { watch, ref } from "vue";
-import { useSubscription } from "@vue/apollo-composable";
+import { watch, ref } from "vue"
+import { useSubscription } from "@vue/apollo-composable"
 
 export default {
   setup() {
-    const messages = ref([]);
+    const messages = ref([])
 
     const { result } = useSubscription(gql`
       subscription onMessageAdded {
@@ -197,23 +197,23 @@ export default {
           text
         }
       }
-    `);
+    `)
 
     watch(
       result,
       data => {
-        messages.value.push(data.messageAdded);
+        messages.value.push(data.messageAdded)
       },
       {
         lazy: true // Don't immediately execute handler
       }
-    );
+    )
 
     return {
       messages
-    };
+    }
   }
-};
+}
 </script>
 
 <template>
@@ -236,7 +236,7 @@ With a ref:
 ```js
 const variables = ref({
   channelId: "abc"
-});
+})
 
 const { result } = useSubscription(
   gql`
@@ -248,7 +248,7 @@ const { result } = useSubscription(
     }
   `,
   variables
-);
+)
 ```
 
 With a reactive object:
@@ -256,7 +256,7 @@ With a reactive object:
 ```js
 const variables = reactive({
   channelId: "abc"
-});
+})
 
 const { result } = useSubscription(
   gql`
@@ -268,13 +268,13 @@ const { result } = useSubscription(
     }
   `,
   variables
-);
+)
 ```
 
 With a function (which will automatically be made reactive):
 
 ```js
-const channelId = ref("abc");
+const channelId = ref("abc")
 
 const { result } = useSubscription(
   gql`
@@ -288,7 +288,7 @@ const { result } = useSubscription(
   () => ({
     channelId: channelId.value
   })
-);
+)
 ```
 
 ### Options
@@ -309,7 +309,7 @@ const { result } = useSubscription(
   {
     fetchPolicy: "no-cache"
   }
-);
+)
 ```
 
 It can also be a reactive object, or a function that will automatically be made reactive:
@@ -328,7 +328,7 @@ const { result } = useSubscription(
   () => ({
     fetchPolicy: "no-cache"
   })
-);
+)
 ```
 
 See the [API Reference](../api/use-subscription) for all the possible options.
@@ -338,7 +338,7 @@ See the [API Reference](../api/use-subscription) for all the possible options.
 You can disable and re-enable a subscription with the `enabled` option:
 
 ```js
-const enabled = ref(false);
+const enabled = ref(false)
 
 const { result } = useSubscription(
   gql`
@@ -348,10 +348,10 @@ const { result } = useSubscription(
   () => ({
     enabled: enabled.value
   })
-);
+)
 
 function enableSub() {
-  enabled.value = true;
+  enabled.value = true
 }
 ```
 
@@ -413,7 +413,7 @@ const MESSAGES = gql`
       text
     }
   }
-`;
+`
 
 export default {
   props: ["channelId"],
@@ -422,14 +422,14 @@ export default {
     // Messages list
     const { result } = useQuery(MESSAGES, () => ({
       channelId: props.channelId
-    }));
-    const messages = useResult(result, []);
+    }))
+    const messages = computed(() => result.value?.messages ?? [])
 
     return {
       messages
-    };
+    }
   }
-};
+}
 </script>
 ```
 
@@ -446,7 +446,7 @@ const MESSAGES = gql`
       text
     }
   }
-`;
+`
 
 export default {
   props: ["channelId"],
@@ -455,16 +455,16 @@ export default {
     // Messages list
     const { result, subscribeToMore } = useQuery(MESSAGES, () => ({
       channelId: props.channelId
-    }));
-    const messages = useResult(result, []);
+    }))
+    const messages = computed(() => result.value?.messages ?? [])
 
-    subscribeToMore();
+    subscribeToMore()
 
     return {
       messages
-    };
+    }
   }
-};
+}
 </script>
 ```
 
@@ -473,13 +473,13 @@ It expects either an object or a function that will automatically be reactive:
 ```js
 subscribeToMore({
   // options...
-});
+})
 ```
 
 ```js
 subscribeToMore(() => ({
   // options...
-}));
+}))
 ```
 
 In the latter case, the subscription will automatically restart if the options change.
@@ -495,7 +495,7 @@ const MESSAGES = gql`
       text
     }
   }
-`;
+`
 
 export default {
   props: ["channelId"],
@@ -504,8 +504,8 @@ export default {
     // Messages list
     const { result, subscribeToMore } = useQuery(MESSAGES, () => ({
       channelId: props.channelId
-    }));
-    const messages = useResult(result, []);
+    }))
+    const messages = computed(() => result.value?.messages ?? [])
 
     subscribeToMore(() => ({
       document: gql`
@@ -519,13 +519,13 @@ export default {
       variables: {
         channelId: props.channelId
       }
-    }));
+    }))
 
     return {
       messages
-    };
+    }
   }
-};
+}
 </script>
 ```
 
@@ -545,10 +545,10 @@ subscribeToMore(() => ({
     channelId: props.channelId
   },
   updateQuery: (previousResult, { subscriptionData }) => {
-    previousResult.messages.push(subscriptionData.data.messageAdded);
-    return previousResult;
+    previousResult.messages.push(subscriptionData.data.messageAdded)
+    return previousResult
   }
-}));
+}))
 ```
 
 ## Authentication over WebSocket
@@ -556,7 +556,7 @@ subscribeToMore(() => ({
 In many cases it is necessary to authenticate clients before allowing them to receive subscription results. To do this, the `SubscriptionClient` constructor accepts a `connectionParams` field, which passes a custom object that the server can use to validate the connection before setting up any subscriptions.
 
 ```js
-import { WebSocketLink } from "@apollo/client/link/ws";
+import { WebSocketLink } from "@apollo/client/link/ws"
 
 const wsLink = new WebSocketLink({
   uri: `ws://localhost:5000/`,
@@ -565,7 +565,7 @@ const wsLink = new WebSocketLink({
     connectionParams: {
         authToken: user.authToken,
     },
-});
+})
 ```
 
 ::: tip
diff --git a/packages/docs/src/zh-cn/api/use-result.md b/packages/docs/src/zh-cn/api/use-result.md
deleted file mode 100644
index 646201e..0000000
--- a/packages/docs/src/zh-cn/api/use-result.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# useResult
-
-## 参数
-
-- `result`：`Ref` 保留来自 Apollo 操作的结果数据。
-
-- `defaultValue`：（默认值：`null`）当数据不可用时使用的默认值。
-
-- `pick`：（默认值：`null`）用于挑选的函数，以数据对象为参数，并应返回一个派生对象。
-
-## 返回值
-
-`useResult` 将返回一个包含从结果数据中挑选的数据的 `Ref`。
diff --git a/packages/docs/src/zh-cn/guide-composable/mutation.md b/packages/docs/src/zh-cn/guide-composable/mutation.md
index 165c811..6bf1d96 100644
--- a/packages/docs/src/zh-cn/guide-composable/mutation.md
+++ b/packages/docs/src/zh-cn/guide-composable/mutation.md
@@ -312,7 +312,7 @@ editMessage()
 
 ```vue{33-37}
 <script>
-import { useQuery, useResult, useMutation } from '@vue/apollo-composable'
+import { useQuery, useMutation } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
 const MESSAGES = gql`
@@ -328,7 +328,7 @@ export default {
   setup () {
     // Messages list
     const { result } = useQuery(MESSAGES)
-    const messages = useResult(result, [])
+    const messages = computed(() => result.value.messages ?? [])
 
     // Send a new message
     const newMessage = ref('')
@@ -481,7 +481,7 @@ onDone(result => {
 
 ```vue{22,40-42,55}
 <script>
-import { useQuery, useResult, useMutation } from '@vue/apollo-composable'
+import { useQuery, useMutation } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
 const MESSAGES = gql`
@@ -497,7 +497,7 @@ export default {
   setup () {
     // Messages list
     const { result } = useQuery(MESSAGES)
-    const messages = useResult(result, [])
+    const messages = computed(() => result.value?.messages ?? [])
 
     // Send a new message
     const newMessage = ref('')
diff --git a/packages/docs/src/zh-cn/guide-composable/query.md b/packages/docs/src/zh-cn/guide-composable/query.md
index d632cab..1d5d395 100644
--- a/packages/docs/src/zh-cn/guide-composable/query.md
+++ b/packages/docs/src/zh-cn/guide-composable/query.md
@@ -318,210 +318,6 @@ export default {
 </template>
 ```
 
-## useResult
-
-除了 `useQuery` 之外，还有姐妹组合函数 `useResult`，以方便对查询 `result` 的使用。
-
-### 结果挑选
-
-`useResult` 的第一个有用功能是从结果数据中挑选出一个对象。为此，将 `result` 数据作为第一个参数，并将挑选函数作为第三个参数：
-
-```vue{2,18,21,34,35}
-<script>
-import { useQuery, useResult } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
-
-export default {
-  setup () {
-    const { result, loading, error } = useQuery(gql`
-      query getUsers {
-        users {
-          id
-          firstname
-          lastname
-          email
-        }
-      }
-    `)
-
-    const users = useResult(result, null, data => data.users)
-
-    return {
-      users,
-      loading,
-      error,
-    }
-  },
-}
-</script>
-
-<template>
-  <div v-if="loading">Loading...</div>
-
-  <div v-else-if="error">Error: {{ error.message }}</div>
-
-  <ul v-else-if="users">
-    <li v-for="user of users" :key="user.id">
-      {{ user.firstname }} {{ user.lastname }}
-    </li>
-  </ul>
-</template>
-```
-
-如果与组件相关的数据嵌套在查询中，这将非常有用：
-
-```js
-const { result } = useQuery(gql`
-  query getMessages {
-    currentUser {
-      messages {
-        id
-        text
-      }
-    }
-  }
-`)
-
-const messages = useResult(result, null, data => data.currentUser.messages)
-```
-
-`useResult` 的另一个好处是，挑选函数会让其内部的错误静音。例如，如果 `result.value` 是 `undefined`，你不必添加额外的检查：
-
-```js
-// 你不需要这样做！
-const messages = useResult(result, null, data => data && data.currentUser && data.currentUser.messages)
-
-// 而是这样做：
-const messages = useResult(result, null, data => data.currentUser.messages)
-```
-
-::: tip
-不要忘记，在查询成功完成之前，`messages.value` 仍然可以是 `null`！
-:::
-
-证明 `useResult` 非常有用的另外一个用例是当结果数据上有多个对象时：
-
-```js
-const { result } = useQuery(gql`
-  query getUsersAndPosts {
-    users {
-      id
-      email
-    }
-
-    posts {
-      id
-      title
-    }
-  }
-`)
-
-const users = useResult(result, null, data => data.users)
-
-const posts = useResult(result, null, data => data.posts)
-```
-
-看看我们是怎样将结果数据干净地分成两个不同的 `Ref`！
-
-### 自动挑选
-
-如果在数据中只有一个对象，`useResult` 将尝试自动挑选该对象：
-
-```js{12}
-const { result, loading } = useQuery(gql`
-  query getUsers {
-    users {
-      id
-      firstname
-      lastname
-      email
-    }
-  }
-`)
-
-const users = useResult(result)
-```
-
-这里的 `users.value` 将是从服务器中检索到的 `users` 数组。
-
-### 默认值
-
-假设我们想根据用户的姓氏进行排序：
-
-```vue{2,19-21,24,34,35}
-<script>
-import { computed } from 'vue'
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
-
-export default {
-  setup () {
-    const { result, loading } = useQuery(gql`
-      query users {
-        users {
-          id
-          firstname
-          lastname
-          email
-        }
-      }
-    `)
-
-    const sortedUsers = computed(() => result.value.users.sort(
-      (a, b) => a.lastname.localeCompare(b.lastname)
-    ))
-
-    return {
-      sortedUsers,
-      loading,
-    }
-  },
-}
-</script>
-
-<template>
-  <div v-if="loading">Loading...</div>
-
-  <ul v-else-if="sortedUsers">
-    <li v-for="user of sortedUsers" :key="user.id">
-      {{ user.firstname }} {{ user.lastname }}
-    </li>
-  </ul>
-</template>
-```
-
-在这里我们会遇到一个错误，因为 `result.value` 可能是 `undefined`（并且 `result.value.users` 也可能是 `undefined`）。因此当我们在 `computed` 属性中调用 `sort` 方法时将引发错误。
-
-我们可以添加检查，但这很快就会变得乏味：
-
-```js
-const sortedUsers = computed(() => result.value && result.value.users ? result.value.users.sort(
-  (a, b) => a.lastname.localeCompare(b.lastname)
-) : [])
-```
-
-我们可以通过 `useResult` 进一步简化它：
-
-```js{1,3,5}
-const users = useResult(result) // 自动挑选
-
-const sortedUsers = computed(() => users.value ? users.value.sort(
-  (a, b) => a.lastname.localeCompare(b.lastname)
-) : [])
-```
-
-但如果我们传递一个默认值作为 `useResult` 的第二个参数，则可以完全取消条件代码：
-
-```js{1,3,5}
-const users = useResult(result, []) // 默认为空数组
-
-const sortedUsers = computed(() => users.value.sort(
-  (a, b) => a.lastname.localeCompare(b.lastname)
-))
-```
-
-如果我们想在 `setup` 函数中的多个地方使用 `users` 数组 `Ref` 时，这将更加有用！
-
 ## 变量
 
 你可以把一个变量对象作为第二个参数传递给 `useQuery`：
@@ -822,7 +618,7 @@ const { result } = useQuery(gql`
 
 ```vue{7,24,40}
 <script>
-import { useQuery, useResult } from '@vue/apollo-composable'
+import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
 export default {
@@ -838,7 +634,7 @@ export default {
       }
     `)
 
-    const users = useResult(result)
+    const users = computed(() => result.value?.users)
 
     return {
       users,
diff --git a/packages/docs/src/zh-cn/guide-composable/subscription.md b/packages/docs/src/zh-cn/guide-composable/subscription.md
index 589d760..ef3de4e 100644
--- a/packages/docs/src/zh-cn/guide-composable/subscription.md
+++ b/packages/docs/src/zh-cn/guide-composable/subscription.md
@@ -60,27 +60,27 @@ subscription onMessageAdded($channelId: ID!) {
 首先，初始化 GraphQL websocket 连接：
 
 ```js
-import { WebSocketLink } from "@apollo/client/link/ws";
+import { WebSocketLink } from "@apollo/client/link/ws"
 
 const wsLink = new WebSocketLink({
   uri: `ws://localhost:5000/`,
   options: {
     reconnect: true
   }
-});
+})
 ```
 
 We need to either use the `WebSocketLink` or the `HttpLink` depending on the operation type:
 
 ```js
-import { HttpLink, split } from "@apollo/client/core";
-import { WebSocketLink } from "@apollo/client/link/ws";
-import { getMainDefinition } from "@apollo/client/utilities";
+import { HttpLink, split } from "@apollo/client/core"
+import { WebSocketLink } from "@apollo/client/link/ws"
+import { getMainDefinition } from "@apollo/client/utilities"
 
 // 创建一个 http 连接：
 const httpLink = new HttpLink({
   uri: "http://localhost:3000/graphql"
-});
+})
 
 // 创建一个 WebSocket 连接：
 const wsLink = new WebSocketLink({
@@ -88,21 +88,21 @@ const wsLink = new WebSocketLink({
   options: {
     reconnect: true
   }
-});
+})
 
 // 使用拆分连接的功能，你可以根据要发送的操作类型将数据发送到每个连接
 const link = split(
   // 根据操作类型拆分
   ({ query }) => {
-    const definition = getMainDefinition(query);
+    const definition = getMainDefinition(query)
     return (
       definition.kind === "OperationDefinition" &&
       definition.operation === "subscription"
-    );
+    )
   },
   wsLink,
   httpLink
-);
+)
 ```
 
 现在查询和变更将照常通过 HTTP 进行，但是订阅将通过 websocket 传输进行。
@@ -115,13 +115,13 @@ const link = split(
 
 ```vue{2}
 <script>
-import { useSubscription } from "@vue/apollo-composable";
+import { useSubscription } from "@vue/apollo-composable"
 
 export default {
   setup() {
     // 数据和逻辑在这里……
   }
-};
+}
 </script>
 ```
 
@@ -129,7 +129,7 @@ export default {
 
 ```vue{6-13}
 <script>
-import { useSubscription } from "@vue/apollo-composable";
+import { useSubscription } from "@vue/apollo-composable"
 
 export default {
   setup() {
@@ -140,9 +140,9 @@ export default {
           text
         }
       }
-    `);
+    `)
   }
-};
+}
 </script>
 ```
 
@@ -150,8 +150,8 @@ export default {
 
 ```vue{2,16-20}
 <script>
-import { watch } from "vue";
-import { useSubscription } from "@vue/apollo-composable";
+import { watch } from "vue"
+import { useSubscription } from "@vue/apollo-composable"
 
 export default {
   setup() {
@@ -162,19 +162,19 @@ export default {
           text
         }
       }
-    `);
+    `)
 
     watch(
       result,
       data => {
-        console.log("New message received:", data.messageAdded);
+        console.log("New message received:", data.messageAdded)
       },
       {
         lazy: true // 不要立即执行处理程序
       }
-    );
+    )
   }
-};
+}
 </script>
 ```
 
@@ -182,12 +182,12 @@ export default {
 
 ```vue{2,7,19,24-26,31-39}
 <script>
-import { watch, ref } from "vue";
-import { useSubscription } from "@vue/apollo-composable";
+import { watch, ref } from "vue"
+import { useSubscription } from "@vue/apollo-composable"
 
 export default {
   setup() {
-    const messages = ref([]);
+    const messages = ref([])
 
     const { result } = useSubscription(gql`
       subscription onMessageAdded {
@@ -196,23 +196,23 @@ export default {
           text
         }
       }
-    `);
+    `)
 
     watch(
       result,
       data => {
-        messages.value.push(data.messageAdded);
+        messages.value.push(data.messageAdded)
       },
       {
         lazy: true // 不要立即执行处理程序
       }
-    );
+    )
 
     return {
       messages
-    };
+    }
   }
-};
+}
 </script>
 
 <template>
@@ -235,7 +235,7 @@ export default {
 ```js
 const variables = ref({
   channelId: "abc"
-});
+})
 
 const { result } = useSubscription(
   gql`
@@ -247,7 +247,7 @@ const { result } = useSubscription(
     }
   `,
   variables
-);
+)
 ```
 
 使用响应式对象：
@@ -255,7 +255,7 @@ const { result } = useSubscription(
 ```js
 const variables = reactive({
   channelId: "abc"
-});
+})
 
 const { result } = useSubscription(
   gql`
@@ -267,13 +267,13 @@ const { result } = useSubscription(
     }
   `,
   variables
-);
+)
 ```
 
 使用函数（将会是响应式的）：
 
 ```js
-const channelId = ref("abc");
+const channelId = ref("abc")
 
 const { result } = useSubscription(
   gql`
@@ -287,7 +287,7 @@ const { result } = useSubscription(
   () => ({
     channelId: channelId.value
   })
-);
+)
 ```
 
 ### 选项
@@ -308,7 +308,7 @@ const { result } = useSubscription(
   {
     fetchPolicy: "no-cache"
   }
-);
+)
 ```
 
 它也可以是响应式对象，也可以是将自动变为响应式的函数：
@@ -327,7 +327,7 @@ const { result } = useSubscription(
   () => ({
     fetchPolicy: "no-cache"
   })
-);
+)
 ```
 
 在 [API 参考](../api/use-subscription) 查看所有可用的选项。
@@ -337,7 +337,7 @@ const { result } = useSubscription(
 你可以使用 `enabled` 选项来禁用和重新启用订阅：
 
 ```js
-const enabled = ref(false);
+const enabled = ref(false)
 
 const { result } = useSubscription(
   gql`
@@ -347,10 +347,10 @@ const { result } = useSubscription(
   () => ({
     enabled: enabled.value
   })
-);
+)
 
 function enableSub() {
-  enabled.value = true;
+  enabled.value = true
 }
 ```
 
@@ -412,7 +412,7 @@ const MESSAGES = gql`
       text
     }
   }
-`;
+`
 
 export default {
   props: ["channelId"],
@@ -421,14 +421,14 @@ export default {
     // 消息列表
     const { result } = useQuery(MESSAGES, () => ({
       channelId: props.channelId
-    }));
-    const messages = useResult(result, []);
+    }))
+    const messages = computed(() => result.value?.messages ?? [])
 
     return {
       messages
-    };
+    }
   }
-};
+}
 </script>
 ```
 
@@ -445,7 +445,7 @@ const MESSAGES = gql`
       text
     }
   }
-`;
+`
 
 export default {
   props: ["channelId"],
@@ -454,16 +454,16 @@ export default {
     // 消息列表
     const { result, subscribeToMore } = useQuery(MESSAGES, () => ({
       channelId: props.channelId
-    }));
-    const messages = useResult(result, []);
+    }))
+    const messages = computed(() => result.value?.messages ?? [])
 
-    subscribeToMore();
+    subscribeToMore()
 
     return {
       messages
-    };
+    }
   }
-};
+}
 </script>
 ```
 
@@ -472,13 +472,13 @@ export default {
 ```js
 subscribeToMore({
   // 选项……
-});
+})
 ```
 
 ```js
 subscribeToMore(() => ({
   // 选项……
-}));
+}))
 ```
 
 在后一种情况下，订阅将随着选项的更改自动重新启动。
@@ -494,7 +494,7 @@ const MESSAGES = gql`
       text
     }
   }
-`;
+`
 
 export default {
   props: ["channelId"],
@@ -503,8 +503,8 @@ export default {
     // 消息列表
     const { result, subscribeToMore } = useQuery(MESSAGES, () => ({
       channelId: props.channelId
-    }));
-    const messages = useResult(result, []);
+    }))
+    const messages = computed(() => result.value?.messages ?? [])
 
     subscribeToMore(() => ({
       document: gql`
@@ -518,13 +518,13 @@ export default {
       variables: {
         channelId: props.channelId
       }
-    }));
+    }))
 
     return {
       messages
-    };
+    }
   }
-};
+}
 </script>
 ```
 
@@ -544,10 +544,10 @@ subscribeToMore(() => ({
     channelId: props.channelId
   },
   updateQuery: (previousResult, { subscriptionData }) => {
-    previousResult.messages.push(subscriptionData.data.messageAdded);
-    return previousResult;
+    previousResult.messages.push(subscriptionData.data.messageAdded)
+    return previousResult
   }
-}));
+}))
 ```
 
 ## 通过 WebSocket 进行身份验证
@@ -555,7 +555,7 @@ subscribeToMore(() => ({
 在很多情况下，在允许客户端接收订阅结果之前，有必要对客户端进行身份验证。为此 `SubscriptionClient` 构造函数接受一个 `connectionParams` 字段，该字段传递一个自定义对象，服务端可以在设置任何订阅之前使用该对象来验证连接。
 
 ```js
-import { WebSocketLink } from "@apollo/client/link/ws";
+import { WebSocketLink } from "@apollo/client/link/ws"
 
 const wsLink = new WebSocketLink({
   uri: `ws://localhost:5000/`,
@@ -564,7 +564,7 @@ const wsLink = new WebSocketLink({
     connectionParams: {
         authToken: user.authToken,
     },
-});
+})
 ```
 
 ::: tip