Is there a way to infer queryClient.setQueryData automatically?

[nirtamir2]

Sometimes I want to use advanced usage of react-query with optimistic updates.
So I usually open the cache and update it:

export function useInviteMemberToOrganization() {
  const queryClient = useQueryClient();

  return useMutation(someFunctionThatCallsTheServer, {
    onSuccess: (data, variables) => {
      const queryKey = queryKeys.getQueryKey(variables);
      queryClient.setQueryData<Array<SomeType>>(
        queryKey,
        (queriesData = []) => {
          return getUpdatedData(queriesData, data)
        }
      );
    },
  });
}

For example.
But setting the generic explicit on queryClient.setQueryData<Array<SomeType>> can be hard to maintain if the useQuery that sets the matching queryKey changes. Luckily I notice TRPC and it creates a wrapper around react-query that depends on the queryKey - you get the type of setQueryData (or other cache getters/setters) right. I know that it can be non-predictable with query filters and similar - but it would be nice if we will have a way to configure react-query (without TRPC) that can infer the queryClient setQueryData / getQueryData automatically based on the useQuery key.

[TkDodo]

since there is no correlation between the key and what's in the cache, you can't do this natively with RQ. You'd need to define a wrapper of some sorts that knows about the data structure for each key.

I did some work in that regard waaay back for v2, maybe it is useful: https://gist.github.com/TkDodo/74051d3224358b8a7f2407630885cbda

[nirtamir2]

Thanks!