How can I get response in data ref when using vue-query with fetch

[pbrzosko]

I can see, that generated code for fetch and vue-query wraps response in an object with http status:

const res = await fetch(getAPIUrl(),
  {      
    ...options,
    method: 'GET'
  }
  )
  const data = await res.json()
  return { status: res.status, data }

This results in data ref having this as a value. But I am not interested in status - how can I make it so that data contains the response only, so that I don't have to do this for every query:

query: {
      select: (response) => response.data,
    },

[melloware]

cc @soartec-lab

[soartec-lab]

@pbrzosko

That's not possible at the moment. Status code must be issued every time.

[osamahkenawy]

Why are you saying that its possible of caurse

[soartec-lab]

@osamahkenawy

If you using fetch to httpClient, will be generate like a folow:

export type listPetsResponse = {
  data: Pets;
  status: number;
};

https://github.com/orval-labs/orval/blob/master/samples/react-query/custom-fetch/src/gen/pets/pets.ts#L62-L65

the generated code requires a status in the response type.

[osamahkenawy]

I didn't quite understand your point clearly. Could you please clarify But as i understand what will happen if we removed the status and based on ur code we can do something like that
Definitions
`type Pets = {
id: number;
name: string;
// other fields
};

type ListPetsResponse = {
data: Pets[];
};`

async function fetchWithoutStatus<T>(url: string): Promise<T> { const response = await fetch(url); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const data = await response.json(); return data; }

[soartec-lab]

Look at the generated code.

https://github.com/orval-labs/orval/blob/master/samples/react-query/custom-fetch/src/gen/pets/pets.ts#L62-L65
https://github.com/orval-labs/orval/blob/master/samples/react-query/custom-fetch/src/gen/pets/pets.ts#L86-L87

The http client response type requires for status.
Since the http client is used in hooks, the source code output by orval always requires the status in the fetcher response.

[osamahkenawy]

Look i am going to help you first create a custom wrapper for that
like this one for example

export async function fetchWrapper(url, options) {
  const res = await fetch(url, {
    ...options,
    method: options.method || 'GET',
  });
  const data = await res.json();

  if (!res.ok) {
    throw new Error(data.message || 'Error fetching data');
  }

  return data; // Only return the data
}

After that call it like that

export function useCustomQuery(queryKey, apiUrl, options = {}) {
  return useQuery(queryKey, () => fetchWrapper(apiUrl, options));
}

use it in ur component

 const { data, error, isLoading, isError } = useCustomQuery(
      'exampleQuery',
'ur url'
    );

    return { data, error, isLoading, isError };

[soartec-lab]

Hey everyone. I fixed this issue by i added new config option. Please try this 🙌

https://orval.dev/guides/fetch-client#return-original-defined-return-type

[osamahkenawy]

Good job