How to useQuery with non-GET endpoints?

[bonniss]

Description

In my case, some endpoints are POST, but for getting data only. I cannot/do not want to change the API.
The docs state that path can only be any endpoint that supports GET requests.

Proposal

Can we add one version of useQuery, kinda like useQueryFull (okay, naming sucks) that supports valid paths regardless of method?

Extra

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

[Bjorn-Eric-Abr]

How would you call this endpoint with a regular fetch?

Don't know if I understand your issue correctly but could you use a mutation with an empty body? Something like

const { data, error } = await api.useMutation('post', '/api/someendpoint').mutate({})

https://tanstack.com/query/latest/docs/framework/react/reference/useMutation

[bonniss]

const { data, error } = await api.useMutation('post', '/api/someendpoint').mutate({})

https://tanstack.com/query/latest/docs/framework/react/reference/useMutation

I'm using Vercel's SWR, not TanStack Query, as indicated by the assigned labels.

According to the [current documentation](https://openapi-ts.dev/swr-openapi/use-mutate), useMutate and other use* hooks only support GET endpoints.

[Bjorn-Eric-Abr]

const { data, error } = await api.useMutation('post', '/api/someendpoint').mutate({})

https://tanstack.com/query/latest/docs/framework/react/reference/useMutation

I'm using Vercel's SWR, not TanStack Query, as indicated by the assigned labels.

According to the [current documentation](https://openapi-ts.dev/swr-openapi/use-mutate), useMutate and other use* hooks only support GET endpoints.

Ahh, I see. Looking at the SWR part of the docs, could not the same thing technique be applied to the mutate returned from SWR useQuery()?

Out of curiosity, why is the GET a POST?

[onlyann]

Not the original author but I wanted to highlight that if the underlying endpoint is used to retrieve data, one would want to get the benefits offered by useQuery in terms of caching.
Therefore, even when using TanStack query, the behaviour of mutations is not desired.

There can be practical reasons why an endpoint is POST rather than a GET, such as limitations on the server side to handle complex parameters from query strings.

[htunnicliff]

This is an interesting use case @bonniss. For background, the SWR fetcher defined inside swr-openapi looks like this:

async ([_, path, init]) => {
  const res = await client.GET(path, init);
  if (res.error) {
    throw res.error;
  }
  return res.data;
}

As you can see, the GET method is used out of the box, which is why the types for the query hook only permit paths with GET requests.

It sounds like you may need to drop down to SWR itself for your purposes. Here is a pattern that comes to mind:

import useSWR from "swr";
import createClient from "openapi-fetch";
import type { paths } from "./your-api-types";

const client = createClient<paths>();

export function useExample() {
  const body = {
    something: "here",
  };

  return useSWR(["/api/example", body], async ([path, body]) => {
    const res = await client.POST(path, { body });
    if (res.error) {
      throw res.error;
    }
    return res.data;
  });
}

If you want a reusable hook in the style of swr-openapi useQuery, I would recommend taking a look at the generics used in the library source – those would be a good place to start.