openapi-react-query: allow access to response headers

[OliverJAsh]

Description

At the moment it's not possible to access response headers. Would it make sense to expose these somehow?

Proposal

Extra

• I’m willing to open a PR (see CONTRIBUTING.md)

[danilichev]

@OliverJAsh you can get access to response headers from middleware https://openapi-ts.dev/openapi-fetch/middleware-auth#middleware

[OliverJAsh]

Thanks, I'm aware of that, but I don't see an ergonomic way to use that e.g. with useSuspenseQuery in a component.

[aretel]

@OliverJAsh you can get access to response headers from middleware https://openapi-ts.dev/openapi-fetch/middleware-auth#middleware

what if I only need it for one Mutation only?

[darkbasic]

In the response object there is an headers property but it's empty.

what if I only need it for one Mutation only?

Exactly.

[tuckwat-dematic]

This is something that would be beneficial to us as well. Our API returns some metadata in headers that we'd like to have access to. Status code is another one - 204 is one we use for no data (although checking for empty response mostly works as an alternative).

Thoughts on returning the full response object that users could access if needed?

[kav137]

Hello-hello!
I have stumbled across the same problem myself: I need to access response headers after performing POST request. I understand that it is possible to get headers from the middleware layer, but same as in @aretel 's case for me the scenario is not that common and I needed more like a one-off solution.

I checked the source code and haven't found a nice way to do the thing without introducing a breaking change.

But I found a workaround. It requires little hacks like exposing fetchClient and override of mutationFn, but I don't think that it is conceptually wrong 😅 :

/************* api.ts **************/
import createFetchClient from 'openapi-fetch'
import createClient from 'openapi-react-query'
import type { paths as MyPaths } from './my-api-types'

export const myFetchClient = createFetchClient<MyPaths>({
  baseUrl: SOME_BASE_URL,
})
export const myApi = createClient(myFetchClient)

/************* consumer.ts **************/
import { myApi, myFetchClient } from './api'

const myMutation = myApi.useMutation(
  'post',
  '/some/path',
  {
    onSuccess(data, variables, context) {
      console.log('data', data) // entire response including headers
    },
    // override mutationFn explicitly
    mutationFn: async (init) => {
      const fetch = myFetchClient['POST']
      const { data, error, response } = await fetch('/some/path', init);
      if (error) {
        throw error;
      }
      return response;
    }
  },
)