Best Practices for "selector" pattern

[gbouteiller]

Hello, I'm trying to get derived data from a auth object with useAuth and useIsAuthenticated but I don't know what is the best way to implement it, any clue?

export const useAuth = (): QueryResult<Auth> => useQuery('auth', fetch);

/*1 : Create another query key */ 
export const useIsAuthenticated = (): QueryResult<boolean> => useQuery('isAuthenticated', async () => getIsAuthenticated(await fetch()));

/*2 : Use memo */
export const useIsAuthenticated = (): QueryResult<boolean> => {
  const { data: auth, ...rest } = useAuth();
  const data = useMemo(() => auth && getIsAuthenticated(auth), [auth]);    
  return { ...rest, data } // type issue with fetchMore and refetch types 
}

/*3 : Something else? */

[TkDodo]

From what I have read on twitter, useMemo seems to be the way to go for data transformations:

https://twitter.com/code_tank_dev/status/1306982914849222656
https://twitter.com/tannerlinsley/status/1307005520402771968

[gbouteiller]

with useMemo, how would you reconcile types for fetchMore and refetch?

[TkDodo]

I don't think I understand the question. Do you have an example maybe?

Also, it looks like v3 will natively support selectors 🙂