TL;DR: is there ny way to pass custom parameters to useFetch? I was passing them to “query/params”, but that’s given me some problems I’m now trying to solve.
Explanation:
I’m working on this app, Nuxt frontend which makes API calls to an external server.
The guy who started the app created one endpoint for each database table in the “server” folder (table1/index.post.ts, table2/[id].get.ts, etc) for security, to avoid calling the external URL directly from the components.
When I saw that increasing amount of files, I decided to create a generic endpoint. However, while it seemed to work at the beginning, I just noticed the filters are not working.
A deeper explanation. This is how my partner’s multiple endpoints were called:
const { data: auctionData, error: auctionError } = await useFetch(
`/api/auction`,
{
method: 'POST',
body: auctionBody,
query: queryFilters
}
)
And this is how I call my generic endpoint (I just learnt “params” is an alias for “query”, btw):
const { data: auctionData, error: auctionError } = await useFetch(
`/api/core/generic`,
{
method: 'POST',
body: auctionBody,
params: {
path: `lots/auctions`,
},
query: {
filters: queryFilters
},
}
)
So, in my partner’s multiple endpoints solution, he defined “const query = getQuery(event)”, and “query” was printed to console like this: { param1: ‘true’, param2: ’10’ }
In my generic enpoint solution, I’m defining “query = getQuery(event).filters”, and “query” is printed to console as { “param1”: “true”, “param2”: “10” } (notice the double quotes), which I can understand why, now that I know “params” and “query” are the same.
What to do in this case? I’ve search in the documentation, but I see no way of providing custom parameters to useFetch so I can provide the external API path and use a generic endpoint.
I’m thinking about going for a composable, but I need to provide an authorization header, which can only be done in the server side (as it receives “event”)
I tried what was described above