我可以记住自定义钩子,这是反应中的 graphql 查询吗?

问题描述

// 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)
}