Nuxt•3d ago

🚨 Nuxt 3 Production Issue: useFetch Params Lost in Server API Route

Hello everyone! I'm running into a baffling issue where query parameters sent via useFetch are lost when the application is deployed to production (NO SSR), but work perfectly fine in my local environment. 🐛 The Problem When using useFetch to call a local Nuxt Server API route, the params (or query) object is correctly serialized and included in the network request on the client side. However, inside the server handler, getQuery(event) returns an object where all custom parameters are null or missing. 🖥️ Client-Side Component Code (Calling the API) I am using the params option on the client side to pass the query string:

interface QueryParams extends BaseQueryParams<AllowColumnSorts> {
  search?: string;
}

const { queryParams, saveQuery, apiParams } = useQueryParams<QueryParams>({
  defaults: {
    page: 1,
    per_page: 25,
    sort_by: 'created_at',
    sort_direction: 'desc',
    search: undefined,
  },
  mapQueryKey: (key) => {
    if (key === 'search') return 'filters[search]';

    return String(key);
  },
  transformForApi: (params) => ({
    page: params.page,
    per_page: params.per_page,
    sort_by: params.sort_by,
    sort_direction: params.sort_direction,
    search: params.search,
  }),
});

const toast = useToast();

const { data, status, error } = await useFetch<{
  users: User[];
  meta: Meta;
}>('/api/users', {
  query: apiParams, // is a reactive object
  watch: [apiParams],
  onResponse: saveQuery,
});

interface QueryParams extends BaseQueryParams<AllowColumnSorts> {
  search?: string;
}

const { queryParams, saveQuery, apiParams } = useQueryParams<QueryParams>({
  defaults: {
    page: 1,
    per_page: 25,
    sort_by: 'created_at',
    sort_direction: 'desc',
    search: undefined,
  },
  mapQueryKey: (key) => {
    if (key === 'search') return 'filters[search]';

    return String(key);
  },
  transformForApi: (params) => ({
    page: params.page,
    per_page: params.per_page,
    sort_by: params.sort_by,
    sort_direction: params.sort_direction,
    search: params.search,
  }),
});

const toast = useToast();

const { data, status, error } = await useFetch<{
  users: User[];
  meta: Meta;
}>('/api/users', {
  query: apiParams, // is a reactive object
  watch: [apiParams],
  onResponse: saveQuery,
});

⚙️ Server-Side API Handler Code (/server/api/users.ts) Inside the handler, query is missing my custom parameters (page, per_page, sort_by, etc.):

2 Replies

kapa.ai•3d ago

Hi @EatSleepGames. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry you're experiencing this issue with query parameters being lost in production SSR when using useFetch to call a local Nuxt server API route. Based on the knowledge sources provided, there are a few important points and potential causes to consider: 1. Reactivity and Serialization of Query Parameters
When you pass a reactive object (like a ref or computed) to the query option in useFetch, Nuxt will automatically watch for changes and serialize the values into the request. However, if the object structure is complex or contains undefined/null values, serialization might not behave as expected. Also, the mapping function (mapQueryKey) and transformForApi logic could affect the final query string. Make sure that the object passed to query is a plain object with only serializable values at the time of the request.
See related: useFetch and reactivity and useFetch docs. 2. Differences Between Local and Production Environments
Sometimes, differences in environment (e.g., Node.js version, deployment platform, or server configuration) can affect how requests are handled. For example, in SSR, the server-side fetch may not handle relative URLs or query serialization the same way as the client.
See: Native fetch in SSR requires absolute URLs. 3. useFetch Internal Handling and Known Issues
There have been issues where useFetch or $fetch loses context or parameters during SSR, especially when using custom $fetch or when the event context is not properly forwarded.
See: useFetch with custom $fetch losing event during SSR. 4. Query Parameter Mapping
If you use a mapping function (like mapQueryKey), ensure that the final keys and values are what you expect. Sometimes, nested or bracketed keys (e.g., filters[search]) may not be parsed as expected by the server handler, especially if the server expects flat keys. 5. Debugging Tips
- Log the actual request URL and query string on both client and server. - Check if the query object contains all expected keys and values right before the useFetch call. - On the server, log the output of getQuery(event) to see what is actually received. Summary:
The knowledge sources confirm that issues with query parameter serialization, reactivity, and SSR context can cause parameters to be lost or not appear as expected in server handlers. There is no single "fix" mentioned, but you should: - Ensure the query object is plain and serializable. - Avoid undefined/null values in query. - Double-check your mapping and transformation logic. - If using custom $fetch or advanced SSR features, ensure event context is preserved. If after these checks the issue persists, it may be related to a deeper bug or edge case in Nuxt's SSR handling of useFetch, as seen in some of the referenced issues. If you can provide a minimal reproduction, it may help to open an issue on the Nuxt repo, as similar problems have been discussed and fixed in the past (example issue). Let me know if you need help with a specific debugging step or want to share more code for review! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@140278910406361088> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

🚨 Nuxt 3 Production Issue: useFetch Params Lost in Server API Route

Did you find this page helpful?