Type 'Promise<any>' is not assignable to type 'LoaderFunction'.

[arthtyagi]

export const userQuery = () => ({
  queryKey: ['user'],
  queryFn: async () => getUser(),
});

export async function userLoader(qc:QueryClient) {
  return (
    qc.getQueryData(userQuery().queryKey)
      ?? (await qc.fetchQuery(userQuery()))
  );
}

I'm using this query in my loader and the loader in this nested route:

<Route
   path="settings"
   element={<Settings />}
   loader={userLoader(qc)}
>

The issue, however, is that userLoader returns a Promise type (inferred as any but that's beside the point) which is not compatible with LoaderFunction type. Nudge me in the right direction in terms of what I could fix here?

[arthtyagi]

Fixed it by changing the return type to () => Promise<{} | null>.

export function userLoader(qc: QueryClient) {
  return async () => {
    const data = qc.getQueryData(userQuery().queryKey);
    if (data) return data;
    return qc.fetchQuery(userQuery());
  };
}