Typing get wrapper around react query

[amritk]

I'm just trying to write a little helper here, but I seem to be missing something. I've tried all variations of types for path but I can't seem to find the right one to satisfy everything.

import { useQuery } from '@tanstack/react-query'
import createClient, { type ParamsOption, type RequestBodyOption } from 'openapi-fetch'

import type { paths } from './schema'

export type UseQueryOptions<T> = ParamsOption<T> &
  RequestBodyOption<T> & {
    reactQuery?: {
      enabled: boolean
      // add other React Query options as needed
    }
  }

export const client = createClient<paths>({
  baseUrl: import.meta.env.VITE_API_URL,
  credentials: 'include',
  headers: {
    'Content-Type': null,
  },
})

export const GET = <P extends keyof paths>(
  path: P,
  { params, reactQuery }: UseQueryOptions<paths[P]['get']>,
) =>
  useQuery({
    ...reactQuery,
    queryFn: async ({ signal }) => {
      const { data, error } = await client.GET(path, {
        params,
        signal,
      })
      if (data) return data
      throw new Error(error)
    },
    queryKey: [path, params],
  })

The typescript error that path gives is

Argument of type 'keyof paths' is not assignable to parameter of type 'PathsWithMethod<paths, "get">'.
  Type '"/t/{teamId}/projects/{id}/archive"' is not assignable to type 'PathsWithMethod<paths, "get">'. Did you mean '"/t/{teamId}/projects/{id}"'?

I'm not quite sure how to type path so that it will fit

I'm not sure how this one doesn't get the same error

[drwpow]

The type inference is actually pretty layered, and complex, and difficult to recreate easily. Is there any reason why you’re trying to manually type this and not just letting automatic inference take over (like in the React Query example)?

[amritk]

in the react query example there was a hard coded path being passed in, that works with this too. But there's a lot of extra boiler plate you need to copy and paste into every hook. Just trying to reduce it a little. If you can give me a hint I can try to sort it out 😃

[amritk]

maybe @RWOverdijk can help since he got it working already (not sure how I tried copying)

[RWOverdijk]

To be fair, I wrote that in august. That's like 10 years ago in internet time so it might not work anymore if stuff changed in the lib. Unfortunately I am not working on that project right now either so it's hard for me to say something useful.

[vyrotek]

I put together this quick GET helper. Maybe someone can expand it or improve it. 😅

import { useQuery, UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
import createClient from "openapi-fetch";
import type { FetchOptions, FetchResponse } from "openapi-fetch";
import type { PathsWithMethod, FilterKeys } from "openapi-typescript-helpers";
import { paths } from "../api";

const client = createClient<paths>();

export function useGet<
  Path extends PathsWithMethod<paths, 'get'>,
  Init extends FetchOptions<FilterKeys<paths[Path], 'get'>>,
  Response extends FetchResponse<paths[Path]['get']>['data'],
>(
  path: Path,
  init: Init,
  query?: Partial<UseQueryOptions>) {
  return useQuery({
    ...query,
    queryKey: [path, init?.params, init?.body],
    queryFn: async ({ signal }) => {
      const { data, error, response } = await client.GET(path, { ...init, signal });
      if (error) {
        if (response.status == 403) {
          // Unauthorized
        }
        throw new Error(error as string);
      }
      return data;
    },
  }) as UseQueryResult<Response>;
}