let UseQueryResult contains queryKey property

[bglgwyng]

We use wrapped versions of useQuery in many cases.
Wrapped ones let us use react-query in an easier way, preventing us from writing invalid query keys, etc.
At the same time, they make the query key invisible and it causes a small problem.

const client = useQueryClient();
const { data } = usePets({ id: 1 });

useEffect(() => {
  client.invalidateQueries(/* what is the query key of `usePeys({ id: 1})`? */)
}, [])

There is no way to get the query key of usePets({ id: 1 }) until we discover the definition of that custom hook.

My suggestion is to add queryKey property to useQuery's return value. Then we can get the query key like below.

const { data, queryKey } = usePets({ id: 1 });

[TkDodo]

apart from the obvious "why would you invalidate in an effect" question, I see two soluions:

1. use a query key factory so that you can do queryKeys.pet(1) to get its key
2. leverage your custom hook to return an invalidate function:

const usePets = (id) => {
  const key = ['pets', id]
  const query = useQuery(....)
  const client = useQueryClient()
  const invalidate = () => queryClient.invalidateQueries(key)

  return { query, invalidate }
}