#Server API working locally but not on Vercel Preview Deploy

6 messages · Page 1 of 1 (latest)

boreal tusk
#

I have a dynamic set of pages following the pattern /mini/{character_name} which loads data from a json file with 68 characters. I'm using the following code in the component pages/mini/[name].vue

    const miniNameFromRoute = route.params.name
    let { data } = await useFetch('/api/single-mini', { method: 'post', body: { name: miniNameFromRoute } })```

The server API file that is called is `/api/single-mini` which looks like this
```import miniList from '~/assets/data/mini-list.json'

export default defineEventHandler(async (event) => {
    const body = await readBody(event)
    return miniList.find(e => e.name.toLowerCase() === body.name.toLowerCase())
})```

Everything works fine locally, but when I push to Vercel the deployment preview only ever displays the first clicked character's content. It's like it caches the data for every other matching dynamic route that's visited after the first. 

I would greatly appreciate any information on how to fix this behavior!
rigid jolt
#

Do you have route rules set?

boreal tusk
#

No

halcyon crystal
#

@boreal tusk Try defining a key manually for the useFetch operation that includes the minis name

#

Also a get with a dynamic param would be better for the api

#

That should resolve the issue