Vue3 Composition API：JWT保存后调用myUser查询的实现疑问

问题背景 #

刚接触Vue及相关技术，已实现登录后保存JWT令牌的功能，但不清楚如何在loginUser mutation执行完成后触发myUser查询。曾尝试监听loggedIn ref但未解决，现寻求可行方案。

解决方案 #

利用@vue/apollo-composable提供的useQuery，有两种直接可行的方式实现需求：

方式1：手动触发查询（主动调用refetch） #

在setup中初始化useQuery时禁用自动执行，待登录完成后手动调用refetch方法触发查询：

<script>
import gql from 'graphql-tag';
import { useMutation, useQuery } from '@vue/apollo-composable';
import { ref, computed } from 'vue';
import { useUserStore } from '../stores/user';
import { myUser } from '@/apollo/queries';
import { loginUser } from '@/apollo/mutations';

export default {
  name: 'LoginForm',

  setup() {
    let username = ref('');
    let password = ref('');
    let loggedIn = ref(false);

    const error = computed(() => {
      return username.value === '' ? 'The username is required' : '';
    });

    // 初始化myUser查询，禁用自动执行
    const { refetch: fetchMyUser } = useQuery(myUser, null, { enabled: false });

    const {
      mutate: loginUserMutation,
      onDone,
      onError,
    } = useMutation(loginUser);

    onDone((res) => {
      if (res?.data?.loginUser && res.data.loginUser.success) {
        localStorage.setItem('access-token', res.data.loginUser.msg);

        useUserStore().$patch({
          username: res.data.loginUser.msg,
        });

        loggedIn.value = true;
        // 登录完成后手动触发myUser查询
        fetchMyUser();
      }
    });

    const loginBtnClicked = () => {
      loginUserMutation({
        username: username.value,
        password: password.value,
        platform: 'PC',
      });
    };

    return {
      username,
      password,
      error,
      loginBtnClicked,
      loginUserMutation,
    };
  },
};
</script>

方式2：通过enabled属性自动触发 #

将useQuery的enabled参数绑定到loggedIn ref，当登录成功后loggedIn变为true时，自动执行查询：

<script>
import gql from 'graphql-tag';
import { useMutation, useQuery } from '@vue/apollo-composable';
import { ref, computed } from 'vue';
import { useUserStore } from '../stores/user';
import { myUser } from '@/apollo/queries';
import { loginUser } from '@/apollo/mutations';

export default {
  name: 'LoginForm',

  setup() {
    let username = ref('');
    let password = ref('');
    let loggedIn = ref(false);

    const error = computed(() => {
      return username.value === '' ? 'The username is required' : '';
    });

    // 绑定enabled到loggedIn，自动触发查询
    const { result: userResult } = useQuery(myUser, null, { enabled: loggedIn });

    const {
      mutate: loginUserMutation,
      onDone,
      onError,
    } = useMutation(loginUser);

    onDone((res) => {
      if (res?.data?.loginUser && res.data.loginUser.success) {
        localStorage.setItem('access-token', res.data.loginUser.msg);

        useUserStore().$patch({
          username: res.data.loginUser.msg,
        });

        // 状态变更后自动触发myUser查询
        loggedIn.value = true;
      }
    });

    const loginBtnClicked = () => {
      loginUserMutation({
        username: username.value,
        password: password.value,
        platform: 'PC',
      });
    };

    return {
      username,
      password,
      error,
      loginBtnClicked,
      loginUserMutation,
      userResult // 可在模板中直接使用查询结果
    };
  },
};
</script>

关键说明 #

• 两种方式都依赖@vue/apollo-composable的生命周期管理，确保JWT已存入localStorage后再执行查询，Apollo Client会自动携带令牌请求接口。
• 方式1适合需要自定义触发时机或额外前置处理的场景；方式2更简洁，利用Vue响应式状态自动控制查询执行逻辑。

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