1回答

黑石

2024-04-03

已采纳

https://github.com/apollographql/apollo-client/issues/11151 这里有讨论，主要是因为你没有用的 lock 文件，版本不一样导致的。

@apollo/client 在 3.8.0 以后引入了一个问题，要解决 refetch 以后调用 onCompleted 的问题，需要加一个  notifyOnNetworkStatusChange: true 的参数，在 src/hooks/userHooks.ts 如下：

import { connectFactory, useAppContext } from '@/utils/contextFactory';
import { useQuery } from '@apollo/client';
import { GET_USER } from '@/graphql/user';
import { IUser } from '@/utils/types';
import { useLocation, useNavigate } from 'react-router-dom';

const KEY = 'userInfo';
const DEFAULT_VALUE = {};
export const useUserContext = () => useAppContext(KEY);

export const connect = connectFactory(KEY, DEFAULT_VALUE);

export const useGetUser = () => {
const { setStore } = useUserContext();
const location = useLocation();
const nav = useNavigate();
const { loading, refetch } = useQuery<{ getUserInfo: IUser }>(GET_USER, {
notifyOnNetworkStatusChange: true, // 就是这句话，一定要加上
onCompleted: (data) => {
if (data.getUserInfo) {
const { id, name, tel, desc, avatar } = data.getUserInfo;
setStore({
id,
name,
tel,
desc,
avatar,
refetchHandler: refetch,
});
// 已登录时访问login需要直接跳转到首页
if (location.pathname.startsWith('/login')) {
nav('/');
}
return;
}
setStore({ refetchHandler: refetch });
if (location.pathname !== '/login') {
nav(`/login?orgUrl=${location.pathname}`);
}
},
onError: () => {

setStore({ refetchHandler: refetch });
if (location.pathname !== '/login') {
nav(`/login?orgUrl=${location.pathname}`);
}
},
});
return { loading, refetch };
};

其实最好就是用我的 lock 就不会有这么多问题了，等你学会了，再去升级包，这样就不会搞一天都不知道怎么解决了。

2

2

weixin_慕娘2558318

感谢老师

2024-09-11

共2条回复