Why we don't have invalidateQuery and setQueryData interfaces on the useQuery returned value?

[ahmafi]

Firstly I don't know the answer to the titled question, second if it's gonna stay like that, what is my best options when the my query and mutations are in the same component (which happens a lot)?

Is something like this a good idea?

// use-pickups.ts
export default function usePickups(page: number) {
    const key = ["user", "products", page];

    const pickups = useQuery({
        queryKey: key,
        queryFn: apiGetPickupRequests,
    });

    return {
        ...pickups,
        key: key,
    };
}

// some-component.tsx
const pickups = usePickups(currentPage)
queryClient.setQueryData(pickups.key, ...)
queryClient.invalidateQueries({ queryKey: pickups.key })

[TkDodo]

we don’t return it from useQuery because mutations and queries being in the same component isn’t that common. Also, for invalidation, you would usually want to garget a “larger” range and not a specific key. In your case, maybe I’d invalidate ["user", "products"] and not just a specific page. setQueryData is mainly needed for optimistic updates, and you can get type-safety with queryClient.setQueryData and queryOptions in v5 so it’s the preferred API.

Regarding your code: spreading the query result can be troublesome, we have a lint rule for that: https://tanstack.com/query/v5/docs/eslint/no-rest-destructuring