feat!: Inject query options in context (#31)

* Invert the options spreading, so we can override from the context

* Pass the useQuery options to the context for consolidation

* Fix context template

Author: fabien0102

plugins/typescript/src/generators/generateReactQueryComponents.test.ts

@@ -104,9 +104,9 @@ describe("generateReactQueryComponents", () => {
       /**
        * Get all the pets
        */
-      export const useListPets = (queryKey: reactQuery.QueryKey, variables: ListPetsVariables, options?: Omit<reactQuery.UseQueryOptions<ListPetsResponse, undefined, ListPetsResponse>, \\"queryKey\\" | \\"queryFn\\">) => { const { fetcherOptions, queryOptions, queryKeyFn } = usePetstoreContext(); return reactQuery.useQuery<ListPetsResponse, undefined, ListPetsResponse>(queryKeyFn(queryKey), () => fetchListPets({ ...fetcherOptions, ...variables }), {
-          ...queryOptions,
-          ...options
+      export const useListPets = (queryKey: reactQuery.QueryKey, variables: ListPetsVariables, options?: Omit<reactQuery.UseQueryOptions<ListPetsResponse, undefined, ListPetsResponse>, \\"queryKey\\" | \\"queryFn\\">) => { const { fetcherOptions, queryOptions, queryKeyFn } = usePetstoreContext(options); return reactQuery.useQuery<ListPetsResponse, undefined, ListPetsResponse>(queryKeyFn(queryKey), () => fetchListPets({ ...fetcherOptions, ...variables }), {
+          ...options,
+          ...queryOptions
       }); };
       "
     `);
@@ -216,9 +216,9 @@ describe("generateReactQueryComponents", () => {
       /**
        * Get all the pets
        */
-      export const useListPets = (queryKey: reactQuery.QueryKey, variables: ListPetsVariables, options?: Omit<reactQuery.UseQueryOptions<ListPetsResponse, undefined, ListPetsResponse>, \\"queryKey\\" | \\"queryFn\\">) => { const { fetcherOptions, queryOptions, queryKeyFn } = usePetstoreContext(); return reactQuery.useQuery<ListPetsResponse, undefined, ListPetsResponse>(queryKeyFn(queryKey), () => fetchListPets({ ...fetcherOptions, ...variables }), {
-          ...queryOptions,
-          ...options
+      export const useListPets = (queryKey: reactQuery.QueryKey, variables: ListPetsVariables, options?: Omit<reactQuery.UseQueryOptions<ListPetsResponse, undefined, ListPetsResponse>, \\"queryKey\\" | \\"queryFn\\">) => { const { fetcherOptions, queryOptions, queryKeyFn } = usePetstoreContext(options); return reactQuery.useQuery<ListPetsResponse, undefined, ListPetsResponse>(queryKeyFn(queryKey), () => fetchListPets({ ...fetcherOptions, ...variables }), {
+          ...options,
+          ...queryOptions
       }); };
       "
     `);
@@ -332,9 +332,9 @@ describe("generateReactQueryComponents", () => {
       /**
        * Get all the pets
        */
-      export const useListPets = (queryKey: reactQuery.QueryKey, variables: ListPetsVariables, options?: Omit<reactQuery.UseQueryOptions<ListPetsResponse, undefined, ListPetsResponse>, \\"queryKey\\" | \\"queryFn\\">) => { const { fetcherOptions, queryOptions, queryKeyFn } = usePetstoreContext(); return reactQuery.useQuery<ListPetsResponse, undefined, ListPetsResponse>(queryKeyFn(queryKey), () => fetchListPets({ ...fetcherOptions, ...variables }), {
-          ...queryOptions,
-          ...options
+      export const useListPets = (queryKey: reactQuery.QueryKey, variables: ListPetsVariables, options?: Omit<reactQuery.UseQueryOptions<ListPetsResponse, undefined, ListPetsResponse>, \\"queryKey\\" | \\"queryFn\\">) => { const { fetcherOptions, queryOptions, queryKeyFn } = usePetstoreContext(options); return reactQuery.useQuery<ListPetsResponse, undefined, ListPetsResponse>(queryKeyFn(queryKey), () => fetchListPets({ ...fetcherOptions, ...variables }), {
+          ...options,
+          ...queryOptions
       }); };
       "
     `);
@@ -419,9 +419,9 @@ describe("generateReactQueryComponents", () => {
       /**
        * Get all the pets
        */
-      export const useListPets = (queryKey: reactQuery.QueryKey, variables: ListPetsVariables, options?: Omit<reactQuery.UseQueryOptions<ListPetsResponse, undefined, ListPetsResponse>, \\"queryKey\\" | \\"queryFn\\">) => { const { fetcherOptions, queryOptions, queryKeyFn } = usePetstoreContext(); return reactQuery.useQuery<ListPetsResponse, undefined, ListPetsResponse>(queryKeyFn(queryKey), () => fetchListPets({ ...fetcherOptions, ...variables }), {
-          ...queryOptions,
-          ...options
+      export const useListPets = (queryKey: reactQuery.QueryKey, variables: ListPetsVariables, options?: Omit<reactQuery.UseQueryOptions<ListPetsResponse, undefined, ListPetsResponse>, \\"queryKey\\" | \\"queryFn\\">) => { const { fetcherOptions, queryOptions, queryKeyFn } = usePetstoreContext(options); return reactQuery.useQuery<ListPetsResponse, undefined, ListPetsResponse>(queryKeyFn(queryKey), () => fetchListPets({ ...fetcherOptions, ...variables }), {
+          ...options,
+          ...queryOptions
       }); };
       "
     `);

plugins/typescript/src/generators/generateReactQueryComponents.ts

@@ -438,7 +438,7 @@ const createQueryHook = ({
                         f.createCallExpression(
                           f.createIdentifier(contextHookName),
                           undefined,
-                          []
+                          [f.createIdentifier("options")]
                         )
                       ),
                     ],
@@ -485,10 +485,10 @@ const createQueryHook = ({
                       f.createObjectLiteralExpression(
                         [
                           f.createSpreadAssignment(
-                            f.createIdentifier("queryOptions")
+                            f.createIdentifier("options")
                           ),
                           f.createSpreadAssignment(
-                            f.createIdentifier("options")
+                            f.createIdentifier("queryOptions")
                           ),
                         ],
                         true

plugins/typescript/src/templates/context.ts

@@ -1,7 +1,7 @@
 import { pascal } from "case";
 
 export const getContext = (prefix: string) =>
-  `import type { QueryKey } from "react-query";
+  `import type { QueryKey, UseQueryOptions } from "react-query";
   
   export type ${pascal(prefix)}Context = {
     fetcherOptions: {
@@ -29,8 +29,17 @@ export const getContext = (prefix: string) =>
   
   /**
    * Context injected into every react-query hook wrappers
+   * 
+   * @param queryOptions options from the useQuery wrapper
    */
-  export const use${pascal(prefix)}Context = (): ${pascal(prefix)}Context => {
+   export function use${pascal(prefix)}Context<
+   TQueryFnData = unknown,
+   TError = unknown,
+   TData = TQueryFnData,
+   TQueryKey extends QueryKey = QueryKey
+ >(
+   queryOptions?: Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey' | 'queryFn'>
+ ): ${pascal(prefix)}Context {
     return {
       fetcherOptions: {},
       queryOptions: {},