如何在Vue与Urql中实现路由切换时更新查询

你的核心问题是：同一组件路由切换时，路由元数据里的myQuery变了，但Urql的useQuery没重新执行——这是因为你初始化时只取了一次route.meta.query，路由切换时这个值的变化没被追踪到，useQuery的查询模板也就没更新。

直接给两种可行的解决方式：

方式一：用响应式计算属性自动触发查询更新 #

利用Vue的响应式特性，把动态生成的GQL查询做成计算属性，让useQuery自动追踪变化：

<script setup>
import { useRoute, computed } from 'vue';
import { useQuery, gql } from '@urql/vue';

const route = useRoute();

// 让myQuery保持响应式，路由meta变化时自动更新
const myQuery = computed(() => route.meta.query);

// 动态生成GQL查询，依赖响应式的myQuery
const dynamicPostsQuery = computed(() => gql`
  query posts {
    ${myQuery.value} {
      title
      description
      interests {
        title
      }
      createdAt
      image_url
      userId {
        username
      }
    }
  }
`);

// useQuery会自动监听dynamicPostsQuery的变化，重新执行查询
const { data } = useQuery({
  query: dynamicPostsQuery,
  pause: false
});
</script>

方式二：手动监听路由变化触发查询 #

如果需要更灵活的控制（比如初始暂停查询、做额外逻辑），可以用watch监听路由元数据变化，手动触发查询更新：

<script setup>
import { useRoute, watch } from 'vue';
import { useQuery, gql } from '@urql/vue';

const route = useRoute();

// 初始化时先暂停查询，避免无效请求
const { data, executeQuery } = useQuery({
  query: gql`query posts {}`, // 占位用的空查询
  pause: true
});

// 监听路由meta里的query变化，更新并执行新查询
watch(
  () => route.meta.query,
  (newQuery) => {
    const updatedQuery = gql`
      query posts {
        ${newQuery} {
          title
          description
          interests {
            title
          }
          createdAt
          image_url
          userId {
            username
          }
        }
      }
    `;
    executeQuery({ query: updatedQuery });
  },
  { immediate: true } // 组件初始化时立即执行一次
);
</script>

关键说明 #

• 第一种方式最简洁，完全利用Vue和Urql的响应式联动，只要dynamicPostsQuery变化，useQuery就会自动重新请求。
• 第二种方式适合需要在查询更新前做额外处理的场景，比如校验newQuery的合法性、加载状态控制等。
• 确保你路由配置里的meta.query字段是正确设置的（比如不同路由对应不同的查询实体名，比如"posts"、"featuredPosts"）。

内容的提问来源于stack exchange，提问作者Quin