Vue 3, GraphQL, Apollo — как повторно отображать запрос при изменении кеша?
Я хотел бы знать, как создавать приложения Vue 3 Apollo с запросы и мутации. Я знаком с хуком react useQuery. Он повторно отображает компонент всякий раз, когда кэшированные данные были изменены (путем мутаций).
Я пытался:
- использовать запрос (https://v4.apollo.vuejs.org/api/use-query.html)
- Аполлонзапрос (https://v4.apollo.vuejs.org/guide-components/query.html)
Во всех случаях он просто загружает данные один раз и не реагирует на изменения данных кэша.
Я понимаю, что могу создать собственную установку с помощью клиента Apollo или обновить запросы. Я даже могу аннулировать компоненты по его ключам. Это не так элегантно, как хук React useQuery.
Мне было любопытно, есть ли какое-нибудь готовое решение и лучшая практика для плавной работы с graphql в Vue 3.
Я заметил, что это моя вина, я неправильно установил политику кеша, я отвечу на вопрос сам, спасибо!
Ответы 1
Я неправильно настроил схему и обновление кеша. Таким образом, ответ заключается в том, что это работает хорошо.
Например:
<template>
<div v-if = "loading">...loading</div>
<div v-else-if = "error">{{ error.message }}</div>
<div v-else>{{value}}</div>
</template>
<script setup lang = "ts">
import gql from "graphql-tag";
import { GetValueQuery } from "./ValueComponent.generated";
import { useQuery, useResult } from "@vue/apollo-composable";
const GetValue = gql`
query getValue {
value
}
`;
function useGetValue() {
const { result, loading, error } =
useQuery<GetValueQuery>(GetValue);
const value = useResult(result, null, (data) => data.value);
return { value, loading, error };
}
const { value, loading, error } = useGetScans();
</script>
Работает описанным образом - шаблон перерисовывается после изменения кеша данных (путем мутации с правильным набором результатов или его update функцией)
Так что это некорректный вопрос, ошибка была в реализации политики кэширования на моей стороне.
Не могли бы вы предоставить песочницу кода, показывающую, что вы делаете, чтобы мы могли поиграть с кодом?