0
// 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"
  });

};

This is my custom hook. I am trying to get user info with graphql query and made it to custom hook.

But there was some problem, whenever the high-level components state changed,

the low-level component which calling custom-hook(useMe) always rerendered

so i wanna memoize custom hook with useCallback or useMemo but i can't find right answer

please help me, Thank you

jy kim
  • 17
  • 5

1 Answers1

-1

Just wrap the value with useCallback is fine

const useMeQuery = () => {
  return useQuery<meQuery>(ME_QUERY, {
    fetchPolicy: "cache-first"
  });
export const useMe = useCallbak(useMeQuery)
}
Tony Yip
  • 705
  • 5
  • 14