问题描述
// useMe.tsx //
import { gql,useQuery } from "@apollo/client";
import { meQuery } from "../__generated__/meQuery";
export const ME_QUERY = gql`
query meQuery {
me {
id
email
my_workspaces {
title
}
}
}
`;
export const useMe = () => {
return useQuery<meQuery>(ME_QUERY,{
fetchPolicy: "cache-first"
});
};
这是我的自定义钩子。我正在尝试使用 graphql 查询获取用户信息并将其设置为自定义挂钩。
但是出现了一些问题,每当高级组件状态发生变化时,
调用 custom-hook(useMe) 的低级组件总是重新渲染
所以我想用 useCallback 或 useMemo 记住自定义钩子,但我找不到正确的答案
请帮帮我,谢谢
解决方法
用 useCallback
包裹就可以了
const useMeQuery = () => {
return useQuery<meQuery>(ME_QUERY,{
fetchPolicy: "cache-first"
});
export const useMe = useCallbak(useMeQuery)
}