Question

我刚开始使用vue-apollo，我想知道如何优化apollo查询的某些用法。我有一些组件正在使用完全相同的阿波罗查询。

查询本身可以在单独的文件中，因为它只是一个常量：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Phone number</h2>
   <input v-model="value" type="text" @input="acceptNumber">
</div>

它可以在我的组件内部轻松使用：

export const accountByPath = gql`
    query accountByPath($path: String!) {
        account: accountByPath(path: $path) {
            id
            name
        }
    }`
;

我不想在使用它的每个组件中重复此定义。但是，如何移动完整的阿波罗定义？天真地我首先尝试将定义提取到函数中，但这不起作用：

<script>
    export default {
        props: ['path'],
        apollo: {
            account: {
                query: accountByPath,
                variables() {
                        return {path: this.path}
                },
                subscribeToMore: {
                    document: updateAccountSubscription,
                    variables() {
                        return {
                            path: this.path,
                        }
                    },
                }
            }
        }
    }
</script>

那么，如何重用相同的查询定义，包括变量和订阅？

Answer 1

啊，我在问了问题几分钟后就做到了。

<script>
   const getQuery = function accountQuery() {
        return {
            query: accountByPath,
            variables() {
                return {path: this.path}
            },
            subscribeToMore: {
                document: updateAccountSubscription,
                variables() {
                    return {
                        path: this.path,
                    }
                },
            }
        }
    };

    export default {
        props: ['path'],
        apollo: {
            account: getQuery
        }
    }

</script>

getQuery常量当然可以移动到其他文件中。因此，对我来说，洞察力只是在常量函数定义中使用“ this”而不是将其用作参数

组件之间的vue-apollo共享查询定义

1 个答案: