Quasar Vue3中GraphQL单用户查询参数不更新问题求助

我在Quasar Vue3中使用GraphQL，需要点击按钮时根据userId获取单个用户数据，但当前代码始终传递初始值42作为userId，即使已更新state中的selectedUserId。同时希望集成loading属性，不清楚如何在按钮事件中传递userId调用查询。

原代码实现 #

状态定义 #

const state = reactive({
  selectedUserId: 42,
});

查询语句 #

const getOneUserQuery = gql`
  query oneUser($id: Int!) {
    oneUser(userId: $id) {
      id
      firstName
      lastName
    }
  }
`;

查询调用代码 #

const oneUserResults = useQuery(getOneUserQuery, {
  id: state.selectedUserId,  //始终传递42
});

按钮点击事件 #

async function onClickSubmit(userId: number) {
  state.selectedUserId = userId; //已确认此处更新了值
  console.log(state.selectedUserId);
  const fetchedUser = await oneUserResults.refetch();
  console.log(fetchedUser);
  if (fetchedUser) {
    console.log(fetchedUser.data);
    console.log(fetchedUser.data.oneUser);
    console.log(fetchedUser.data.oneuser.id); //返回的始终是userId=42的用户
    console.log(fetchedUser.data.oneuser.firstName);
  }
}

解决后的可运行代码 #

const state = reactive({
  loading: oneUserLoading,
});

const { refetch: oneUserFetch, loading: oneUserLoading } = useQuery(gql`
  query oneUser($id: Int!) {
    oneUser(userId: $id) {
      id
      firstName
      lastName
    }
  }
`);


async function onClickSubmit(userId: number) {
  state.loading = true;
  if (!userId) return;
  const fetchedUser = await oneUserFetch({ id: userId });
  console.log(fetchedUser);
  if (fetchedUser) {
    console.log(fetchedUser.data);
    console.log(fetchedUser.data.oneUser);
    console.log(fetchedUser.data.oneUser.id);
    console.log(fetchedUser.data.oneUser.firstName);
  }
  state.loading = false;
}

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