react-query-lightbase-codegen 0.0.16 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -396,38 +396,53 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
396
396
|
const headerParam = headerType && headerType !== 'void' ? `${headerType};` : '';
|
|
397
397
|
const queryParam = queryParamsType && queryParamsType !== 'void' ? `${queryParamsType}` : '';
|
|
398
398
|
const requestBodyComponent = requestBodyTypes && requestBodyTypes !== 'void' ? `${requestBodyTypes}` : '';
|
|
399
|
+
let AxiosErrorType = true ? 'AxiosError<AxiosErrorType | unknown>' : `AxiosError<any>`;
|
|
399
400
|
// QUERIES
|
|
400
401
|
if (!requestBodyComponent && paramsInPath.length && !queryParam && !headerParam) {
|
|
401
402
|
output += `
|
|
403
|
+
type ${componentName}Response = ${genericsTypes}
|
|
402
404
|
type ${componentName}Variables = {
|
|
403
405
|
${paramsTypes}
|
|
404
406
|
}
|
|
405
407
|
|
|
406
408
|
use${componentName}Query.fetch = async (props: ${componentName}Variables ) => {
|
|
407
|
-
const result = await api.${verb}<${
|
|
409
|
+
const result = await api.${verb}<${componentName}Response>(\`${route.replace(/\{/g, '{props.')}\`);
|
|
408
410
|
return result.data;
|
|
409
411
|
}
|
|
410
412
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
411
413
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
412
414
|
|
|
413
|
-
|
|
414
|
-
|
|
415
|
+
use${componentName}Query.updateCache = (
|
|
416
|
+
params: ${componentName}Variables,
|
|
417
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
418
|
+
options?: SetDataOptions | undefined
|
|
419
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
420
|
+
|
|
421
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
422
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
423
|
+
|
|
424
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
425
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
426
|
+
|
|
427
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
428
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
415
429
|
}
|
|
416
|
-
export function use${componentName}Query<T = ${
|
|
430
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
417
431
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props),
|
|
418
432
|
{ enabled: !!props.${paramsInPath.join(' && !!props.')}, ...options }
|
|
419
433
|
);}
|
|
420
434
|
|
|
421
435
|
type ${componentName}MutationProps<T> = {
|
|
422
|
-
options?: UseMutationOptions<${
|
|
436
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
423
437
|
}
|
|
424
|
-
export function use${componentName}Mutation<T = ${
|
|
438
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
425
439
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
426
440
|
props?.options
|
|
427
441
|
)};`;
|
|
428
442
|
}
|
|
429
443
|
if (!requestBodyComponent && paramsInPath.length && queryParam && !headerParam) {
|
|
430
444
|
output += `
|
|
445
|
+
type ${componentName}Response = ${genericsTypes}
|
|
431
446
|
type ${componentName}Variables = {
|
|
432
447
|
${paramsTypes}
|
|
433
448
|
${queryParamsType};
|
|
@@ -436,75 +451,114 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
436
451
|
use${componentName}Query.fetch = async (props:${componentName}Variables) => {
|
|
437
452
|
const {${paramsInPath.join(', ')}, ...queryParams} = props
|
|
438
453
|
const params = queryString.stringify(queryParams);
|
|
439
|
-
const result = await api.${verb}<${
|
|
454
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}?\${params}\`)
|
|
440
455
|
return result.data;
|
|
441
456
|
}
|
|
442
457
|
|
|
443
458
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
444
|
-
use${componentName}Query.queryKey = (params
|
|
459
|
+
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
445
460
|
|
|
461
|
+
use${componentName}Query.updateCache = (
|
|
462
|
+
params: ${componentName}Variables,
|
|
463
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
464
|
+
options?: SetDataOptions | undefined
|
|
465
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
466
|
+
|
|
467
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
468
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
446
469
|
|
|
447
|
-
|
|
448
|
-
|
|
470
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
471
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
472
|
+
|
|
473
|
+
type ${componentName}QueryProps<T = ${componentName}Response> ${componentName}Variables & {
|
|
474
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
449
475
|
}
|
|
450
|
-
export function use${componentName}Query<T = ${
|
|
476
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
451
477
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props), { enabled: !!props.${paramsInPath.join(' && !!props.')}, ...options }
|
|
452
478
|
);}
|
|
453
479
|
|
|
454
480
|
type ${componentName}MutationProps<T> = {
|
|
455
|
-
options?: UseMutationOptions<${
|
|
481
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
456
482
|
}
|
|
457
|
-
export function use${componentName}Mutation<T = ${
|
|
483
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
458
484
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
459
485
|
props?.options
|
|
460
486
|
)};`;
|
|
461
487
|
}
|
|
462
488
|
if (!requestBodyComponent && !paramsInPath.length && !queryParam && !headerParam) {
|
|
463
489
|
output += `
|
|
490
|
+
type ${componentName}Response = ${genericsTypes}
|
|
464
491
|
use${componentName}Query.fetch = async () => {
|
|
465
|
-
const result = await api.${verb}<${
|
|
492
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`);
|
|
466
493
|
return result.data;
|
|
467
494
|
}
|
|
468
495
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
469
496
|
use${componentName}Query.queryKey = (): QueryKey => use${componentName}Query.baseKey()
|
|
470
497
|
|
|
471
|
-
|
|
472
|
-
|
|
498
|
+
use${componentName}Query.updateCache = (
|
|
499
|
+
params: ${componentName}Variables,
|
|
500
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
501
|
+
options?: SetDataOptions | undefined
|
|
502
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
503
|
+
|
|
504
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
505
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
506
|
+
|
|
507
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
508
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
509
|
+
|
|
510
|
+
|
|
511
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = {
|
|
512
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
473
513
|
}
|
|
474
|
-
export function use${componentName}Query<T = ${
|
|
514
|
+
export function use${componentName}Query<T = ${componentName}Response>(props?: ${componentName}QueryProps<T>) {
|
|
475
515
|
return useQuery(use${componentName}Query.queryKey(), use${componentName}Query.fetch, props?.options
|
|
476
516
|
);}
|
|
477
517
|
|
|
478
518
|
type ${componentName}MutationProps<T> = {
|
|
479
|
-
options?: UseMutationOptions<${
|
|
519
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, void, T>
|
|
480
520
|
}
|
|
481
|
-
export function use${componentName}Mutation<T = ${
|
|
521
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
482
522
|
return useMutation(async () => use${componentName}Query.fetch(),
|
|
483
523
|
props?.options
|
|
484
524
|
)};`;
|
|
485
525
|
}
|
|
486
526
|
if (!requestBodyComponent && !paramsInPath.length && queryParam && !headerParam) {
|
|
487
527
|
output += `
|
|
528
|
+
type ${componentName}Response = ${genericsTypes}
|
|
488
529
|
type ${componentName}Variables = {
|
|
489
530
|
${queryParamsType}
|
|
490
531
|
}
|
|
491
532
|
|
|
492
|
-
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
493
|
-
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
494
533
|
use${componentName}Query.fetch = async (props: ${componentName}Variables) => {
|
|
495
534
|
const params = queryString.stringify({${queryParams
|
|
496
535
|
.map((param) => `"${param.name}": props["${param.name}"]`)
|
|
497
536
|
.join(',')}});
|
|
498
|
-
const result = await api.${verb}<${
|
|
537
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}?\${params}\`)
|
|
499
538
|
return result.data;
|
|
500
539
|
}
|
|
501
540
|
|
|
502
|
-
|
|
541
|
+
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
542
|
+
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
543
|
+
|
|
544
|
+
use${componentName}Query.updateCache = (
|
|
545
|
+
params: ${componentName}Variables,
|
|
546
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
547
|
+
options?: SetDataOptions | undefined
|
|
548
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
549
|
+
|
|
550
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
551
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
552
|
+
|
|
553
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
554
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
555
|
+
|
|
556
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}Variables & { options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>}) {
|
|
503
557
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props),
|
|
504
558
|
{ enabled: !!props${queryParams.map((param) => `["${param.name}"]`).join(' && !!props')}, ...options }
|
|
505
559
|
);}
|
|
506
560
|
|
|
507
|
-
export function use${componentName}Mutation<T = ${
|
|
561
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: { options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>}) {
|
|
508
562
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
509
563
|
props?.options
|
|
510
564
|
)};
|
|
@@ -512,67 +566,96 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
512
566
|
}
|
|
513
567
|
if (requestBodyComponent && !paramsInPath.length && !queryParam && !headerParam) {
|
|
514
568
|
output += `
|
|
569
|
+
type ${componentName}Response = ${genericsTypes}
|
|
515
570
|
type ${componentName}Variables = ${requestBodyComponent};
|
|
516
571
|
|
|
517
572
|
use${componentName}Query.fetch = async (body: ${componentName}Variables) => {
|
|
518
|
-
const result = await api.${verb}<${
|
|
573
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`, body)
|
|
519
574
|
return result.data
|
|
520
575
|
}
|
|
521
576
|
|
|
522
577
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
523
578
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
524
579
|
|
|
525
|
-
|
|
526
|
-
|
|
580
|
+
use${componentName}Query.updateCache = (
|
|
581
|
+
params: ${componentName}Variables,
|
|
582
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
583
|
+
options?: SetDataOptions | undefined
|
|
584
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
585
|
+
|
|
586
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
587
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
588
|
+
|
|
589
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
590
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
591
|
+
|
|
592
|
+
|
|
593
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
594
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
527
595
|
}
|
|
528
|
-
export function use${componentName}Query<T = ${
|
|
596
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...body }: ${componentName}QueryProps<T>) {
|
|
529
597
|
return useQuery(use${componentName}Query.queryKey(body), async () => use${componentName}Query.fetch(body), options
|
|
530
598
|
);}
|
|
531
599
|
|
|
532
600
|
type ${componentName}MutationProps<T> = {
|
|
533
|
-
options?: UseMutationOptions<${
|
|
601
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
534
602
|
}
|
|
535
|
-
export function use${componentName}Mutation<T = ${
|
|
603
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
536
604
|
return useMutation(async (body) => use${componentName}Query.fetch(body),
|
|
537
605
|
props?.options
|
|
538
606
|
)};`;
|
|
539
607
|
}
|
|
540
608
|
if (requestBodyComponent && paramsInPath.length && !queryParam && !headerParam) {
|
|
541
609
|
output += `
|
|
610
|
+
type ${componentName}Response = ${genericsTypes}
|
|
542
611
|
type ${componentName}Variables = ${requestBodyComponent} & {${paramsTypes}}
|
|
543
612
|
|
|
544
|
-
type ${componentName}QueryProps<T = ${
|
|
545
|
-
options?: UseQueryOptions<${
|
|
613
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
614
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
546
615
|
}
|
|
547
616
|
|
|
548
617
|
use${componentName}Query.fetch = async (props: ${componentName}Variables) => {
|
|
549
618
|
const {${paramsInPath.join(', ')}, ...body} = props
|
|
550
|
-
const result = await api.${verb}<${
|
|
619
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`, body)
|
|
551
620
|
return result.data
|
|
552
621
|
}
|
|
553
622
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
554
623
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
555
624
|
|
|
556
|
-
|
|
625
|
+
use${componentName}Query.updateCache = (
|
|
626
|
+
params: ${componentName}Variables,
|
|
627
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
628
|
+
options?: SetDataOptions | undefined
|
|
629
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
630
|
+
|
|
631
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
632
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
633
|
+
|
|
634
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
635
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
636
|
+
|
|
637
|
+
|
|
638
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
557
639
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props), { enabled: !!props.${paramsInPath.join(' && !!props.')}, ...options }
|
|
558
640
|
);}
|
|
559
641
|
|
|
560
642
|
type ${componentName}MutationProps<T> = {
|
|
561
|
-
options?: UseMutationOptions<${
|
|
643
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
562
644
|
}
|
|
563
|
-
export function use${componentName}Mutation<T = ${
|
|
645
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
564
646
|
return useMutation(async (body) => use${componentName}Query.fetch(body),
|
|
565
647
|
props?.options
|
|
566
648
|
)};`;
|
|
567
649
|
}
|
|
568
650
|
if (requestBodyComponent && !paramsInPath.length && queryParam && !headerParam) {
|
|
569
651
|
output += `
|
|
652
|
+
type ${componentName}Response = ${genericsTypes}
|
|
570
653
|
type ${componentName}Variables = ${requestBodyComponent} & {
|
|
571
654
|
${queryParamsType}
|
|
572
655
|
}
|
|
573
656
|
|
|
574
|
-
type ${componentName}QueryProps<T = ${
|
|
575
|
-
options?: UseQueryOptions<${
|
|
657
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
658
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
576
659
|
}
|
|
577
660
|
|
|
578
661
|
use${componentName}Query.fetch = async (props: ${componentName}Variables) => {
|
|
@@ -582,13 +665,26 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
582
665
|
const params = queryString.stringify({
|
|
583
666
|
${queryParams.map((param) => `["${param.name}"]: props["${param.name}"]`).join(',')}
|
|
584
667
|
});
|
|
585
|
-
const result = await api.${verb}<${
|
|
668
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}?\${params}\`, body)
|
|
586
669
|
return result.data
|
|
587
670
|
}
|
|
588
671
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
589
672
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
590
673
|
|
|
591
|
-
|
|
674
|
+
use${componentName}Query.updateCache = (
|
|
675
|
+
params: ${componentName}Variables,
|
|
676
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
677
|
+
options?: SetDataOptions | undefined
|
|
678
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
679
|
+
|
|
680
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
681
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
682
|
+
|
|
683
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
684
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
685
|
+
|
|
686
|
+
|
|
687
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
592
688
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props), { enabled: !!props${queryParams
|
|
593
689
|
.map((param) => `["${param.name}"]`)
|
|
594
690
|
.join(' && !!props')}, ...options }
|
|
@@ -596,9 +692,9 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
596
692
|
|
|
597
693
|
|
|
598
694
|
type ${componentName}MutationProps<T> = {
|
|
599
|
-
options?: UseMutationOptions<${
|
|
695
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
600
696
|
}
|
|
601
|
-
export function use${componentName}Mutation<T = ${
|
|
697
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
602
698
|
return useMutation(async (body) => use${componentName}Query.fetch(body),
|
|
603
699
|
props?.options
|
|
604
700
|
)};`;
|
|
@@ -620,23 +716,36 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
620
716
|
}
|
|
621
717
|
if (!requestBodyComponent && !paramsInPath.length && !queryParam && headerParam) {
|
|
622
718
|
output += `
|
|
719
|
+
type ${componentName}Response = ${genericsTypes}
|
|
623
720
|
type ${componentName}Variables = {
|
|
624
721
|
${headerParam}
|
|
625
722
|
};
|
|
626
723
|
|
|
627
724
|
use${componentName}Query.fetch = async (headers: ${componentName}Variables) => {
|
|
628
|
-
const result = await api.${verb}<${
|
|
725
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`, {headers: headers});
|
|
629
726
|
return result.data;
|
|
630
727
|
}
|
|
631
728
|
|
|
632
729
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
633
|
-
|
|
634
730
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
635
731
|
|
|
636
|
-
|
|
637
|
-
|
|
732
|
+
use${componentName}Query.updateCache = (
|
|
733
|
+
params: ${componentName}Variables,
|
|
734
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
735
|
+
options?: SetDataOptions | undefined
|
|
736
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
737
|
+
|
|
738
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
739
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
740
|
+
|
|
741
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
742
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
743
|
+
|
|
744
|
+
|
|
745
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
746
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
638
747
|
}
|
|
639
|
-
export function use${componentName}Query<T = ${
|
|
748
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
640
749
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props),
|
|
641
750
|
{ enabled: !!props${headerParams.map((param) => `["${param.name}"]`).join(' && !!props')}, ...options }
|
|
642
751
|
);}
|
|
@@ -644,15 +753,17 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
644
753
|
|
|
645
754
|
|
|
646
755
|
type ${componentName}MutationProps<T> = {
|
|
647
|
-
options?: UseMutationOptions<${
|
|
756
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
648
757
|
}
|
|
649
|
-
export function use${componentName}Mutation<T = ${
|
|
758
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
650
759
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
651
760
|
props?.options
|
|
652
761
|
)};`;
|
|
653
762
|
}
|
|
654
763
|
if (!requestBodyComponent && !paramsInPath.length && queryParam && headerParam) {
|
|
655
764
|
output += `
|
|
765
|
+
type ${componentName}Response = ${genericsTypes}
|
|
766
|
+
|
|
656
767
|
type ${componentName}Variables = {
|
|
657
768
|
${headerParam}
|
|
658
769
|
${queryParamsType};
|
|
@@ -660,21 +771,33 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
660
771
|
|
|
661
772
|
use${componentName}Query.fetch = async (data: ${componentName}Variables) => {
|
|
662
773
|
const params = queryString.stringify({
|
|
663
|
-
${queryParams.map((
|
|
774
|
+
${queryParams.map((p) => `"${p.name}": data["${p.name}"]`).join(',')}
|
|
664
775
|
});
|
|
665
776
|
const headers = {
|
|
666
|
-
${headerParams.map((
|
|
777
|
+
${headerParams.map((p) => `"${p.name}": data["${p.name}"]`).join(',')}
|
|
667
778
|
}
|
|
668
|
-
const result = await api.${verb}<${
|
|
779
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}?\${params}\`, {headers})
|
|
669
780
|
return result.data;
|
|
670
781
|
}
|
|
671
782
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
672
783
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
673
784
|
|
|
674
|
-
|
|
675
|
-
|
|
785
|
+
use${componentName}Query.updateCache = (
|
|
786
|
+
params: ${componentName}Variables,
|
|
787
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
788
|
+
options?: SetDataOptions | undefined
|
|
789
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
790
|
+
|
|
791
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
792
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
793
|
+
|
|
794
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
795
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
796
|
+
|
|
797
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
798
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
676
799
|
}
|
|
677
|
-
export function use${componentName}Query<T = ${
|
|
800
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
678
801
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props),
|
|
679
802
|
{ enabled: !!props${[...queryParams, ...headerParams]
|
|
680
803
|
.map((param) => `["${param.name}"]`)
|
|
@@ -682,16 +805,18 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
682
805
|
);}
|
|
683
806
|
|
|
684
807
|
type ${componentName}MutationProps<T> = {
|
|
685
|
-
options?: UseMutationOptions<${
|
|
808
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
686
809
|
}
|
|
687
810
|
|
|
688
|
-
export function use${componentName}Mutation<T = ${
|
|
811
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
689
812
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
690
813
|
props?.options
|
|
691
814
|
)};`;
|
|
692
815
|
}
|
|
693
816
|
if (requestBodyComponent && !paramsInPath.length && !queryParam && headerParam) {
|
|
694
817
|
output += `
|
|
818
|
+
type ${componentName}Response = ${genericsTypes}
|
|
819
|
+
|
|
695
820
|
type ${componentName}Variables = ${requestBodyComponent} & {
|
|
696
821
|
${headerParam}
|
|
697
822
|
};
|
|
@@ -700,16 +825,29 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
700
825
|
const headers = {
|
|
701
826
|
${headerParams.map((param) => `"${param.name}": body["${param.name}"]`).join(',')}
|
|
702
827
|
}
|
|
703
|
-
const result = await api.${verb}<${
|
|
828
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`, body, {headers})
|
|
704
829
|
return result.data
|
|
705
830
|
}
|
|
831
|
+
|
|
706
832
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
707
833
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
708
834
|
|
|
709
|
-
|
|
710
|
-
|
|
835
|
+
use${componentName}Query.updateCache = (
|
|
836
|
+
params: ${componentName}Variables,
|
|
837
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
838
|
+
options?: SetDataOptions | undefined
|
|
839
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
840
|
+
|
|
841
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
842
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
843
|
+
|
|
844
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
845
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
846
|
+
|
|
847
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
848
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
711
849
|
}
|
|
712
|
-
export function use${componentName}Query<T = ${
|
|
850
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...body }: ${componentName}QueryProps<T>) {
|
|
713
851
|
return useQuery(use${componentName}Query.queryKey(body), async () => use${componentName}Query.fetch(body),{ enabled: !!body${headerParams
|
|
714
852
|
.map((param) => `["${param.name}"]`)
|
|
715
853
|
.join(' && !!props')}, ...options }
|
|
@@ -717,9 +855,9 @@ const generateRestfulComponent = ({ operation, verb, route, operationIds, parame
|
|
|
717
855
|
|
|
718
856
|
|
|
719
857
|
type ${componentName}MutationProps<T> = {
|
|
720
|
-
options?: UseMutationOptions<${
|
|
858
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
721
859
|
}
|
|
722
|
-
export function use${componentName}Mutation<T = ${
|
|
860
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
723
861
|
return useMutation(async (body) => use${componentName}Query.fetch(body),
|
|
724
862
|
props?.options
|
|
725
863
|
)};`;
|
|
@@ -753,17 +891,26 @@ const generateQueryHooks = (spec, operationIds, headerFilters) => {
|
|
|
753
891
|
/**
|
|
754
892
|
* Main entry of the generator. Generate react-query component from openAPI.
|
|
755
893
|
*/
|
|
756
|
-
const importOpenApi = async ({ data, format,
|
|
894
|
+
const importOpenApi = async ({ data, format, apiDirectory, queryClientDir, headerFilters = [], }) => {
|
|
757
895
|
const operationIds = [];
|
|
758
896
|
let specs = await importSpecs(data, format);
|
|
759
|
-
console.log(JSON.stringify(Object.keys(specs), null, 2));
|
|
760
897
|
(0, exports.resolveDiscriminator)(specs);
|
|
761
898
|
let output = '';
|
|
762
899
|
output = `
|
|
763
|
-
import {
|
|
900
|
+
import {
|
|
901
|
+
useQuery,
|
|
902
|
+
useMutation,
|
|
903
|
+
UseQueryOptions,
|
|
904
|
+
UseMutationOptions,
|
|
905
|
+
QueryKey,
|
|
906
|
+
SetDataOptions,
|
|
907
|
+
} from 'react-query';
|
|
908
|
+
import { Updater } from 'react-query/types/core/utils';
|
|
909
|
+
|
|
764
910
|
import queryString from 'query-string';
|
|
765
911
|
import {AxiosError} from 'axios';
|
|
766
|
-
import { api } from '${
|
|
912
|
+
import { api, AxiosErrorType } from '${apiDirectory}';
|
|
913
|
+
import { queryClient } from '${queryClientDir}';
|
|
767
914
|
|
|
768
915
|
// SCEHMAS
|
|
769
916
|
${(0, exports.generateSchemasDefinition)(specs.components?.schemas)}
|
|
@@ -10,7 +10,7 @@ const path_1 = require("path");
|
|
|
10
10
|
const import_open_api_1 = require("./import-open-api");
|
|
11
11
|
const log = console.log; // tslint:disable-line:no-console
|
|
12
12
|
const createSuccessMessage = (backend) => chalk_1.default.green(`🎉 ${backend ? `[${backend}] ` : ''} Your OpenAPI spec has been converted into react query hooks`);
|
|
13
|
-
function importSpecs({ sourceDirectory, exportDirectory, apiDirectory, headerFilters, }) {
|
|
13
|
+
function importSpecs({ sourceDirectory, exportDirectory, apiDirectory, queryClientDir, headerFilters, }) {
|
|
14
14
|
(0, fs_1.readdir)(sourceDirectory, function (err, filenames) {
|
|
15
15
|
if (err) {
|
|
16
16
|
throw err;
|
|
@@ -21,7 +21,13 @@ function importSpecs({ sourceDirectory, exportDirectory, apiDirectory, headerFil
|
|
|
21
21
|
const format = ['.yaml', '.yml'].includes(ext.toLowerCase()) ? 'yaml' : 'json';
|
|
22
22
|
try {
|
|
23
23
|
const name = `useQueries${filename.split('.')[0]}.tsx`;
|
|
24
|
-
const fileExports = await (0, import_open_api_1.importOpenApi)({
|
|
24
|
+
const fileExports = await (0, import_open_api_1.importOpenApi)({
|
|
25
|
+
data,
|
|
26
|
+
format,
|
|
27
|
+
apiDirectory,
|
|
28
|
+
headerFilters,
|
|
29
|
+
queryClientDir,
|
|
30
|
+
});
|
|
25
31
|
(0, fs_1.writeFileSync)((0, path_1.join)(process.cwd(), `${exportDirectory}/${name}`), fileExports);
|
|
26
32
|
log(createSuccessMessage(filename));
|
|
27
33
|
}
|
|
@@ -376,38 +376,53 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
376
376
|
const headerParam = headerType && headerType !== 'void' ? `${headerType};` : '';
|
|
377
377
|
const queryParam = queryParamsType && queryParamsType !== 'void' ? `${queryParamsType}` : '';
|
|
378
378
|
const requestBodyComponent = requestBodyTypes && requestBodyTypes !== 'void' ? `${requestBodyTypes}` : '';
|
|
379
|
+
let AxiosErrorType = true ? 'AxiosError<AxiosErrorType | unknown>' : `AxiosError<any>`;
|
|
379
380
|
// QUERIES
|
|
380
381
|
if (!requestBodyComponent && paramsInPath.length && !queryParam && !headerParam) {
|
|
381
382
|
output += `
|
|
383
|
+
type ${componentName}Response = ${genericsTypes}
|
|
382
384
|
type ${componentName}Variables = {
|
|
383
385
|
${paramsTypes}
|
|
384
386
|
}
|
|
385
387
|
|
|
386
388
|
use${componentName}Query.fetch = async (props: ${componentName}Variables ) => {
|
|
387
|
-
const result = await api.${verb}<${
|
|
389
|
+
const result = await api.${verb}<${componentName}Response>(\`${route.replace(/\{/g, '{props.')}\`);
|
|
388
390
|
return result.data;
|
|
389
391
|
}
|
|
390
392
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
391
393
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
392
394
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
+
use${componentName}Query.updateCache = (
|
|
396
|
+
params: ${componentName}Variables,
|
|
397
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
398
|
+
options?: SetDataOptions | undefined
|
|
399
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
400
|
+
|
|
401
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
402
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
403
|
+
|
|
404
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
405
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
406
|
+
|
|
407
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
408
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
395
409
|
}
|
|
396
|
-
export function use${componentName}Query<T = ${
|
|
410
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
397
411
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props),
|
|
398
412
|
{ enabled: !!props.${paramsInPath.join(' && !!props.')}, ...options }
|
|
399
413
|
);}
|
|
400
414
|
|
|
401
415
|
type ${componentName}MutationProps<T> = {
|
|
402
|
-
options?: UseMutationOptions<${
|
|
416
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
403
417
|
}
|
|
404
|
-
export function use${componentName}Mutation<T = ${
|
|
418
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
405
419
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
406
420
|
props?.options
|
|
407
421
|
)};`;
|
|
408
422
|
}
|
|
409
423
|
if (!requestBodyComponent && paramsInPath.length && queryParam && !headerParam) {
|
|
410
424
|
output += `
|
|
425
|
+
type ${componentName}Response = ${genericsTypes}
|
|
411
426
|
type ${componentName}Variables = {
|
|
412
427
|
${paramsTypes}
|
|
413
428
|
${queryParamsType};
|
|
@@ -416,75 +431,114 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
416
431
|
use${componentName}Query.fetch = async (props:${componentName}Variables) => {
|
|
417
432
|
const {${paramsInPath.join(', ')}, ...queryParams} = props
|
|
418
433
|
const params = queryString.stringify(queryParams);
|
|
419
|
-
const result = await api.${verb}<${
|
|
434
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}?\${params}\`)
|
|
420
435
|
return result.data;
|
|
421
436
|
}
|
|
422
437
|
|
|
423
438
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
424
|
-
use${componentName}Query.queryKey = (params
|
|
439
|
+
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
425
440
|
|
|
441
|
+
use${componentName}Query.updateCache = (
|
|
442
|
+
params: ${componentName}Variables,
|
|
443
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
444
|
+
options?: SetDataOptions | undefined
|
|
445
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
446
|
+
|
|
447
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
448
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
426
449
|
|
|
427
|
-
|
|
428
|
-
|
|
450
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
451
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
452
|
+
|
|
453
|
+
type ${componentName}QueryProps<T = ${componentName}Response> ${componentName}Variables & {
|
|
454
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
429
455
|
}
|
|
430
|
-
export function use${componentName}Query<T = ${
|
|
456
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
431
457
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props), { enabled: !!props.${paramsInPath.join(' && !!props.')}, ...options }
|
|
432
458
|
);}
|
|
433
459
|
|
|
434
460
|
type ${componentName}MutationProps<T> = {
|
|
435
|
-
options?: UseMutationOptions<${
|
|
461
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
436
462
|
}
|
|
437
|
-
export function use${componentName}Mutation<T = ${
|
|
463
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
438
464
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
439
465
|
props?.options
|
|
440
466
|
)};`;
|
|
441
467
|
}
|
|
442
468
|
if (!requestBodyComponent && !paramsInPath.length && !queryParam && !headerParam) {
|
|
443
469
|
output += `
|
|
470
|
+
type ${componentName}Response = ${genericsTypes}
|
|
444
471
|
use${componentName}Query.fetch = async () => {
|
|
445
|
-
const result = await api.${verb}<${
|
|
472
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`);
|
|
446
473
|
return result.data;
|
|
447
474
|
}
|
|
448
475
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
449
476
|
use${componentName}Query.queryKey = (): QueryKey => use${componentName}Query.baseKey()
|
|
450
477
|
|
|
451
|
-
|
|
452
|
-
|
|
478
|
+
use${componentName}Query.updateCache = (
|
|
479
|
+
params: ${componentName}Variables,
|
|
480
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
481
|
+
options?: SetDataOptions | undefined
|
|
482
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
483
|
+
|
|
484
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
485
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
486
|
+
|
|
487
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
488
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
489
|
+
|
|
490
|
+
|
|
491
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = {
|
|
492
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
453
493
|
}
|
|
454
|
-
export function use${componentName}Query<T = ${
|
|
494
|
+
export function use${componentName}Query<T = ${componentName}Response>(props?: ${componentName}QueryProps<T>) {
|
|
455
495
|
return useQuery(use${componentName}Query.queryKey(), use${componentName}Query.fetch, props?.options
|
|
456
496
|
);}
|
|
457
497
|
|
|
458
498
|
type ${componentName}MutationProps<T> = {
|
|
459
|
-
options?: UseMutationOptions<${
|
|
499
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, void, T>
|
|
460
500
|
}
|
|
461
|
-
export function use${componentName}Mutation<T = ${
|
|
501
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
462
502
|
return useMutation(async () => use${componentName}Query.fetch(),
|
|
463
503
|
props?.options
|
|
464
504
|
)};`;
|
|
465
505
|
}
|
|
466
506
|
if (!requestBodyComponent && !paramsInPath.length && queryParam && !headerParam) {
|
|
467
507
|
output += `
|
|
508
|
+
type ${componentName}Response = ${genericsTypes}
|
|
468
509
|
type ${componentName}Variables = {
|
|
469
510
|
${queryParamsType}
|
|
470
511
|
}
|
|
471
512
|
|
|
472
|
-
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
473
|
-
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
474
513
|
use${componentName}Query.fetch = async (props: ${componentName}Variables) => {
|
|
475
514
|
const params = queryString.stringify({${queryParams
|
|
476
515
|
.map((param) => `"${param.name}": props["${param.name}"]`)
|
|
477
516
|
.join(',')}});
|
|
478
|
-
const result = await api.${verb}<${
|
|
517
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}?\${params}\`)
|
|
479
518
|
return result.data;
|
|
480
519
|
}
|
|
481
520
|
|
|
482
|
-
|
|
521
|
+
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
522
|
+
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
523
|
+
|
|
524
|
+
use${componentName}Query.updateCache = (
|
|
525
|
+
params: ${componentName}Variables,
|
|
526
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
527
|
+
options?: SetDataOptions | undefined
|
|
528
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
529
|
+
|
|
530
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
531
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
532
|
+
|
|
533
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
534
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
535
|
+
|
|
536
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}Variables & { options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>}) {
|
|
483
537
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props),
|
|
484
538
|
{ enabled: !!props${queryParams.map((param) => `["${param.name}"]`).join(' && !!props')}, ...options }
|
|
485
539
|
);}
|
|
486
540
|
|
|
487
|
-
export function use${componentName}Mutation<T = ${
|
|
541
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: { options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>}) {
|
|
488
542
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
489
543
|
props?.options
|
|
490
544
|
)};
|
|
@@ -492,67 +546,96 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
492
546
|
}
|
|
493
547
|
if (requestBodyComponent && !paramsInPath.length && !queryParam && !headerParam) {
|
|
494
548
|
output += `
|
|
549
|
+
type ${componentName}Response = ${genericsTypes}
|
|
495
550
|
type ${componentName}Variables = ${requestBodyComponent};
|
|
496
551
|
|
|
497
552
|
use${componentName}Query.fetch = async (body: ${componentName}Variables) => {
|
|
498
|
-
const result = await api.${verb}<${
|
|
553
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`, body)
|
|
499
554
|
return result.data
|
|
500
555
|
}
|
|
501
556
|
|
|
502
557
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
503
558
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
504
559
|
|
|
505
|
-
|
|
506
|
-
|
|
560
|
+
use${componentName}Query.updateCache = (
|
|
561
|
+
params: ${componentName}Variables,
|
|
562
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
563
|
+
options?: SetDataOptions | undefined
|
|
564
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
565
|
+
|
|
566
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
567
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
568
|
+
|
|
569
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
570
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
571
|
+
|
|
572
|
+
|
|
573
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
574
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
507
575
|
}
|
|
508
|
-
export function use${componentName}Query<T = ${
|
|
576
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...body }: ${componentName}QueryProps<T>) {
|
|
509
577
|
return useQuery(use${componentName}Query.queryKey(body), async () => use${componentName}Query.fetch(body), options
|
|
510
578
|
);}
|
|
511
579
|
|
|
512
580
|
type ${componentName}MutationProps<T> = {
|
|
513
|
-
options?: UseMutationOptions<${
|
|
581
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
514
582
|
}
|
|
515
|
-
export function use${componentName}Mutation<T = ${
|
|
583
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
516
584
|
return useMutation(async (body) => use${componentName}Query.fetch(body),
|
|
517
585
|
props?.options
|
|
518
586
|
)};`;
|
|
519
587
|
}
|
|
520
588
|
if (requestBodyComponent && paramsInPath.length && !queryParam && !headerParam) {
|
|
521
589
|
output += `
|
|
590
|
+
type ${componentName}Response = ${genericsTypes}
|
|
522
591
|
type ${componentName}Variables = ${requestBodyComponent} & {${paramsTypes}}
|
|
523
592
|
|
|
524
|
-
type ${componentName}QueryProps<T = ${
|
|
525
|
-
options?: UseQueryOptions<${
|
|
593
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
594
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
526
595
|
}
|
|
527
596
|
|
|
528
597
|
use${componentName}Query.fetch = async (props: ${componentName}Variables) => {
|
|
529
598
|
const {${paramsInPath.join(', ')}, ...body} = props
|
|
530
|
-
const result = await api.${verb}<${
|
|
599
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`, body)
|
|
531
600
|
return result.data
|
|
532
601
|
}
|
|
533
602
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
534
603
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
535
604
|
|
|
536
|
-
|
|
605
|
+
use${componentName}Query.updateCache = (
|
|
606
|
+
params: ${componentName}Variables,
|
|
607
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
608
|
+
options?: SetDataOptions | undefined
|
|
609
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
610
|
+
|
|
611
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
612
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
613
|
+
|
|
614
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
615
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
616
|
+
|
|
617
|
+
|
|
618
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
537
619
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props), { enabled: !!props.${paramsInPath.join(' && !!props.')}, ...options }
|
|
538
620
|
);}
|
|
539
621
|
|
|
540
622
|
type ${componentName}MutationProps<T> = {
|
|
541
|
-
options?: UseMutationOptions<${
|
|
623
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
542
624
|
}
|
|
543
|
-
export function use${componentName}Mutation<T = ${
|
|
625
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
544
626
|
return useMutation(async (body) => use${componentName}Query.fetch(body),
|
|
545
627
|
props?.options
|
|
546
628
|
)};`;
|
|
547
629
|
}
|
|
548
630
|
if (requestBodyComponent && !paramsInPath.length && queryParam && !headerParam) {
|
|
549
631
|
output += `
|
|
632
|
+
type ${componentName}Response = ${genericsTypes}
|
|
550
633
|
type ${componentName}Variables = ${requestBodyComponent} & {
|
|
551
634
|
${queryParamsType}
|
|
552
635
|
}
|
|
553
636
|
|
|
554
|
-
type ${componentName}QueryProps<T = ${
|
|
555
|
-
options?: UseQueryOptions<${
|
|
637
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
638
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
556
639
|
}
|
|
557
640
|
|
|
558
641
|
use${componentName}Query.fetch = async (props: ${componentName}Variables) => {
|
|
@@ -562,13 +645,26 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
562
645
|
const params = queryString.stringify({
|
|
563
646
|
${queryParams.map((param) => `["${param.name}"]: props["${param.name}"]`).join(',')}
|
|
564
647
|
});
|
|
565
|
-
const result = await api.${verb}<${
|
|
648
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}?\${params}\`, body)
|
|
566
649
|
return result.data
|
|
567
650
|
}
|
|
568
651
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
569
652
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
570
653
|
|
|
571
|
-
|
|
654
|
+
use${componentName}Query.updateCache = (
|
|
655
|
+
params: ${componentName}Variables,
|
|
656
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
657
|
+
options?: SetDataOptions | undefined
|
|
658
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
659
|
+
|
|
660
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
661
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
662
|
+
|
|
663
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
664
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
665
|
+
|
|
666
|
+
|
|
667
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
572
668
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props), { enabled: !!props${queryParams
|
|
573
669
|
.map((param) => `["${param.name}"]`)
|
|
574
670
|
.join(' && !!props')}, ...options }
|
|
@@ -576,9 +672,9 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
576
672
|
|
|
577
673
|
|
|
578
674
|
type ${componentName}MutationProps<T> = {
|
|
579
|
-
options?: UseMutationOptions<${
|
|
675
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
580
676
|
}
|
|
581
|
-
export function use${componentName}Mutation<T = ${
|
|
677
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
582
678
|
return useMutation(async (body) => use${componentName}Query.fetch(body),
|
|
583
679
|
props?.options
|
|
584
680
|
)};`;
|
|
@@ -600,23 +696,36 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
600
696
|
}
|
|
601
697
|
if (!requestBodyComponent && !paramsInPath.length && !queryParam && headerParam) {
|
|
602
698
|
output += `
|
|
699
|
+
type ${componentName}Response = ${genericsTypes}
|
|
603
700
|
type ${componentName}Variables = {
|
|
604
701
|
${headerParam}
|
|
605
702
|
};
|
|
606
703
|
|
|
607
704
|
use${componentName}Query.fetch = async (headers: ${componentName}Variables) => {
|
|
608
|
-
const result = await api.${verb}<${
|
|
705
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`, {headers: headers});
|
|
609
706
|
return result.data;
|
|
610
707
|
}
|
|
611
708
|
|
|
612
709
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
613
|
-
|
|
614
710
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
615
711
|
|
|
616
|
-
|
|
617
|
-
|
|
712
|
+
use${componentName}Query.updateCache = (
|
|
713
|
+
params: ${componentName}Variables,
|
|
714
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
715
|
+
options?: SetDataOptions | undefined
|
|
716
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
717
|
+
|
|
718
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
719
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
720
|
+
|
|
721
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
722
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
723
|
+
|
|
724
|
+
|
|
725
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
726
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
618
727
|
}
|
|
619
|
-
export function use${componentName}Query<T = ${
|
|
728
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
620
729
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props),
|
|
621
730
|
{ enabled: !!props${headerParams.map((param) => `["${param.name}"]`).join(' && !!props')}, ...options }
|
|
622
731
|
);}
|
|
@@ -624,15 +733,17 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
624
733
|
|
|
625
734
|
|
|
626
735
|
type ${componentName}MutationProps<T> = {
|
|
627
|
-
options?: UseMutationOptions<${
|
|
736
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
628
737
|
}
|
|
629
|
-
export function use${componentName}Mutation<T = ${
|
|
738
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
630
739
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
631
740
|
props?.options
|
|
632
741
|
)};`;
|
|
633
742
|
}
|
|
634
743
|
if (!requestBodyComponent && !paramsInPath.length && queryParam && headerParam) {
|
|
635
744
|
output += `
|
|
745
|
+
type ${componentName}Response = ${genericsTypes}
|
|
746
|
+
|
|
636
747
|
type ${componentName}Variables = {
|
|
637
748
|
${headerParam}
|
|
638
749
|
${queryParamsType};
|
|
@@ -640,21 +751,33 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
640
751
|
|
|
641
752
|
use${componentName}Query.fetch = async (data: ${componentName}Variables) => {
|
|
642
753
|
const params = queryString.stringify({
|
|
643
|
-
${queryParams.map((
|
|
754
|
+
${queryParams.map((p) => `"${p.name}": data["${p.name}"]`).join(',')}
|
|
644
755
|
});
|
|
645
756
|
const headers = {
|
|
646
|
-
${headerParams.map((
|
|
757
|
+
${headerParams.map((p) => `"${p.name}": data["${p.name}"]`).join(',')}
|
|
647
758
|
}
|
|
648
|
-
const result = await api.${verb}<${
|
|
759
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}?\${params}\`, {headers})
|
|
649
760
|
return result.data;
|
|
650
761
|
}
|
|
651
762
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
652
763
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
653
764
|
|
|
654
|
-
|
|
655
|
-
|
|
765
|
+
use${componentName}Query.updateCache = (
|
|
766
|
+
params: ${componentName}Variables,
|
|
767
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
768
|
+
options?: SetDataOptions | undefined
|
|
769
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
770
|
+
|
|
771
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
772
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
773
|
+
|
|
774
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
775
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
776
|
+
|
|
777
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
778
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
656
779
|
}
|
|
657
|
-
export function use${componentName}Query<T = ${
|
|
780
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...props }: ${componentName}QueryProps<T>) {
|
|
658
781
|
return useQuery(use${componentName}Query.queryKey(props), async () => use${componentName}Query.fetch(props),
|
|
659
782
|
{ enabled: !!props${[...queryParams, ...headerParams]
|
|
660
783
|
.map((param) => `["${param.name}"]`)
|
|
@@ -662,16 +785,18 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
662
785
|
);}
|
|
663
786
|
|
|
664
787
|
type ${componentName}MutationProps<T> = {
|
|
665
|
-
options?: UseMutationOptions<${
|
|
788
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
666
789
|
}
|
|
667
790
|
|
|
668
|
-
export function use${componentName}Mutation<T = ${
|
|
791
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
669
792
|
return useMutation(async (data) => use${componentName}Query.fetch(data),
|
|
670
793
|
props?.options
|
|
671
794
|
)};`;
|
|
672
795
|
}
|
|
673
796
|
if (requestBodyComponent && !paramsInPath.length && !queryParam && headerParam) {
|
|
674
797
|
output += `
|
|
798
|
+
type ${componentName}Response = ${genericsTypes}
|
|
799
|
+
|
|
675
800
|
type ${componentName}Variables = ${requestBodyComponent} & {
|
|
676
801
|
${headerParam}
|
|
677
802
|
};
|
|
@@ -680,16 +805,29 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
680
805
|
const headers = {
|
|
681
806
|
${headerParams.map((param) => `"${param.name}": body["${param.name}"]`).join(',')}
|
|
682
807
|
}
|
|
683
|
-
const result = await api.${verb}<${
|
|
808
|
+
const result = await api.${verb}<${componentName}Response>(\`${route}\`, body, {headers})
|
|
684
809
|
return result.data
|
|
685
810
|
}
|
|
811
|
+
|
|
686
812
|
use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
|
|
687
813
|
use${componentName}Query.queryKey = (params: ${componentName}Variables ): QueryKey => [...use${componentName}Query.baseKey(), params];
|
|
688
814
|
|
|
689
|
-
|
|
690
|
-
|
|
815
|
+
use${componentName}Query.updateCache = (
|
|
816
|
+
params: ${componentName}Variables,
|
|
817
|
+
updater: Updater<${componentName}Response | undefined, ${componentName}Response>,
|
|
818
|
+
options?: SetDataOptions | undefined
|
|
819
|
+
) => queryClient.setQueryData<${componentName}Response>(use${componentName}Query.queryKey(params), updater, options);
|
|
820
|
+
|
|
821
|
+
use${componentName}Query.prefetch = (params: ${componentName}Variables) =>
|
|
822
|
+
queryClient.prefetchQuery<${componentName}Response>(use${componentName}Query.queryKey(params), ()=> use${componentName}Query.fetch(params));
|
|
823
|
+
|
|
824
|
+
use${componentName}Query.invalidate = (params: ${componentName}Variables) =>
|
|
825
|
+
queryClient.invalidateQueries<${componentName}Response>(use${componentName}Query.queryKey(params));
|
|
826
|
+
|
|
827
|
+
type ${componentName}QueryProps<T = ${componentName}Response> = ${componentName}Variables & {
|
|
828
|
+
options?: UseQueryOptions<${componentName}Response, ${AxiosErrorType}, T, any>
|
|
691
829
|
}
|
|
692
|
-
export function use${componentName}Query<T = ${
|
|
830
|
+
export function use${componentName}Query<T = ${componentName}Response>({ options = {}, ...body }: ${componentName}QueryProps<T>) {
|
|
693
831
|
return useQuery(use${componentName}Query.queryKey(body), async () => use${componentName}Query.fetch(body),{ enabled: !!body${headerParams
|
|
694
832
|
.map((param) => `["${param.name}"]`)
|
|
695
833
|
.join(' && !!props')}, ...options }
|
|
@@ -697,9 +835,9 @@ export const generateRestfulComponent = ({ operation, verb, route, operationIds,
|
|
|
697
835
|
|
|
698
836
|
|
|
699
837
|
type ${componentName}MutationProps<T> = {
|
|
700
|
-
options?: UseMutationOptions<${
|
|
838
|
+
options?: UseMutationOptions<${componentName}Response, ${AxiosErrorType}, ${componentName}Variables, T>
|
|
701
839
|
}
|
|
702
|
-
export function use${componentName}Mutation<T = ${
|
|
840
|
+
export function use${componentName}Mutation<T = ${componentName}Response>(props?: ${componentName}MutationProps<T>) {
|
|
703
841
|
return useMutation(async (body) => use${componentName}Query.fetch(body),
|
|
704
842
|
props?.options
|
|
705
843
|
)};`;
|
|
@@ -732,17 +870,26 @@ const generateQueryHooks = (spec, operationIds, headerFilters) => {
|
|
|
732
870
|
/**
|
|
733
871
|
* Main entry of the generator. Generate react-query component from openAPI.
|
|
734
872
|
*/
|
|
735
|
-
export const importOpenApi = async ({ data, format,
|
|
873
|
+
export const importOpenApi = async ({ data, format, apiDirectory, queryClientDir, headerFilters = [], }) => {
|
|
736
874
|
const operationIds = [];
|
|
737
875
|
let specs = await importSpecs(data, format);
|
|
738
|
-
console.log(JSON.stringify(Object.keys(specs), null, 2));
|
|
739
876
|
resolveDiscriminator(specs);
|
|
740
877
|
let output = '';
|
|
741
878
|
output = `
|
|
742
|
-
import {
|
|
879
|
+
import {
|
|
880
|
+
useQuery,
|
|
881
|
+
useMutation,
|
|
882
|
+
UseQueryOptions,
|
|
883
|
+
UseMutationOptions,
|
|
884
|
+
QueryKey,
|
|
885
|
+
SetDataOptions,
|
|
886
|
+
} from 'react-query';
|
|
887
|
+
import { Updater } from 'react-query/types/core/utils';
|
|
888
|
+
|
|
743
889
|
import queryString from 'query-string';
|
|
744
890
|
import {AxiosError} from 'axios';
|
|
745
|
-
import { api } from '${
|
|
891
|
+
import { api, AxiosErrorType } from '${apiDirectory}';
|
|
892
|
+
import { queryClient } from '${queryClientDir}';
|
|
746
893
|
|
|
747
894
|
// SCEHMAS
|
|
748
895
|
${generateSchemasDefinition(specs.components?.schemas)}
|
|
@@ -4,7 +4,7 @@ import { join, parse } from 'path';
|
|
|
4
4
|
import { importOpenApi } from './import-open-api';
|
|
5
5
|
const log = console.log; // tslint:disable-line:no-console
|
|
6
6
|
const createSuccessMessage = (backend) => chalk.green(`🎉 ${backend ? `[${backend}] ` : ''} Your OpenAPI spec has been converted into react query hooks`);
|
|
7
|
-
export function importSpecs({ sourceDirectory, exportDirectory, apiDirectory, headerFilters, }) {
|
|
7
|
+
export function importSpecs({ sourceDirectory, exportDirectory, apiDirectory, queryClientDir, headerFilters, }) {
|
|
8
8
|
readdir(sourceDirectory, function (err, filenames) {
|
|
9
9
|
if (err) {
|
|
10
10
|
throw err;
|
|
@@ -15,7 +15,13 @@ export function importSpecs({ sourceDirectory, exportDirectory, apiDirectory, he
|
|
|
15
15
|
const format = ['.yaml', '.yml'].includes(ext.toLowerCase()) ? 'yaml' : 'json';
|
|
16
16
|
try {
|
|
17
17
|
const name = `useQueries${filename.split('.')[0]}.tsx`;
|
|
18
|
-
const fileExports = await importOpenApi({
|
|
18
|
+
const fileExports = await importOpenApi({
|
|
19
|
+
data,
|
|
20
|
+
format,
|
|
21
|
+
apiDirectory,
|
|
22
|
+
headerFilters,
|
|
23
|
+
queryClientDir,
|
|
24
|
+
});
|
|
19
25
|
writeFileSync(join(process.cwd(), `${exportDirectory}/${name}`), fileExports);
|
|
20
26
|
log(createSuccessMessage(filename));
|
|
21
27
|
}
|