openapi-typescript react-query

README.md

openai-typescript react-query

This is an extremely crude example for a function that uses your openapi-typescript output to make a dynamic hook with react-query. If you find this useful and make changes, please comment them!

openapi-ts/openapi-typescript#1406

useFetch.ts

// generated paths
import { paths } from '@/data/@generated/api';
import { UseQueryOptions, UseQueryResult, useQuery } from '@tanstack/react-query';
import { FetchOptions, FetchResponse } from 'openapi-fetch';
// Required! `pnpm i -D openapi-typescript-helpers`
import type { FilterKeys, PathsWithMethod, HasRequiredKeys, HttpMethod } from 'openapi-typescript-helpers';
// Import your client generated by `openapi-fetch`
import api from './api';

type QueryOptions = { queryOpts?: Partial<UseQueryOptions> };

type CreateUseQuery<Paths extends {}> = {
  useFetch<T extends HttpMethod, P extends PathsWithMethod<Paths, T>>(
    method: T,
    url: P,
    ...init: HasRequiredKeys<FetchOptions<FilterKeys<Paths[P], T>>> extends never
      ? [((FetchOptions<FilterKeys<Paths[P], T>> & QueryOptions) | undefined)?]
      : [FetchOptions<FilterKeys<Paths[P], T>> & QueryOptions]
  ): UseQueryResult<
    FetchResponse<T extends keyof Paths[P] ? Paths[P][T] : unknown>['data'],
    FetchResponse<T extends keyof Paths[P] ? Paths[P][T] : unknown>['error']
  >;
};

export const createUseQuery: CreateUseQuery<paths> = {
  // @ts-expect-error It does return the correct type
  useFetch(method, url, ...init) {
    const options = init[0];
    return useQuery({
      // @ts-expect-error Params does exist sometimes
      queryKey: [url, options?.body, options?.params],
      queryFn: async ({ signal }) => {
        // @ts-expect-error All good, we know this method exists
        const { data, error } = await api.fetch[method.toUpperCase()](url, {
          //                          ^^^^^^^^^ This is your client generated by `openapi-fetch`
          ...options,
          signal,
        });
        if (data) return data;
        throw new Error(error);
      },
      ...options?.queryOpts,
    });
  },
};