code-gen(react-query): add .fetch, .invalidate, .prefetch etc on generated hooks

[dirkdev98]

Working with the generated react-query hooks and api functions outside of the render tree is currently relatively verbose;

queryClient.fetchQuery(useUserSettings.queryKey(), () => apiUserSettings(axiosInstance, ...params))

this can be shortened most of the time in something like;

usUserSettings.fetch(queryClient, axiosInstance, ...params);

This improves the following cases;

• Without Typescript, the end user can call / import the wrong apiXxYY function
• Readability when many api calls are fetched, prefetched etc. Currently you have to scan to the use of useUserSettings.queryKey() to find the api call that is prefetched.
• A few less imports
• An easier abstraction to work with, without sacrificing customisability when needed.

We can generate a few helpers to do this for the user;

useUserSettings.fetch = (queryClient, axiosInstance, { params, query, body, }) =>  queryClient.fetchQuery(...);
useUserSettings.prefetch = (queryClient, axiosInstance, { params, query, body }) => queryClient.prefetchQuery(...);
useUserSettings.invalidate = (queryClient, { params, query, body }) => queryClient.invalidateQueries(...);
useUserSettings.setQueryData = (queryClient, { params, query, body }, data) => queryClient.setQueryData(...);

Usage in Next.js SSR would look something like;

export function getServerSideProps(context) {
  const queryClient = new QueryClient();
  const axiosInstance = createSSRAxiosInstanceSomehow(context);

  await Promise.all([
    useAuthMe.prefetch(queryClient, axiosInstance),
    useEntityList.prefetch(queryClient, axiosInstance, {
      body: { ... },
    }),
  ]);

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}