How to type data from useQuery correctly in TS? Getting implicit any errors.

[tgram-3D]

I'm new to React Query and I can't figure out something that seems like it should be incredibly simple, and it probably is. If I make a hook like this:

export const useMe = () =>
    useQuery<User>({
        queryKey: ["user"],
        queryFn: getUser,
    });

The return type is QueryObserverResult<TData, TError> . If I try to access the the data either of the following ways I get any type for user:

const queryClient = useQueryClient();
const user = queryClient.getQueryData(["user"]);
    //OR
const {data: user} = useMe()

The queryFn seems to be inferring the type correctly:

(property) queryFn: () => Promise<User>

So what am I missing here? I tried typing the useMe hook as QueryObserverResult<User, DefaultError> and same deal. If I try to render something like this I get an implicit any error on session:

{user?.sessions.map(session => (

I have react-query v. 5.31.0 and Typescript 5.2.2

[TkDodo]

as long as getUser is typed to return Promise<User>, you don't need anything. Just JavaScript:

export const useMe = () =>
    useQuery({
        queryKey: ["user"],
        queryFn: getUser,
    });

[tgram-3D]

It is, and the queryFn is inferring the type correctly (see above), but if I try to use the useMe hook in a component I can't access properties of user without implicit any errors. I also tried generics:

async function getUser(): Promise<User> {
    const headers = {
        "Content-Type": "application/json"
    };
    const response = await axios.get<User>("/users/me", { headers });
    return response.data;
}

export const useMe = (): QueryObserverResult<User, unknown> =>
    useQuery<User, unknown>({
        queryKey: ["user"],
        queryFn: getUser,
        retry: 0,
        staleTime: 1000 * 60 * 60
    });

Then in my component:

const { data: user } = useMe();
...
(alias) useMe(): QueryObserverResult<User, unknown>
const user: QueryObserverResult<User, unknown>

But the properties of user like user.email, user.sessions, etc. are still getting inferred as any. Same deal without the generics: the type of user is just QueryObserverResult<TData, TError> instead.

I can get around it by either casting or turning off strict type checking but obviously I'd rather not have to do that.

Could it be my Typescript version 5.2.2? Is there something I'm missing?

[TkDodo]

Can you show this in a typescript playground please. Make sure your tsconfig settings have strict:true

[tgram-3D]

Don't ask me how or why, but I fixed it. I'm using Vite, and I changed the moduleResolution param in tsconfig.json from bundler to node, then back to bundler, and all of a sudden all the ReactQuery type inferencing works correctly. I'm not sure if I saved in between but I also removed allowImportingTsExtensions for a second.

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

These are the settings which I haven't changed from the default vite-react-ts template, which was loaded a couple months ago and modified into a template repo. I noticed that the return type from useQuery changed from QueryObserverResult to UseQueryResult, so my useMe hook is now:

export const useMe = () =>
    useQuery({
        queryKey: ["user"],
        queryFn: getUser,
        retry: 0,
        staleTime: 1000 * 60 * 60
    });

const useMe: () => UseQueryResult<User, Error>

Bizarre... but I'll take it.