Apollo React中useMutation跳转后useQuery不生效问题求助

问题根因 #

1. Home页未判断useQuery的加载状态，请求还未发起就提前跳转
   你在Home页的useEffect没有判断loading状态，useQuery初始化时默认返回的data会是你GraphQL schema中定义的初始值（也就是allstock: []），此时请求还没发出去，就触发了跳转到/getAccount的逻辑，自然看不到allStock的网络请求。

2. Apollo Client默认缓存策略导致命中缓存不发请求
   Apollo Client的useQuery默认fetchPolicy为cache-first，如果此前你已经发起过allStock查询且缓存了空数组的结果，后续再调用useQuery(allStock)时会直接返回缓存数据，不会发起新的网络请求。

解决方案 #

第一步：修改Home页逻辑，增加加载状态判断

修改Home页的useQuery和useEffect代码：

export default () => {
  // 增加fetchPolicy配置，强制走网络请求，也可以根据需求用cache-and-network
  const { data, loading } = useQuery(allStock, {
    fetchPolicy: 'network-only'
  });
  const history = useHistory();
  console.log(data);

  useEffect(() => {
    // 等请求加载完成后再判断是否跳转
    if (!loading && data && data.allstock.length === 0) {
      history.push(`/getAccount`);
    }
  }, [data, loading, history]);
}

第二步：Mutation完成后主动清除对应缓存（可选，适合需要保持缓存一致性的场景）

如果你的getStock mutation会影响allStock的返回结果，可以在mutation的update回调中主动清除allStock的缓存，保证跳转后查询拿到最新数据：

const [getStockMutation] = useMutation(getStock, {
  variables: { click: click },
  // 新增update回调处理缓存
  update(cache) {
    cache.evict({ fieldName: 'allstock' });
    cache.gc();
  },
  onCompleted() {
    setTimeout(() => {
      history.push("/home");
    }, 500);
  },
});

额外优化建议

你当前代码同时用了await getStockMutation()和onCompleted回调，二者功能重复，直接在await之后处理跳转逻辑即可，无需重复写：

const onClick = async () => {
  setClick(true);
  try {
    await getStockMutation();
    setTimeout(() => {
      history.push("/home");
    }, 500);
  } catch (e) {
    toast.error("아이디와 비밀번호를 다시 확인 해 보세요.");
  }
};

内容的提问来源于stack exchange，提问作者박형렬