Vue 3、GraphQL、Apollo - 如何在缓存更改时重新呈现查询？

Question

我想知道如何使用 queries 和 mutations 构建 Vue 3 Apollo 应用程序。我熟悉 react useQuery 钩子。只要缓存数据发生变化（通过突变），它就会重新呈现组件。

我试过：

useQuery (https://v4.apollo.vuejs.org/api/use-query.html)
ApolloQuery (https://v4.apollo.vuejs.org/guide-components/query.html)

在所有情况下，它只加载一次数据，不会对缓存数据更改做出反应。

我不知道我可以通过 Apollo 客户端构建自己的设置或重新获取查询。我什至可以通过它的键使组件无效。这并不像 React useQuery 钩子那样优雅。

很好奇有没有现成的解决方案和Vue 3中流畅的graphql操作的最佳实践

Answer 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 函数），模板是 re-rendered

所以这不是有效的问题，错误是在我这边的缓存策略的实现中。

Vue 3、GraphQL、Apollo - 如何在缓存更改时重新呈现查询？

Vue 3, GraphQL, Apollo - How to re-render query when cache changes?

apollo

vue.js

graphql

vuejs3