docs: remove references to useResult
This commit is contained in:
Guillaume Chau
@@ -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',
|
||||
],
|
||||
|
||||
@@ -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.
|
||||
@@ -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('')
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
# useResult
|
||||
|
||||
## 参数
|
||||
|
||||
- `result`：`Ref` 保留来自 Apollo 操作的结果数据。
|
||||
|
||||
- `defaultValue`：（默认值：`null`）当数据不可用时使用的默认值。
|
||||
|
||||
- `pick`：（默认值：`null`）用于挑选的函数，以数据对象为参数，并应返回一个派生对象。
|
||||
|
||||
## 返回值
|
||||
|
||||
`useResult` 将返回一个包含从结果数据中挑选的数据的 `Ref`。
|
||||
@@ -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('')
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user