vue-apollo разделяет определение запроса между компонентами - PullRequest
Новая
       19

vue-apollo разделяет определение запроса между компонентами

0 голосов
/ 15 октября 2019

Я только начал с vue-apollo, и мне интересно, как оптимизировать использование запросов apollo. У меня есть некоторые компоненты, которые используют точно такой же запрос Apollo.

Сам запрос может быть в отдельном файле, поскольку он является просто константой: 

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>

Iне хочу повторять это определение в каждом компоненте, который его использует. Но как мне перенести полное определение Аполлона? Сначала я пытался извлечь определение в функцию, но это не сработало: 

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

    export default {
        props: ['path'],
        apollo: {
            account: () => getQuery(this.path)
        }
    }

</script>

Итак, как я могу использовать одно и то же определение запроса, включая переменные и подписку?

1 Ответ

0 голосов
/ 15 октября 2019

Ах, я справился через несколько минут после того, как задал вопрос. 

<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 можно, конечно, переместить в другой файл. Таким образом, для меня было достаточно просто использовать «это» внутри определения константы, а не использовать его в качестве параметра

...