Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use React Query with fetch #1481

Closed
oferitz opened this issue Jun 25, 2024 · 3 comments
Closed

Use React Query with fetch #1481

oferitz opened this issue Jun 25, 2024 · 3 comments
Assignees
Labels
fetch Fetch client related issue
Milestone

Comments

@oferitz
Copy link

oferitz commented Jun 25, 2024

I'm trying to use React Query as client with fetch as the mutator instead of Axios.

However, I encountered a problem while trying to do so. The generated hooks have a TypeScript error:
Argument of type { url: string; method: string; } is not assignable to parameter of type string

Using this fetch custom mutator: https://github.com/anymaniax/orval/blob/master/samples/next-app-with-fetch/custom-fetch.ts#L16-L29

Orval output config:

    output: {
      target: 'src/generated',
      schemas: 'src/generated',
      client: 'react-query',
      mode: 'tags-split',
      mock: false,
      biome: true,
      clean: true,
      override: {
        mutator: {
          path: 'src/lib/api-client.ts',
          name: 'customFetch'
        }
      }
    }

The generated code with the above error:

import { useMutation } from '@tanstack/react-query'
import type {
  MutationFunction,
  UseMutationOptions,
  UseMutationResult
} from '@tanstack/react-query'
import { customFetch } from '../../../lib/api-client'
import type { ApiResponse } from '.././'

type SecondParameter<T extends (...args: any) => any> = Parameters<T>[1]

export const createNewTodo= (
  options?: SecondParameter<typeof customFetch>
) => {
  return customFetch<ApiResponse>(
    { url: `/v1/todo`, method: 'POST' },
    options
  )
}

export const getCreateNewTodoMutationOptions = <
  TError = unknown,
  TContext = unknown
>(options?: {
  mutation?: UseMutationOptions<
    Awaited<ReturnType<typeof createNewTodo>>,
    TError,
    void,
    TContext
  >
  request?: SecondParameter<typeof customFetch>
}): UseMutationOptions<
  Awaited<ReturnType<typeof createNewTodo>>,
  TError,
  void,
  TContext
> => {
  const { mutation: mutationOptions, request: requestOptions } = options ?? {}

  const mutationFn: MutationFunction<
    Awaited<ReturnType<typeof createNewTodo>>,
    void
  > = () => {
    return createNewTodo(requestOptions)
  }

  return { mutationFn, ...mutationOptions }
}

export type CreateNewTodoMutationResult = NonNullable<
  Awaited<ReturnType<typeof createNewTodo>>
>

export type CreateNewTodoMutationError = unknown

export const useCreateNewTodo = <
  TError = unknown,
  TContext = unknown
>(options?: {
  mutation?: UseMutationOptions<
    Awaited<ReturnType<typeof createNewTodo>>,
    TError,
    void,
    TContext
  >
  request?: SecondParameter<typeof customFetch>
}): UseMutationResult<
  Awaited<ReturnType<typeof createNewTodo>>,
  TError,
  void,
  TContext
> => {
  const mutationOptions = getCreateNewTodoMutationOptions(options)

  return useMutation(mutationOptions)
}

So the function createNewTodo expecting url and method as object in the 1st argument but we only pass url because method is already part of the 2nd argument options. can you advise how to fix it?

@oferitz oferitz mentioned this issue Jun 25, 2024
7 tasks
@melloware melloware added the fetch Fetch client related issue label Jun 25, 2024
@soartec-lab
Copy link
Member

@oferitz

react-query are able to use fetch as an http client in the next version, v6.32.0 so could you try this after release?

output: {
      target: 'src/generated',
      schemas: 'src/generated',
      client: 'react-query',
+     httpClient: 'fetch'
      mode: 'tags-split',
      mock: false,
      biome: true,
      clean: true,
      override: {
        mutator: {
          path: 'src/lib/api-client.ts',
          name: 'customFetch'
        }
      }
    }

related #1387

@melloware melloware added this to the 6.32.0 milestone Jul 16, 2024
@soartec-lab
Copy link
Member

And id added sample app for custom fetch with react-query.

https://github.com/anymaniax/orval/blob/master/samples/react-query/custom-fetch/src/custom-fetch.ts

So please you look forward to the next release.

@melloware
Copy link
Collaborator

7.0 is now released

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
fetch Fetch client related issue
Projects
None yet
Development

No branches or pull requests

3 participants