T
TanStack•3y ago
absent-sapphire

Are queryKey deeply compared ?

Hello, Let's say I want a <UserInfo/> component that can either accept a user Id or a user Email : <UserInfo id={1} /> or <UserInfo email="simone@corp.com" /> This leads to props typed like this : 
type UserInfoPropsWithEmail = {
  email: string;
};

type UserInfoPropsWithId = {
  id: number;
};

function isUserInfoWithEmail(
  props: UserInfoProps
): props is UserInfoPropsWithEmail {
  return (props as UserInfoPropsWithEmail).email !== undefined;
}

type UserInfoProps = UserInfoPropsWithEmail | UserInfoPropsWithId;
type UserInfoPropsWithEmail = {
  email: string;
};

type UserInfoPropsWithId = {
  id: number;
};

function isUserInfoWithEmail(
  props: UserInfoProps
): props is UserInfoPropsWithEmail {
  return (props as UserInfoPropsWithEmail).email !== undefined;
}

type UserInfoProps = UserInfoPropsWithEmail | UserInfoPropsWithId;
Assuming I have an helper function const resolveUser = (props: UserInfoProps): Promise<User | undefined> => { .... }, that I want to wrap using react query, how can I "safely" set the query key arrays ? Can I safely use this code ? 
const UserInfo: React.FC<UserInfoProps> = (props) => {
  const { data: userData } = useQuery({
    queryKey: ["userData", props],
    queryFn: () => resolveUser(props)
  });
const UserInfo: React.FC<UserInfoProps> = (props) => {
  const { data: userData } = useQuery({
    queryKey: ["userData", props],
    queryFn: () => resolveUser(props)
  });
Is react query performing a deep compare of dep array ? I created a small repro : https://codesandbox.io/s/condescending-dust-ymkdxc?file=/src/App.tsx:949-1171 Based on my observation, it seems smart enough. Am I correct ? thx
stevebeauge
CodeSandbox
condescending-dust-ymkdxc - CodeSandbox
condescending-dust-ymkdxc by stevebeauge using @tanstack/react-query, loader-utils, react, react-dom, react-scripts
1 Reply
dependent-tan
dependent-tan•3y ago
yes, it does

Did you find this page helpful?