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

nuxt4☁️deploy

nitro

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.):

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

nuxt4☁️deploy

nitro

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.):

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads