Type QueryClient setQueryData

[Lesik]

Hi,

first off, thanks for the great package! I've been wanting to have something like this ever since I started using React Query over a year ago.

Open here for some personal backstory why I love this package

My main problem with React Query is that for queries there should be a single source of truth that links query key, query function, query parameter types and query return types together. But the useQuery hook makes you to define these relationships anew over and over again every time you call the hook, which wastes time, makes it easy to introduce an inconsistency, and makes it hard to refactor.

So to solve this for the projects at work I had basically written my own "wrapper" around React Query which is very similar to what this package is doing, but since working with complex TypeScript type definitions can be quite daunting I didn't get as far as you guys. Which is why I was happy to finally discover this package! All this time I couldn't believe nobody else had the same problem with React Query as I did and created a package for it.

I'm not sure if you're familiar, but Redux Toolkit has a library similar to React Query called RTK Query, and I much prefer their structure: You first define your API using the createApi function, where you define all the keys, functions, and data types. This was my main inspiration, but RTK Query goes a bit "too far" by (1) being centered around URLs and endpoints (not flexible for other types of APIs) and (2) requiring Redux which isn't a dependency necessary for every project. So React Query + a helper library is my preferred solution.

---

The feature I propose is to enable typing of the QueryClient's setQueryData function. Through the queryFn field defined on the queries in the createQueryKeyStore function, we already give the type information of the data that this query will hold. Based on that we could type the setQueryFunction to accept only this type.

The advantage is big: Currently, you can set the query data to any data you like, and then the type promise that useQuery() gives your components no longer holds true. It is up to the developer to keep track which query keys should contain what data types, and pass the right data every time. There are no type checks.

Example:

import { createQueryKeyStore } from "@lukemorales/query-key-factory";
import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";

type User = {
    name: string;
};

const api = {
    getUser: (userId: string): User => ({
        name: "John",
    }),
};

export const queries = createQueryKeyStore({
  users: {
    all: null,
    detail: (userId: string) => ({
      queryKey: [userId],
      queryFn: () => api.getUser(userId),
    }),
  },
});

export const App = () => {
    const query = useQuery(queries.users.detail('14'));
    if (query.isSuccess) {
      // `query.data` is of type `User`, so it knows what type this query holds
      // we can safely access `query.data.name` and it will work
    }

    const queryClient = useQueryClient();
    queryClient.setQueryData(queries.users.detail('14').queryKey, () => ({
        // we can just pass any data here, including an object that contains no `name`
        // which will break the code above trying to access `name`
        email: "john.doe@example.com",
    }));
}

And other functions such as getQueryData should also be type-safe.

Use cases include Update from Mutation Responses and Optimistic Updates.

[Lesik]

As for the technical realisation, either we could override React Query's type for QueryClient to be type safe using Module Augmentation, or by exporting our own TypedQueryClient and useTypedQueryClient() hooks are just wrappers around the original but with the proper type.